0

私は次のようなテキストを持っています

<AnyTag>here is a sample test text and more text</AnyTag>.

ここで、「テスト」を選択し、ページの斜体ボタンをクリックすると、新しい要素<span class="ItalicClass">とそれが作成されsurroundContents()ます。これはうまくいきます。

今、私は次のようなテキストを持っています

<AnyTag>here is a <i>sample test text</i> and more text</AnyTag>.

ここで「テスト」を選択した場合も同じですが、最初に親を閉じてから、新しい要素を挿入します。したがって、要素parentNodeに新しいクラスを挿入できることはわかっています。span同じように、新しい要素の終了後に同じ親を開く必要があります。最終行は

<AnyTag>here is a <i>sample </i><span class="ClassB">test</span><i> text</i> and more text</AnyTag>

「もっと」という言葉を選択すると、

<AnyTag>here is a <i>sample test text</i> and <span class="ClassA">more</span> text</AnyTag>.

この点に関するポインタに感謝します。

ドミニクよろしく

4

1 に答える 1

1

まず、「サンプルテストテキスト」を含むテキストノードを2つのインデックスに分割して、「サンプル」、「テスト」、「テキスト」の3つのテキストノードを並べて表示する必要があります。（サンプルとテキストのスペースに注意してください）。

次に、親ノードの開始から「サンプル」テキストノードの終了までを含む範囲を作成します。内容を抽出します。

var range, frag;
range = rangy.createRange();
range.setStartBefore(parent); //your 'i' tag
range.setEndBefore(textNode); //your text node 'sample '
frag = range.extractContents(); //extract a document fragment - removes items from dom
parent.parentNode.insertBefore(frag, parent); //place the fragment before the parent node

同じ手順を繰り返します。今回は、テキストノード「text」の先頭から親の末尾までの範囲を作成します。

var range, frag;
range = rangy.createRange();
range.setStartAfter(textNode); //your text node ' text'
range.setEndAfter(parent); //your 'i' tag
frag = range.extractContents(); //extract a document fragment - removes items from dom
parent.parentNode.insertBefore(frag, parent.nextSibling); //place the fragment after the parent node

最後に、元の親ノード'i'の内容をアンラップし、新しいタグで再ラップします。

これのいずれかが明確でない場合は、私に知らせてください。私はWYSIWYGエディターを構築しており、このアイデアを徹底的にテストしました。

于 2012-10-15T15:59:28.087 に答える