在CKEditor中設置選擇內容

我在CKEditor（3.6）中選擇文本時遇到問題。當我們使用純文本時，我不知道如何正確使用範圍選擇器。在CKEditor的的在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>

的鑰匙 'CRTL + N' 我想去下一個filleble現貨：
«[標籤]»

我嘗試這樣的東西：

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

錯誤：異常：索引或尺寸大於容許量負或更大

雖然完全stripepd下來還挺作品有點：

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字符。

我使用下列來源：

example on Stackoverflow

Another stackoverflow example

CKEditor dom selection API

所有的解決方案，我可以找到HTML節點的工作。

如何設置選擇範圍上的「«‘到明年’»」

來源

2014-02-14 W vd L

我已經成功地解決了這個解決方案。同時我也將CKeditor升級到4.0。這不應該對解決方案產生影響。

這是JS中的很多代碼。在我的鍵盤綁定中，我調用以下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); 
     } 
    }

來源

2014-04-23 13:19:08

在CKEditor中設置選擇內容

回答

相關問題