1

私はforeignObjectを作成したSVG要素を持っています。ForeignObjectには、textareaとdivの2つのオブジェクトが含まれています。textareaはdivの上にあり、透明です。ユーザーがテキストエリアに入力すると、テキストがdiv（WYSIWYGの一種のエディター）にコピーされます。これはすべて正常に機能します。ただし、問題は次のとおりです。textarea（100％透明）でテキストを選択すると、選択したテキストが表示されないため、選択内容をdivのテキストにコピーするコードを作成します。

私は次のビットを持っています、このビットはテキストエリアで何が選択されているかを教えてくれます：

var start = e.target.selectionStart;
var end = e.target.selectionEnd;

（eは選択されたイベントリスナーのイベントです）

そして、以下はdiv内のテキストを選択します。

div = $(e.target).next('div');
div = div[0];

selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(div);
selection.addRange(range);

これは機能しますが、div内のすべてのテキストを選択します。テキストエリアで選択された部分のみに選択を制限するにはどうすればよいですか？

（ちなみに、このコードはデモアプリケーション用であり、Firefoxでのみ機能する必要があります）

4

1 に答える 1

1

私も同様の問題を抱えていました。私の解決策は、変換中に2つの空のHTML要素（多分<span class="sel-start"/>と<span class="sel-end"/>）を出力に追加することでしたdiv。

同じトリックを使用して、にテキストカーソルを表示divできるため、ユーザーは現在の場所を簡単に確認できます。さらに、テキストカーソルを使用してスクロールできるため、div画面スペースの浪費が少なくなります。

それらを選択するのは簡単で、テキストをセグメントにカットし、<span class="selected">...</span>要素で簡単にラップしてスタイルを設定できます。

span選択範囲がブロック要素（、、リスト、テーブル）にまたがる可能性があるためp、div単一を使用するのは賢明ではないことに注意してください。

于 2012-05-04T15:44:16.153 に答える