Javascript Rich Text Editor with get AND set cursor position support

Question

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

Probably. If the one you like doesn't, it shouldn't be hard to implement that functionality. — Blender, Nov 15 '11 at 05:17
$50 if you can implement it on a dijit.Editor OR point me to a JS RTE that supports both...seriously... — , Nov 15 '11 at 05:28
Did someone ever get paid the $50? Makes a difference as to whether I upvote or downvote this question. — yazz.com, Dec 07 '12 at 09:12

score 1 · Accepted Answer · answered Nov 15 '11 at 05:39

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

Going to test as soon as I get into work tomorrow, many thanks in advance. If this does work, I'll accept the asnwer and get at you through your email to shoot you a quick $50 before lunch time. — , Nov 15 '11 at 05:47
Indeed, especially since this is actually my work: http://stackoverflow.com/a/6242538/96100 — Tim Down, Jul 28 '12 at 14:50
Tim, I pulled this code out of a toy text editor that I was working on at the time, but that's irrelevant and I'm truly sorry for not crediting you. I was never actually sent anything in the end, but the fact that I accepted the payment is what probably upsets you. There really is nothing to say that can justify what I did and I am deeply sorry for this. — Blender, Jul 28 '12 at 16:23
I don't mind my code being reposted, even without credit, but yes, accepting money for it does bother me. I believe you that it was an honest mistake and accept your apology. — Tim Down, Jul 29 '12 at 10:37

score 0 · Answer 2 · answered Jun 20 '13 at 16:08

0

Yes, redactor.js is doing it:

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

answered Jun 20 '13 at 16:08

Alexandru R

8,560
16
64
98

score 0 · Answer 3 · answered Jun 18 '14 at 14:37

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.

Javascript Rich Text Editor with get AND set cursor position support

3 Answers3

Linked