Question

我正在研究一个小实验编辑器，我希望可视化打字字符之间的时间。因此，我使用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结尾，如下所示：

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

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

谢谢，安德烈亚斯

Answer 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); 
    } 
}

使用（或不使用）rangy替换运行中的可疑字符

1 个答案: