如何冻结由 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，如果我添加一个 space 然后尝试添加第二个跨度内容，则 space 被添加到 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 所见即所得）。所以我对这个问题的所有解决方案持开放态度。 注意：应使用解决方案按预期创建 span 标签。

Answer 1

IMO 最好禁止在现有内容中插入新的 span.dummy，而不是 "freeze" 编辑器中的某些内容。

可以用elements path in which element the selection currently is. If it's inside span.dummy, just insert new one before/after the existing one – example检测。

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

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

How to freeze html created by CKEditor plugin

javascript

jquery

ckeditor

drupal-7