Question

我有一个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恢复到原始状态，并删除了带有样式字母间距和行高的跨度。

有人经历过这样的事吗？

Answer 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 - 将禁用过滤器（数据不会被过滤，全部功能将被激活）

希望没有副作用。

初始化内联编辑后，CKEditor 4嵌套的span元素将被删除

1 个答案: