Question

我在向可编辑div添加节点时遇到问题。

我想在一个范围中添加突出显示的文本，之后光标应该在添加的范围之外。

现在光标位于添加的范围内。

我创建了一个小提琴来演示它： http://jsfiddle.net/4N4ZD/633/

以下是一些代码：

function insertNodeAtCaret() {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            var span = document.createElement('span');
            span.innerHTML = 'TEXT';
            span.style.background = 'yellow';
            range.insertNode(span);

            range = range.cloneRange();
            range.selectNodeContents(span);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

Answer 1

找到解决方案。这是一个小提琴：http://jsfiddle.net/4N4ZD/638/

诀窍是添加一个新的文本范围并像这样使用方法'setStartAfter'：

    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        var span = document.createElement('span');
        span.innerHTML = 'TEXT';
        span.style.background = 'yellow';
        range.insertNode(span);

        var textNode = document.createTextNode('\u00A0');
        range.setStartAfter(span);
        range.insertNode(textNode);
        range.setStartAfter(textNode);
        range.collapse(true);

        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }

插入span-node并继续编写

1 个答案: