0

我正在开发一个小型实验性编辑器，我想在其中可视化输入字符之间的时间。因此，我使用 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>

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

谢谢， 安德烈亚斯

4

1 回答 1

2

总的来说，我不相信这是一个好主意，尤其是在文本可能变大的情况下。一些改进：

  • 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); 
    } 
}
于 2012-02-20T16:23:08.603 回答