html - 打开插件时的 Tinymce 插件图像不会换行到父 div 的宽度

Question

我正在开发一个简单的 TinyMCE 插件，它显示由大量 HTML 填充的图像。

插件的 JS 在这里:

https://emojinode.com/assets/includes/tinymce/plugins/twemoji_svg_nature/plugin.min.js

您可以看到 HTML 是在开始的行中定义的:

return a = "<div style='width:400px;'>...

单击插件图标时，会呈现 HTML，但由于某种原因，图像不会换行到父级 400px div 的宽度。

这是示例页面:

https://emojinode.com/test.html

单击狗工具栏图标以查看问题。

但是，如果我查看在单击狗图标时呈现的 HTML，图像会很好地环绕。

为它呈现的 HTML 显示在上面测试页面的底部，显示图像如何很好地包装。

我想知道是否有任何方法可以解决这个问题？

Answer 1

TinyMCE 的皮肤具有用于管理编辑器内容的 CSS，其中一部分是此 CSS:

white-space: nowrap;

您可以使用内联 CSS 为您的 div 元素覆盖它，或者您可以通过覆盖它的 content_css 将 CSS 传递给编辑器。请注意，您可能希望针对特定的 div 元素，否则您可能会因覆盖该皮肤 CSS 而遇到其他问题。