Fatal编程技术网
  • ckeditor/
  • Ckeditor 在tekst内部编辑器上设置选择

Ckeditor 在tekst内部编辑器上设置选择

ckeditor

Ckeditor 在tekst内部编辑器上设置选择,ckeditor,selection,Ckeditor,Selection,在CKEditor（3.6）中选择文本时遇到问题。由于我们使用纯文本，我不知道如何正确使用范围选择器 CKEditor的HTML代码： <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

在CKEditor（3.6）中选择文本时遇到问题。由于我们使用纯文本，我不知道如何正确使用范围选择器

CKEditor的HTML代码：

<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>
错误： 例外情况：索引或大小为负数或大于允许的数量

虽然完全剥离了它，但它有点起作用：

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]]);
}
在这里，它选择第一行的第5到第10个字符

我使用了以下来源：

我能找到的所有解决方案都适用于html节点

如何设置“«”直到下一个“»”的选择范围

我已经设法解决了这个问题。同时我还将CKeditor升级到了4.0。 这不应该对解决方案产生影响

在JS中有很多代码。 在我的keybinding上，我调用以下JS函数：
getNextElement（）
在这个解决方案中，它还可以在光标后面搜索，这使得它可以单步搜索多个查找结果。 视图也会滚动到下一个搜索结果

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

var textNodes=[]，scrollTo=0，ranges=[]；
函数getNextElement（）{
var编辑器=null；
范围=[]；
//我不知道编辑的ID，但我知道页面上只有一个
for（CKEDITOR.instances中的变量i）{
editor=CKEDITOR.instances[i]；
}
如果（编辑器==null）{
返回；
}
editor.focus（）；
var startRange=editor.getSelection（）.getRanges（）[0]；
var cursorData=“”，cursorOffset=0，hascoursor=false；
if（startRange！=null&&startRange.endContainer.$.nodeType==CKEDITOR.NODE\u TEXT）{
cursorOffset=startRange.startOffset；
cursorData=startRange.endContainer.$.data；
hasCursor=true；
}
var元素；
element=editor.document.getBody（）.getLast（）.getParent（）；
var selection=editor.getSelection（）；
//从根开始递归搜索文本节点。
textNodes=[]；
getTextNodes（元素）；
var foundElement=false；
foundElement=iterateEditor（编辑器、hasCursor、cursorData、cursorOffset）；
if（！foundElement）{
foundElement=iterateEditor（编辑器，false，“，0）；
}
if（foundElement）{
//使用第一个>选择范围。
选择。选择范围（范围）；
jQuery（“.cke_wysiwyg_frame”）.contents（）.scrollTop（scrollTo）；
}
}
函数迭代器编辑器（编辑器、hasCursor、cursorData、cursorOffset）{
var foundElement=false；
var-rowNr=0；
var文本，范围；
var foundNode=false；
如果（！hasCursor）{
foundNode=true；
}
//在找到的文本节点上和内部进行迭代
//短语“>”，创建选择此单词的范围。
对于（var i=textNodes.length；i--；）{
text=textNodes[i]；
if（text.type==CKEDITOR.NODE_元素&&text.getName（）==“br”）{
rowNr++；
}else if（text.type==CKEDITOR.NODE\u text）{
var sameNode=假；
if（text.$.data==cursorData）{
foundNode=true；
sameNode=真；
}
if（foundNode）{
var startIndex=-1；
var-endIndex=1；
if（sameNode）{
//如果文本在搜索短语上有多处点击，请在已选择的节点内进行检查
var indicatesstart=getindicatesof（'\u00AB'，text.getText（））；
var indicatesend=getindicatesof（'\u00BB'，text.getText（））；
对于（var j=indicatesStart.length；j--；）{
如果（指示开始[j]>光标偏移）{
startIndex=指示开始[j]；
endIndex=指标End[j]；
}
}
}否则{
startIndex=text.getText（）.indexOf（'\u00AB'）；
endIndex=text.getText（）.indexOf（'\u00BB'）；
}
如果（开始索引>1&（！sameNode | |开始索引>游标偏移））{
range=editor.createRange（）；
range.setStart（文本，起始索引）；
foundElement=true；
//计算窗口滚动以聚焦所选元素的高度
滚动次数=（行数）*20；
}
if（endIndex>-1&&foundElement）{
range.setEnd（文本，endIndex+1）；
射程。推（射程）；
返回true；
}
}
}
}
}
函数getIndicatesof（searchStr，str）{
var startIndex=0，searchStrLen=searchStr.length；
var指数，指数=[]；
而（（index=str.indexOf（searchStr，startIndex））>-1）{
指数。推送（指数）；
startIndex=索引+搜索列表；
}
回报指数；
}
函数getTextNodes（元素）{
var children=element.getChildren（），child；
for（var i=children.count（）；i--；）{
child=children.getItem（i）；
textNodes.push（子节点）；
}
}

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