用 link 元素包装一些文本时出现令人满意的错误

Question

我想弄清楚 Twitter 如何使用 contenteditable 元素来实现用户组和主题标签。当用户输入 @ 或 # 时，带有这些特殊字符的文本会用 link.

包裹起来

在我的例子中，我可以用 link 包裹文本，但有一个错误我还没有解决。当带有 @ 的文本被 link 包裹时，光标移动到 <div>.

的开头

我不知道我错过了什么，所以我需要你的帮助！如果有人能向我解释为什么会这样，我将不胜感激。

JSFiddle Link

Answer 1

欢迎来到contenteditable的痛苦世界！我发现随着解决方案变得越来越复杂，像这样的问题会 不断出现 - 特别是如果您关心实现一致的跨浏览器行为。

我看到您使用 valueOfQuery 上的值查询要插入 <div> 中的标记。由于您只是调用 .html() 并将其注入到您之前的标记之上，因此此时您的光标不知道将其放置在何处。

您需要探索并熟悉 Range API，在此示例中，我们在调用 .html() 之前保存当前选择，然后使用这两个函数恢复它 - saveSelection 和 restoreSelection

var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        };
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                }
                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(containerEl);
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

        return {
            start: start,
            end: start + selectedTextRange.text.length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", savedSel.end);
        textRange.moveStart("character", savedSel.start);
        textRange.select();
    };
}

然后我们需要在 keyup 中修改当前的实现，如下所示

var selection = saveSelection($('#result')[0]); // save cursor pos

$('#result').html(valueOfQuery);

restoreSelection($('#result')[0], selection); // restore cursor pos

JSFiddle Link - 工作示例

用 link 元素包装一些文本时出现令人满意的错误

Contenteditable bug when wrapping some text with link element

html

javascript

jquery

contenteditable