修改选择Ckeditor

时间:2013-04-04 08:57:50

标签: ckeditor range

目前我遇到以下问题,我正在使用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方法的原因。

2 个答案:

答案 0 :(得分:2)

  

第一个问题:是否可以阻止某个元素的部分选择?

嗯......您可以查看占位符插件的示例 - 它使用不可编辑的内联元素来创建至少在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会有所帮助,但您需要检查其代码以了解如何使用它,因为它没有记录。

答案 1 :(得分:0)

我一直在找几个小时。并选择进行放大。因为我希望有更多的控制,所以我做了放大而不是使用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);