Tinymce - 是否有可能获得与所见即所得编辑器对应的textarea的插入位置？

Question

我想知道当虚假光标在WYSIWYG编辑器下处于某个位置时，我们是否可以获得textarea的实际插入位置？

为了更好地理解这个问题，请参阅下面的图片

在WYSIWYG模式下，当光标在 s 之后时，我们得到位置 53 。当光标在 t 之后，我们得到位置 79 。

代码就像......

function getRealCaretPosition() {
    // all the dirty work goes here
}

// Ctrl + Q
if(e.ctrlKey && e.which == 81) {
    var pos = getRealCaretPosition();
    alert(pos);
}

理论上是否可以实现这一目标？

Answer 1

window.getSelection()将为您提供当前选择点，然后从此处树形结构向后直到节点开始，添加所有遇到的文本节点的长度。

function walkback(node, stopAt) {
    if (node.childNodes && node.childNodes.length) { // go to last child
        while (node && node.childNodes.length > 0) {
            node = node.childNodes[node.childNodes.length - 1];
        }
    } else if (node.previousSibling) { // else go to previous node
        node = node.previousSibling;
    } else if (node.parentNode) { // else go to previous branch
        while (node && !node.previousSibling && node.parentNode) {
            node = node.parentNode;
        }
        if (node === stopAt) return;
        node = node.previousSibling;
    } else { // nowhere to go
        return;
    }
    if (node) {
        if (node.nodeType === 3) return node;
        if (node === stopAt) return;
        return walkback(node, stopAt);
    }
    return;
}

function getRealCaretPosition() {
    var sel = window.getSelection(), // current selection
        pos = sel.anchorOffset, // get caret start position
        node = sel.anchorNode; // get the current #text node
    while (node = walkback(node, myContentEditableElement)) {
        pos = pos + node.data.length; // add the lengths of the previous text nodes
    }
    return pos;
}

当然，您还需要检查当前选择是否在您感兴趣的 HTMLElement 中。

Answer 2

是的，tinyMCE上有一个主题说明了这一点：

var inst = getInstanceById('editor/elementid');
var myBookmark = inst.getBookmark();

// do something, move the cursor position
inst.moveToBookmark(myBookmark);

Source：如果这些不起作用，请从此处查看其他解决方案。