Javascript Rich Text Editor with get AND set cursor position support

问题

Are there any javascript Rich Text Editors that support getting and setting the cursor position?

回答1:

I won't explain the gruesome details, but this will work:

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

Now you just get your element and select stuff:

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

回答2:

Yes, redactor.js is doing it:

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

回答3:

I was searching for a solution for a dijit.Editor and came accross this old question. Here is the way I did this (it's a ripoff the dijit/_editor/EnterKeyHandling plugin).

I created my own plugin, like this :

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

Then just add "myplugin" to the "extraPlugins" property of your dijit/Editor.

来源：https://stackoverflow.com/questions/8131830/javascript-rich-text-editor-with-get-and-set-cursor-position-support