使用（或不使用）rangy 即时替换 contenteditable 字符答案

【问题标题】：Replacing contenteditable characters on the fly with (or without) rangy使用（或不使用）rangy 即时替换 contenteditable 字符
【发布时间】：2012-02-20 15:35:47
【问题描述】：

我正在开发一个小型实验性编辑器，我想在其中可视化输入字符之间的时间。因此，我使用 javascript 和 contenteditable div 用 SPAN 和时间戳属性包装每个字符。我在rangy的帮助下构建了一个小函数：

function insertAtCursor(char, timestamp) { 
    var sel = rangy.getSelection();
    var range = sel.rangeCount ? sel.getRangeAt(0) : null;
    if (range) {
        var el = document.createElement("span");
        $(el).attr('time', timestamp); 
        el.appendChild(document.createTextNode(char)); 
        range.insertNode(el); 
        range.setStartAfter(el);
        rangy.getSelection().setSingleRange(range); 
    } 
}

现在我在这个概念上遇到了两个问题，希望能得到一些帮助：

一个。使用上述函数，输出以嵌套跨度结束，如下所示：

<span time="12345">a
  <span time="12345">b
    <span time="12345">c</span>
  </span>
</span>

b.即使我可以运行上述功能，复制和粘贴或拖放操作也可能以一些嵌套跨度结束......我想知道是否有办法避免这种情况？

谢谢，安德烈亚斯

【问题讨论】：

标签： javascript jquery rangy

【解决方案1】：

我不认为这是一个整体上的好主意，尤其是在文本可能变大的情况下。一些改进：

time 应该是 data-time 以验证为 HTML5
您需要处理选择某些内容的情况（添加range.deleteContents() 即可）。

但是，如果您要这样做，我建议检查光标是否位于现有 <span> 内的文本节点的末尾，并将新的 <span> 添加到文本节点的父节点之后。像这样的：

现场演示：http://jsfiddle.net/kWL82/1/

代码：

function insertAtCursor(char, timestamp) { 
    var sel = rangy.getSelection();
    var range = sel.rangeCount ? sel.getRangeAt(0) : null;
    var parent;
    if (range) {
        var el = document.createElement("span");
        $(el).attr('data-time', timestamp); 
        el.appendChild(document.createTextNode(char));

        // Check if the cursor is at the end of the text in an existing span
        if (range.endContainer.nodeType == 3
                && (parent = range.endContainer.parentNode)
                && (parent.tagName == "SPAN")) {
            range.setStartAfter(parent);
        }

        range.insertNode(el); 
        range.setStartAfter(el);
        rangy.getSelection().setSingleRange(range); 
    } 
}

【讨论】：