Javascript 如何冻结由CKEditor插件创建的html

我在使用自定义CKEditor插件创建自定义span标记时遇到问题。该插件接受用户对dataAttribute、dataValue和specificContent的输入。然后在对话框的onOk上，我创建了一个span元素并将其附加到编辑器中

// Create the span element
var span = new CKEDITOR.dom.element('span');
// Add the attributes to the span.
span.data(dataAttribute, dataValue);
span.setHtml(specificContent);
// span.contentEditable = false;
// Finally insert the element into the editor.
editor.insertElement(span);

// I have created a dummy element to place the cursor outside the actual span tag.
var dummySpan = new CKEDITOR.dom.element('span');
dummySpan.addClass('dummy-span');
dummySpan.setText(' ');

// after section dealing with editing a selected item, in "else":
var sel = editor.getSelection(); // current cursor position
editor.insertElement(span); // the real new element
if(CKEDITOR.env.ie || CKEDITOR.env.webkit) {
    dummySpan.insertAfter(span);
    sel.selectElement(dummySpan);
}
else {
    dummySpan.insertAfter(span);
    var rangeObjForSelection = new CKEDITOR.dom.range( editor.document );
    rangeObjForSelection.selectNodeContents(dummySpan);
    editor.getSelection().selectRanges( [ rangeObjForSelection ] );
}

代码运行良好，预期的标记生成并插入到光标位置。例如：

<span data-school='seven-high'>Seven High, Eleven</span>
<span class='dummy'></span>

以上各项的预期标记：

<span data-school='seven-high'>Seven High, Eleven</span>
<span class='dummy'></span>
<span data-school='seven-high'>Seven High, Eleven</span>
<span class='dummy'></span>
<span data-school='seven-high'>Seven High, Eleven</span>
<span class='dummy'></span>

是否有办法确保用户永远无法将光标放在CKEditor创建的span标记内，即冻结CKEditor创建的span标记

注意：我也使用数据处理器：dataFilter和htmlFilter

---

这是我第一次尝试为Drupal WYSIWYG创建CKEditor插件。因此，我对这个问题的所有解决方案持开放态度。注意：应使用该解决方案按预期创建span标记。

IMO最好不允许在现有span.dummy中插入新的span.dummy，而不要冻结编辑器中的某些内容

// Create the span element
var span = new CKEDITOR.dom.element('span');
// Add the attributes to the span.
span.data(dataAttribute, dataValue);
span.setHtml(specificContent);
// span.contentEditable = false;
// Finally insert the element into the editor.
editor.insertElement(span);

// I have created a dummy element to place the cursor outside the actual span tag.
var dummySpan = new CKEDITOR.dom.element('span');
dummySpan.addClass('dummy-span');
dummySpan.setText(' ');

// after section dealing with editing a selected item, in "else":
var sel = editor.getSelection(); // current cursor position
editor.insertElement(span); // the real new element
if(CKEDITOR.env.ie || CKEDITOR.env.webkit) {
    dummySpan.insertAfter(span);
    sel.selectElement(dummySpan);
}
else {
    dummySpan.insertAfter(span);
    var rangeObjForSelection = new CKEDITOR.dom.range( editor.document );
    rangeObjForSelection.selectNodeContents(dummySpan);
    editor.getSelection().selectRanges( [ rangeObjForSelection ] );
}

您可以检测当前选择的元素。如果在span.dummy中，只需在现有的span.dummy之前/之后插入新的span.dummy即可

---

如果您真的想冻结内容，那么您可以尝试向这些元素添加[contenteditable=false]属性，或者将它们转换为小部件，这可能是一个很好的开始

谢谢。你的例子果然奏效了。但我还是选择了创建占位符。原因是用户能够在内容中区分特定的标记和我的插件。