1

内部でスタイリングを提供するために、いくつかのネストされたスパンを持つ contenteditable 要素があります。elemebt の特定のオフセットにある css クラスを調べる必要があります。たとえば、次のようなものがあります。

<div contenteditable>
     <span class"nothing">    </span>
     <span class="outer">my <span class="other">name</span> is </span><span class="name">Andrew</span>
</div>

画面上のテキストは次のようになります (適切なスタイルを使用)。

my name is Andrew

ここで、contenteditable 領域がさらに大きくなり、多くの入れ子になった span 要素があると想像してください。テキストへのオフセットが与えられた場合、それを含む css クラスを計算できる必要があります。

たとえば、nofであるオフセット 4 で CSS スタイルが必要だとしnameます。結果は次のようになると思います。

outer other

同等の解決策は、オフセットが与えられた場合 (たとえば4)、その場所をラップしている html 要素を計算できることです (この場合、次のようになります:

<span class="other">name</span>

私はjqueryを使用していますが、他のライブラリは使用していません。これを簡単に計算するにはどうすればよいですか？

編集:以前はテキストエリアを使用していましたが、機能しません。contenteditable div 要素を使用する必要があります。

4

2 に答える 2

2

一時的なダミー スパンを挿入し、Jquery でそれを取得してから、parents外側のコンテナーに到達するまでクラス リストを配列にプッシュすることをお勧めします。もちろん、 のみが必要な場合はcurrentStyle、さらに簡単です。

ダミー スパンをテキストエリアに取得する方法については、文字位置しかない場合は、カーソル位置のテキストエリアにテキストを挿入する (Javascript) を参照してください。キャレットに挿入する場合は、「 jQuery を使用してテキストをテキスト領域に挿入する」を参照してください。

于 2013-02-02T00:49:02.650 に答える
0

テキストエリアでそれを行うことはできません。その中にあるものはすべて、マークアップではなくテキストと見なされます。「contenteditable」要素を調べる必要があります。

于 2013-02-02T01:04:43.087 に答える