3

目前我遇到以下问题，我正在使用 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 结构。当一半的选择在另一个块级元素中时，它可能不会刹车！这就是我开始使用 applyStyle 方法的原因。

4

2 回答 2

3

第一个问题：是否可以防止部分选择某个元素？

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

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

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会很有帮助，但您需要检查它的代码以了解如何使用它，因为它没有记录在案。

于 2013-04-10T07:30:16.377 回答
1

我一直在寻找和尝试几个小时。并选择自己做一个放大功能来扩大选择范围。我制作了自己的放大/扩展功能，因为我想拥有 CKEDITOR 的放大无法提供的更多控制。

编码：

            //Vars
        var firstNode = range.startContainer.getParent();
        var lastNode = range.endContainer.getParent();

        //Make end Get full if is tcElement
        if(lastNode.type === CKEDITOR.NODE_ELEMENT && lastNode.getName() === "myElement")
        {
            range.setEndAfter(lastNode);

        }

        //Make end Get full if is tcElement
        if(firstNode.type === CKEDITOR.NODE_ELEMENT && firstNode.getName() === "myElement")
        {
            range.setStartBefore(firstNode);
        }

        range.select();

其他不错的代码，这不是很难，但对其他人有用。

这段代码我用来将代码分成 2 或 3 部分。其中第 1 部分和第 3 部分是部分选择（如果存在）。

            Spliting to multiple ranges
        //Vars
        var newRanges = [];
        var allWithinRangeParent = range.getCommonAncestor().getChildren();
        var firstNode = range.startContainer;
        var lastNode = range.endContainer;
        var firstNodeStart = range.startOffset;
        var lastNodeEnd = range.endOffset;

        //TODO make if to check if this needs to be made.
        //make end partial
        var newEndRange = new CKEDITOR.dom.range( editor.document );
        newEndRange.selectNodeContents( lastNode );
        newEndRange.endOffset = lastNodeEnd;
        newRanges.push(newEndRange);

        //TODO make if to check if this needs to be made.
        //Make start partial
        var newStartRange = new CKEDITOR.dom.range( editor.document );
        newStartRange.selectNodeContents( firstNode );
        newStartRange.startOffset = firstNodeStart;
        newRanges.push(newStartRange);

        //Make center selection.
        var tempRange = new CKEDITOR.dom.range( editor.document );
        tempRange.setStartBefore(firstNode.getParent().getNext());
        tempRange.setEndAfter(lastNode.getParent().getPrevious());
        newRanges.push(tempRange);

        selection.selectRanges(newRanges);
于 2013-04-10T15:38:36.980 回答