Set selection on tekst inside CKEditor

Question

I'm having trouble to select text in CKEditor(3.6). As we use plain text i dont know how to use correctly the range selectors.

HTML code of the CKEditor:

<body spellcheck="false" class="rf-ed-b" contenteditable="true">
<br>
Cross those that apply:<br>
<br>
<br>
[«dummy»] If he/she is tall<br>
<br>
[«dummy»] If he/she is a male<br>
<br>
[«dummy»] If he/shi is a minor<br>
<br>
Specialties:<br>
<br>
[«dummy»] «Write here the specialties if known»<br>
<br>
<br>
«You are now done with filling in this form»<br>
</body>

With the keys 'CRTL+N' I want to go to the next filleble spot:
«[label]»

I tried stuff like:

var editor = CKEDITOR.instances['MyEditor'];
var findString = '«';
var element = editor.document.getBody();
var ranges = editor.getSelection().getRanges();
var startIndex = element.getHtml().indexOf(findString);
if (startIndex != -1) {
    ranges[0].setStart(element.getFirst(), startIndex);
    ranges[0].setEnd(element.getFirst(), startIndex + 5);
    editor.getSelection().selectRanges([ranges[0]]);
}

Error: Exception: Index or size is negative or greater than the allowed amount

While totally stripepd down it kinda works a bit:

var editor = CKEDITOR.instances['MyEditor'];
var ranges = editor.getSelection().getRanges();
var startIndex = 10;
if (startIndex != -1) {
    ranges[0].setStart(element.getFirst(), startIndex);
    ranges[0].setEnd(element.getFirst(), startIndex + 5);
    editor.getSelection().selectRanges([ranges[0]]);
}

here it selects 5th till 10th char on first row.

I used the following sources:

example on Stackoverflow

Another stackoverflow example

CKEditor dom selection API

All solutions i can find work with html nodes.

How can set selection range on the '«' till next '»'

score 0 · Accepted Answer · answered Apr 23 '14 at 13:19

I've managed to solve this solution. Meanwhile i also upgraded CKeditor to 4.0. This shouldnt have an impact on the solution.

It is a lot of code in JS. On my keybinding i call the following JS function: getNextElement() In this solution it also searches behind the cursor, this makes it possible to step through multiple find results. Also the view gets scrolled to the next search result

var textNodes = [], scrollTo=0,ranges = [];

    function getNextElement(){
        var editor =null;           
        ranges = [];
            // I dont know the ID of the editor, but i know there is only one the page
        for(var i in CKEDITOR.instances){
            editor = CKEDITOR.instances[i];
        }
        if(editor ==null){
            return;
        }
        editor.focus();
        var startRange = editor.getSelection().getRanges()[0];
        var cursorData ="",cursorOffset=0,hasCursor = false;
        if(startRange != null && startRange.endContainer.$.nodeType == CKEDITOR.NODE_TEXT){
            cursorOffset = startRange.startOffset;
            cursorData = startRange.endContainer.$.data;
            hasCursor = true;
        }

        var element;
        element = editor.document.getBody().getLast().getParent();
        var selection = editor.getSelection();

        // Recursively search for text nodes starting from root.
        textNodes = [];
        getTextNodes( element );
        var foundElement = false;
        foundElement = iterateEditor(editor,hasCursor,cursorData,cursorOffset);
        if(!foundElement){
            foundElement =iterateEditor(editor,false,"",0);
        }

        if(foundElement){
            // Select the range with the first << >>.
            selection.selectRanges( ranges );
            jQuery(".cke_wysiwyg_frame").contents().scrollTop(scrollTo);
        }
    }

    function iterateEditor(editor,hasCursor,cursorData,cursorOffset){
        var foundElement = false;
        var rowNr = 0;
        var text, range;
        var foundNode = false;
        if(!hasCursor){
            foundNode = true;
        }
        // Iterate over and inside the found text nodes. If some contains
        // phrase "<< >>", create a range that selects this word.
        for (var i = textNodes.length; i--; ) {
            text = textNodes[ i ];
            if ( text.type == CKEDITOR.NODE_ELEMENT && text.getName() == "br" ){
                rowNr++;
            } else if ( text.type == CKEDITOR.NODE_TEXT ) {
                var sameNode = false;
                if(text.$.data == cursorData){
                    foundNode = true;
                    sameNode = true;
                }
                if(foundNode){
                    var startIndex = -1;
                    var endIndex = 1;
                    if(sameNode){
                        // Check inside the already selected node if the text has multiple hits on the searchphrase
                        var indicesStart = getIndicesOf('\u00AB', text.getText());
                        var indicesEnd = getIndicesOf('\u00BB', text.getText());
                        for (var j = indicesStart.length; j--; ) {
                            if(indicesStart[j] > cursorOffset){
                                startIndex = indicesStart[j];
                                endIndex = indicesEnd[j];
                            }
                        }
                    } else{
                        startIndex = text.getText().indexOf( '\u00AB' );
                        endIndex = text.getText().indexOf( '\u00BB' );
                    }

                    if ( startIndex > -1 && (!sameNode || startIndex > cursorOffset)) {
                        range = editor.createRange();
                        range.setStart( text, startIndex );
                        foundElement = true;
                        // calculate the height the window should scroll to focus the selected element
                        scrollTo = (rowNr)*20;
                    }
                    if ( endIndex > -1 && foundElement ) {
                        range.setEnd( text, endIndex+1 ); 
                        ranges.push( range );
                        return true;
                    }
                }
            }
        }
    }

    function getIndicesOf(searchStr, str) {
        var startIndex = 0, searchStrLen = searchStr.length;
        var index, indices = [];
        while ((index = str.indexOf(searchStr, startIndex)) > -1) {
            indices.push(index);
            startIndex = index + searchStrLen;
        }
        return indices;
    }

    function getTextNodes( element ) {
        var children = element.getChildren(), child;
        for ( var i = children.count(); i--; ) {
            child = children.getItem( i );
            textNodes.push( child );
        }
    }

Set selection on tekst inside CKEditor

1 Answers1