Question

我在使用自定义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标签内。例如：插入第一个span内容后，光标位于span.dummy，如果我添加空格然后尝试添加第二个span内容，则会在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 WYSIWYG）。所以我对这个问题的所有解决方案持开放态度。 注意：应使用解决方案按预期创建span标记。

Answer 1

IMO最好不要在现有的span.dummy内部插入新的span.dummy，而不是“冻结”编辑器中的某些内容。

您可以使用elements path检测当前选择的元素。如果它在[contenteditable=false]内，只需在现有的example之前/之后插入新的一个 - Placeholder plugin。

如果你真的想要冻结内容，那么你可以尝试将boolean optionsDisplayed(){ timeRangeFilterOptions*.displayed.every() }属性添加到这些元素或将它们变成小部件（server sent events可能是一个好的起点）

如何冻结CKEditor插件创建的html

1 个答案: