Javascriptリッチテキストエディタでカーソル位置の取得と設定が可能

Question

カーソル位置の取得と設定をサポートするJavaScriptリッチテキストエディタはありますか？

Answer 1

私は陰惨な詳細を説明しませんが、これは動作します：

function getTextNodesIn(node) { 
    var textNodes = []; 

    if (node.nodeType == 3) { 
    textNodes.push(node); 
    } else { 
    var children = node.childNodes; 

    for (var i = 0, len = children.length; i < len; ++i) { 
     textNodes.push.apply(textNodes, getTextNodesIn(children[i])); 
    } 
    } 

    return textNodes; 
} 

function setSelectionRange(el, start, end) { 
    if (document.createRange && window.getSelection) { 
    var range = document.createRange(); 
    range.selectNodeContents(el); 

    var textNodes = getTextNodesIn(el); 
    var foundStart = false; 
    var charCount = 0, endCharCount; 

    for (var i = 0, textNode; textNode = textNodes[i++];) { 
     endCharCount = charCount + textNode.length; 

     if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) { 
     range.setStart(textNode, start - charCount); 
     foundStart = true; 
     } 

     if (foundStart && end <= endCharCount) { 
     range.setEnd(textNode, end - charCount); 
     break; 
     } 

     charCount = endCharCount; 
    } 

    var sel = window.getSelection(); 

    sel.removeAllRanges(); 
    sel.addRange(range); 
    } else if (document.selection && document.body.createTextRange) { 
    var textRange = document.body.createTextRange(); 

    textRange.moveToElementText(el); 
    textRange.collapse(true); 
    textRange.moveEnd('character', end); 
    textRange.moveStart('character', start); 
    textRange.select(); 
    } 
} 

今、あなたは自分の要素を取得し、ものを選択します。

setSelectionRange(document.getElementById('dijitEditorBody'), 10, 50); 

Answer 2

はい、redactor.jsはそれをやっている：

を

$('#redactor').redactor('setCaret', element, 4);

Answer 3

私はdijit.Ediの解決策を探していましたトールとこの古い質問の向こう側に来た。これは私がこれをした方法です（dijit/_editor/EnterKeyHandlingプラグインです）。

このように私は、私自身のプラグインを作成：

define([ 
    "dojo/_base/declare", 
    "dijit/_editor/_Plugin", 
    "dijit/_editor/range", 
    "dijit/_editor/selection" 
], function(declare, _Plugin, rangeapi, selectionapi) { 
    var MyPlugin = declare(_Plugin, { 
     setToolbar: function(editorToolbar){ 
      // [...] 
      this.own(this.editor.on('keypressed', lang.hitch(this, 'onKeyPressed'))); 
     }, 

     onKeyPressed: function(){ 
      // summary: 
      //  Handler for after the user has pressed a key, and the display has been updated. 
      var block = undefined, 
       blockNode = undefined, 
       selection = rangeapi.getSelection(this.editor.window), 
       range = selection.getRangeAt(0); 
      if(!range.collapsed){ 
       range.deleteContents(); 
       selection = rangeapi.getSelection(this.editor.window); 
       range = selection.getRangeAt(0); 
      } 

      block = rangeapi.getBlockAncestor(range.endContainer, null, this.editor.editNode); 
      if (block.blockNode) { 
       blockNode = block.blockNode; 
       // this is the node under the cursor... 
       console.debug(blockNode); 
      } 

    }); 

    _Plugin.registry["myplugin"] = _Plugin.registry["myplugin"] = function(args){ 
     return new MyPlugin(); 
    }; 

    return MyPlugin; 
}); 

それからちょうどあなたのdijit /エディタの "extraPlugins" プロパティに "myplugin" を追加します。