Search code examples
ckeditorrange

Modifing Selection Ckeditor


At the moment i have the following problem, i'm applying span tags with the applyStyle Method from CKEDITOR 4.x. But when a span is partial selected and i execute the applyStyle method a new span will be made with the selection, but the other half of the selected span isn't restored and loses his span.

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

IF NOT My Second Question: Is it possible to extend the Selection only on one side, the side where the span(With a certain class or attribute) is partial selected. So that it will be fully selected for processing.

A Example:

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

And now we want a solution to create:

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

Please take notice of the following:

The hard part in this is to maintain the html structure. when half of the selection is in an other block level element, it may not brake! That is the reason that i started using the applyStyle method.


Solution

  • I have been looking and trying for hours. And chose to make an enlarge function myself to expand the selection. I made my own enlarge/expand function as i wanted to have more control which the enlarge of CKEDITOR doesn't provide.

    The code:

                //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();
    

    Other nice piece of code, which isn't very hard but can be useful for other people.

    This code i used to split the code in 2 or 3 parts.. where part 1 and 3 are the partial selection if existed.

                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);