我使用了一个 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>');
最佳答案
当我在谷歌上搜索 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>' ));
});
});
关于javascript - Chrome 在 ckeditor 中使用 insertHtml 跳过 contenteditable 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13287318/