具有获取和设置光标位置支持的 Javascript 富文本编辑器答案

【问题标题】：Javascript Rich Text Editor with get AND set cursor position support具有获取和设置光标位置支持的 Javascript 富文本编辑器
【发布时间】：2011-11-15 05:16:02
【问题描述】：

是否有任何支持获取和设置光标位置的 javascript 富文本编辑器？

【问题讨论】：

可能。如果你喜欢的那个没有，实现这个功能应该不难。
50 美元，如果您可以在 dijit.Editor 上实现它，或者将我指向一个支持两者的 JS RTE……真的……
有人得到过 50 美元的报酬吗？我是否赞成或反对这个问题会有所不同。
@Zubair：没有人得到任何报酬。

标签： javascript cursor-position rte

【解决方案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);

【讨论】：

明天一上班就去测试，多谢了。如果这确实有效，我会接受答复并通过您的电子邮件与您联系，以便在午餐时间前快速向您支付 50 美元。
确实如此，尤其是因为这实际上是我的工作：stackoverflow.com/a/6242538/96100
蒂姆，我从当时正在使用的玩具文本编辑器中提取了这段代码，但这无关紧要，我真的很抱歉没有把你的功劳归功于你。我最终从未真正收到过任何东西，但我接受了付款这一事实可能会让你感到不安。真的没有什么可以证明我的所作所为是正当的，对此我深表歉意。
我不介意我的代码被重新发布，即使没有信用，但是是的，接受钱确实让我很困扰。我相信你这是一个诚实的错误，并接受你的道歉。

【解决方案2】：

是的，redactor.js 正在这样做：

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

【讨论】：

【解决方案3】：

我正在寻找 dijit.Editor 的解决方案，但遇到了这个老问题。这是我这样做的方式（这是对 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”属性中。

【讨论】：