3

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

编辑

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

Javascript

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

2 回答 2

4

当我搜索该方法的替代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>' ));
  });
});
于 2012-11-08T10:55:51.647 回答
1

另一种选择是将可选模式参数设置为“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

于 2014-04-25T20:30:12.203 回答