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

Question

我在使用自定义 CKEditor 插件创建自定义跨度标签时遇到问题。该插件接受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 标签内。例如：插入第一个跨度内容后，光标在span.dummy，如果我添加一个空格，然后尝试添加第二个跨度内容，则在span.dummy内添加空格，并生成第二个错误的标记跨度内容。

<span data-school='seven-high'>Seven High, Eleven</span>
<span class='dummy'>&nbsp;
  <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>

or

<span data-school='seven-high'>Seven High, Eleven</span>
<span class='dummy'>&nbsp;
  <span data-school='seven-high'>Seven High, Eleven</span>
  <span class='dummy'>
    <span data-school='seven-high'>Seven High, Eleven</span>
    <span class='dummy'></span>
  </span>
</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。

这是我第一次尝试创建 CKEditor 插件（用于 Drupal 所见即所得）。所以我对这个问题的所有解决方案持开放态度。 注意：跨度标签应该使用解决方案按预期创建。

Answer 1

IMO 最好禁止在已经存在的span.dummy 中插入新的span.dummy，而不是“冻结”编辑器中的某些内容。

您可以使用elements path 检测当前选择在哪个元素中。如果它在span.dummy 内，只需在现有的example 之前/之后插入新的。

如果你真的想冻结内容，那么你可以尝试将[contenteditable=false] 属性添加到这些元素或将它们变成小部件（Placeholder plugin 可能是一个很好的起点）