Javascript富文本编辑器与获取和设置光标位置的支持

我不会解释这些可怕的细节，但这将工作:

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

现在你只需找到你的元素并选择stuff:

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

是的，reactor .js正在做:

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

我正在寻找dijit的解决方案。编辑偶然发现了这个老问题。我是这样做的(这是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;
});

然后将"myplugin"添加到dijit/Editor的"extraPlugins"属性中