ckeditor - 修改选择 Ckeditor

Question

目前我遇到以下问题，我正在使用 CKEDITOR 4.x 中的 applyStyle 方法应用 span 标签。但是当一个跨度被部分选中并且我执行 applyStyle 方法时，一个新的跨度将被选择，但是所选跨度的另一半没有恢复并且失去了他的跨度。

第一个问题:是否可以防止对某个元素进行部分选择？

如果不是我的第二个问题:是否可以仅在一侧扩展选择，即部分选择跨度(具有特定类或属性)的一侧。以便充分选择加工。

一个例子:

This is 'my text <span class"testClass">, This' is </span> Other Text

现在我们想要一个解决方案来创建:

This is  <span class"testClass2"> my text, This</span> <span class"testClass">  is </span> Other Text

请注意以下事项:

其中最难的部分是维护 html 结构。 when half of the selection is in an other block level element, it may not brake!这就是我开始使用 applyStyle 方法的原因。

Answer 1

First Question: Is it possible to prevent partial selection of a certain element?

嗯...您可以检查占位符插件的示例 - 它使用不可编辑的内联元素来创建至少在 Chrome 上不能部分选择的占位符。不过，我认为这不是您满意的解决方案:)

另一种可能的解决方案是使用 editor#selectionChange 事件，您可以在该事件上检查选择端之一是否位于该元素内，如果是，则将其设置在该元素之前或之后。看起来像(我还没有测试过这段代码，它只是一个原型(prototype)):

editor.on( 'selectionChange', function( evt ) {
    var sel = evt.data.selection,
        range = sel.getRanges()[ 0 ];

    if ( protectedElement.contains( range.startContainer ) || protectedElement.equals( range.startContainer ) )
        range.setStartAt( protectedElement, CKEDITOR.POSITION_BEFORE_START );
    if ( protectedElement.contains( range.endContainer ) || protectedElement.equals( range.endContainer ) )
        range.setEndAt( protectedElement, CKEDITOR.POSITION_AFTER_END );

    sel.selectRanges( [ range ] );
} );

尽管如此，这种解决方案总是很危险，并且会导致许多不可预知的情况。但可能值得检查一下。

回到问题的根源 - 我知道你想创建在同一级别上工作的样式 - 即只能在一个地方应用一个样式。使用样式系统是不可能的。在应用样式之前，您必须准备范围。该代码类似于 selectionChange 监听器 - 您检查末端是否锚定在样式元素中，如果是，您需要将范围的末端移出它。唯一的问题是在这种情况下如何从范围中排除整个元素:

<p>foo[bar<span class="st1">bom</span>bim]foo</p>

结果应该是两个范围:

<p>foo[bar]<span class="st1">bom</span>[bim]foo</p>

不幸的是，当前范围的 API 不包括有用的方法，例如 range#exclude，因此您需要实现自己的方法。我会尝试用 walker 来做这件事.从范围的开始到结束迭代并记住所有样式元素。如果你在两个方向上都这样做，你也会在两端收集部分选定的元素，所以我描述的第一步将是不必要的。当您有要从范围中排除的元素列表时，您只需要在两端和这些元素之间创建范围 - 这部分应该很容易。 Element#getPosition会有帮助，但您需要检查其代码以了解如何使用它，因为它没有记录。