Summernote 图像字幕插件不适用于图像向左或向右浮动

问题描述

使用 Summernote 所见即所得 html 编辑器。有人创建了一个插件来为图像添加标题。当图像周围没有文字环绕时它工作正常（使用向左或向右浮动）。 However,when the image is chosen and float left or right is invoked for the image,the caption at the bottom shifts out of the bottom position.这显然不是 Sumemrnote 正常格式的一部分，因此操作有问题。

作为一种变通方法，添加一些外部 CSS 似乎有助于将标题保持在图像下方，并保持在图像的宽度内。 However,when the float left/right is chosen for text wrapping,it no longer works.

由于这是一个插件函数，并且 dom 操作是在 Summernote 中完成的，我无法更改那里所做的。

我可以：(1) 预先更改添加 CSS 样式，如图所示 (2) 实现一些 javascript/jquery 以触发操作以进行 dom 更改。 (3) 修改插件，给出代码。

我更喜欢 1，因为它最干净，或者 2，但我必须弄清楚是否可以捕获按钮点击，但 3 远远超出了我的专业知识或对 Summernote 内部工作和开发人员代码的理解。

插件是DiemenDesign/Summernote-image-attributes，找到here，如果有兴趣。

以下是 (1) Image with Text (2) Image with text and float left (3) Image with Caption and Text and float left

结果代码如下（添加了 CSS 样式）：

<body>
    <style>
    figure {
       background-color: #fff;
       padding: 5px;
       font-size: .875em;
       display: table;
    }

    figure img {
        display: block;
        width: 100%;
    }

    figcaption {
        display: table-caption;
        caption-side: bottom;
        background: #fff;
        padding: 0 5px 5px;
    }
    </style> 
    <h3>//RESULT 1: no float left</h3>
    <p>
        <img src="https://via.placeholder.com/200x200" style="width: 200px;">
        <span style="color: rgb(97,79,65); font-family: adelle,serif; font-size: 1rem;">
            Queso macaroni cheese cheesy grin. When the cheese comes out everybody's happy cheesecake croque monsieur blue castello paneer swiss melted cheese cream cheese. Melted cheese edam roquefort chalk and cheese monterey jack caerphilly fromage aireDale. Pepper jack bavarian bergkase fondue roquefort ricotta dolcelatte cow mascarpone. Gouda cheesecake.
            Melted cheese babybel boursin. Cheesecake when the cheese comes out everybody's happy cow cheesecake babybel halloumi pepper jack pepper jack.
        </span>
    </p>
    <br>

    <h3>//RESULT 2: float left</h3>
    <p>
        <img src="https://via.placeholder.com/200x200" style="width: 200px; float: left;" class="note-float-left">
        <span style="color: rgb(97,serif; font-size: 1rem;">
            Queso macaroni cheese cheesy grin. When the cheese comes out everybody's happy cheesecake croque monsieur blue castello paneer swiss melted cheese cream cheese. Melted cheese edam roquefort chalk and cheese monterey jack caerphilly fromage aireDale. Pepper jack bavarian bergkase fondue roquefort ricotta dolcelatte cow mascarpone. Gouda cheesecake.
            Melted cheese babybel boursin. Cheesecake when the cheese comes out everybody's happy cow cheesecake babybel halloumi pepper jack pepper jack.
        </span>
    </p>
    <br><br><br><br><br><br>

    <h3>//RESULT 3: float left and image caption added</h3>
    <p>
        <figure class="figureClass">
            <img src="https://via.placeholder.com/200x200" style="width: 200px; float: left; height: 200px;" class="note-float-left">
            <figcaption class="captionClass">Test Caption for the Image Blah Blah Blah Blah Blah Blah</figcaption>
        </figure>
        <span style="color: rgb(97,serif; font-size: 1rem;">
            Queso macaroni cheese cheesy grin. When the cheese comes out everybody's happy cheesecake croque monsieur blue castello paneer swiss melted cheese cream cheese. Melted cheese edam roquefort chalk and cheese monterey jack caerphilly fromage aireDale. Pepper jack bavarian bergkase fondue roquefort ricotta dolcelatte cow mascarpone. Gouda cheesecake.
            Melted cheese babybel boursin. Cheesecake when the cheese comes out everybody's happy cow cheesecake babybel halloumi pepper jack pepper jack.
        </span>
    </p>
</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript