Question

我使用了一个ckeditor，我想插入一个不可编辑的占位符。根据{{3}}，您可以将属性（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>');

Answer 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>' ));
  });
});

Answer 2

另一种选择是将可选模式参数设置为＆＃34; unfiltered_html＆＃34;：

$(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

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

修改

2 个答案: