Chrome 在 ckeditor 中使用 insertHtml 跳过 contenteditable 属性答案

【问题标题】：Chrome skips contenteditable attribute with insertHtml in ckeditorChrome 在 ckeditor 中使用 insertHtml 跳过 contenteditable 属性
【发布时间】：2012-10-28 13:08:50
【问题描述】：

我使用了一个 ckeditor，我想在其中插入一个不可编辑的占位符。根据docs，您可以为所需元素设置一个属性（contenteditable="false"）以使其不可编辑。

在 Firefox 中这工作正常，该属性附加在 span 上，但在 Chrome 中该属性被跳过。

我有一个包含以下代码的测试用例：

HTML

<textarea id="testeditor"><p>testeditor content</p></textarea>
<button id="addPlaceholder">add placeholder</button>

Javascript

$(function() {
  $('#testeditor').ckeditor();
  $('#addPlaceholder').click(function() {
    var editor = $('#testeditor').ckeditorGet();
    editor.insertHtml('<span class="placeholder" contenteditable="false">placeholder</span>');
  });
});

编辑

我进行了另一个测试，以检查在将元素插入 DOM 时是否附加了 contenteditable 属性。这在 Chrome 中运行良好。

Javascript

$('body').append('<span contenteditable="false">placeholder</span>');

【问题讨论】：

@david 我不希望用户能够更改占位符的文本

标签： javascript html google-chrome dom ckeditor

【解决方案1】：

当我搜索insertHtml 方法的替代方法时，我找到了答案。看来您也可以使用insertElement 方法。所以我尝试了一下，并没有跳过contenteditable 属性。

新代码：

$(function() {
  $('#testeditor').ckeditor();
  $('#addPlaceholder').click(function() {
    var editor = $('#testeditor').ckeditorGet();
    editor.insertElement( CKEDITOR.dom.element.createFromHtml( '<span class="placeholder" contenteditable="false">placeholder</span>' ));
  });
});

【讨论】：

在原生 HTML 插入期间（执行 insertHTML commnad 时），很可能会丢失属性。我们在 CKEditor 4 中实现了我们自己的插入算法（现在处于 Beta 版 - nightly-v4.ckeditor.com），这不应该再发生了（而且它不是我现在检查的那样）。

【解决方案2】：

另一种选择是将可选模式参数设置为“unfiltered_html”：

$(function() {
  $('#testeditor').ckeditor();
  $('#addPlaceholder').click(function() {
    var editor = $('#testeditor').ckeditorGet();
    editor.insertHtml('<span class="foo">placeholder</span>', "unfiltered_html");
  });
});

见：http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml

【讨论】：