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

今、私はこの概念で2つの問題に直面しています。そこでは、いくつかの助けをいただければ幸いです。

a。上記の関数を使用すると、出力は次のようにネストされたスパンで終了します。

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

b。上記の関数を実行できたとしても、コピー＆ペーストまたはドラッグアンドドロップアクションは、ネストされたスパンで終了する可能性があります...そしてそれを回避する方法があるのでしょうか？

ありがとう、アンドレアス

4

1 に答える 1

2

特にテキストが大きくなる可能性がある場合、これが全体的に良い考えであるとは確信していません。いくつかの改善:

  • timeおそらくdata-timeHTML5として検証する必要があります
  • 一部のコンテンツが選択されている場合を処理する必要があります (追加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 に答える