CKeditor 应用类在编辑器中隐藏了一些图像答案

【问题标题】：CKeditor applied class is hiding some images from view in editorCKeditor 应用类在编辑器中隐藏了一些图像
【发布时间】：2019-01-11 22:17:03
【问题描述】：

我使用的是 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 对元素进行分类？

【问题讨论】：

是否可以使用api来阻止ckeditor将cke_widget_inline类添加到放置在每个图像周围的span标签中？
这些不显示的图像是 SVG 文件。如果我向 img 标签添加高度和宽度属性，它们会显示在 CKEditor 中，但不会在实际页面上正确调整大小。

标签： javascript ckeditor mura

【解决方案1】：

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

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

【讨论】：