CKEditor 4 嵌套跨度元素在初始化内联编辑后被删除答案

【问题标题】：CKEditor 4 nested span elements gets removed after initializing inline editingCKEditor 4 嵌套跨度元素在初始化内联编辑后被删除
【发布时间】：2013-12-14 13:30:47
【问题描述】：

我有一个 contenteditable=true 的 div。当我双击它时，我会在 CKEditor 中触发此内联编辑代码，并成功显示 CKEditor 工具栏

 $("#content_id").attr("contenteditable", true);
 ckeditor_instance = CKEDITOR.inline( content_id );

现在我有一个 LineHeight 和 LetterSpacing 插件，它似乎是 CKEditor 工具栏中的一个下拉菜单（由其他人制作的插件，我只复制了实现），当我设置文本的 LineHeight 和 LetterSpacing 并重新初始化时出现问题ckeditor

为了清楚起见，这里是场景：

这是div的默认html

<div id="mycontent" contenteditable=true>
    <span>The quick brown fox jumps over the lazy dog</span>
</div>

1.当我双击 div 时，我触发了我上面提到的 CKEDITOR.inine( content_id ) 代码。当我将 LetterSpace 设置为 6px 时，div 现在是这样的，这是正确的

<div id="mycontent" contenteditable=true>
    <span style="letter-spacing:6px;">
        <span>The quick brown fox jumps over the lazy dog</span>
    </span>
</div>

2.当我将 LineHeight 设置为 2px 时，div 现在是这样的，

 <div id="mycontent" contenteditable=true>
    <span style="line-height:2px;">
        <span style="letter-spacing:6px;">
            <span>The quick brown fox jumps over the lazy dog</span>
        </span>
    </span>
 </div>

这里一切正常，直到下一个场景：

3.我将鼠标悬停在 div 上，我调用此代码将销毁实例。

$("#content_id").attr("contenteditable", false);
CKEDITOR.instances[content_id].destroy();

4.我再次双击 div 并使用 CKEDITOR.inine( content_id ) 上面的代码再次初始化，现在 html 将是这样的

<div id="mycontent" contenteditable=true>
    <span>The quick brown fox jumps over the lazy dog</span>
</div>

div 恢复到原来的状态，并且删除了带有 style-spacing 和 line-height 样式的 span。

有人遇到过这种情况吗？

【问题讨论】：

看这个：docs.ckeditor.com/#!/guide/dev_advanced_content_filter

标签： ckeditor inline html

【解决方案1】：

经过数小时的反复试验，感谢 Reinmar 给了我这个文档：http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter 并把我带到了这里 http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent

现在一切都很好。

来自

$("#content_id").attr("contenteditable", true);
ckeditor_instance = CKEDITOR.inline( content_id );

到

$("#content_id").attr("contenteditable", true);
ckeditor_instance = CKEDITOR.inline( content_id, {
  allowedContent : true
});

它就像一个魅力，我还不确定为什么。我只是将 allowedContent 设置为 true，因为在文档中它说：

true - 将禁用过滤器（数据不会被过滤，所有功能将被激活）

希望不会有副作用。

【讨论】：