0

我正在使用 CKEditor 4.8.0，在某些情况下，我的图像不会出现在 CKEditor 窗口中，但会显示在实际的页面输出中。进一步研究它，我看到图像标签用一个 span 标签包装，该标签具有以下类：cke_widget_wrapper、cke_widget_inline、cke_widget_image、cke_image_nocaption。

<span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption" data-cke-display-name="image" data-cke-widget-id="19" role="region" aria-label="image widget">

cke_widget_inline 类设置 display: inline-block; 这隐藏了这些特定图像，使其无法在所见即所得编辑器中显示。

标记很简单：

<div class="col-sm-6 illustration">
   <img src="/sites/default/assets/image/blog/LandingPage/getting_started.svg">
</div>

我注意到确实出现的其他图像也包含在带有这些类的跨度标记中并且图像仍然出现，所以什么问题可能导致这些图像不显示或者是否可以告诉 CKEditor 不要将 cke_widgit_inline 类添加到元素使用 config.js？

4

1 回答 1

1

这最终成为一个 CSS 问题，当 CKEditor 将类应用于包含显示的跨度时，此特定标记中的图像需要定义宽度和高度： inline-block; 规则。

当存在此 cke_widget_inline 类时，我通过应用高度和宽度解决了此问题，允许它在 CKEditor 和使用我们网站前端的 CKEditor 的快速编辑模式中显示。

于 2019-01-15T20:40:04.540 回答