TinyMCE を使用して、ユーザーがテキストを編集および書式設定できるようにしています。出力は html コードです。次に、html はサーバーに送信され、Web ページの編集の進行状況を追跡できる他のクライアントにプッシュされます。html は div に挿入されるため、ユーザーは形式を表示できますが、編集することはできません。
ここで、カーソル位置とユーザーがエディターで行った選択を、選択した場合はハイライト (背景色) を使用して読み取り専用ページに表示するか、カーソル位置を模倣するために文字間に黒い境界線を持つ空のスパンを挿入します。
ユーザーが見ているものの開始位置と終了位置を提供する editor.tinymce().selection.getRng() を使用して試みました (書式設定文字はカウントされません) 次に、DOM をトラバースし、すべてのテキスト要素の折り返しの文字をカウントしましたハイライトスパンで選択されたもの。これにより、コードが乱雑になりましたが、テキストブロックで非ASCIIまたはエンコードされた文字に到達するまではうまく機能しました。
html の例
<p>abc <b>de</b>fg</p>
ユーザーにはこのように見えます
abc デfg
ユーザーが文字 c から d を選択したとします (選択範囲は c、空白、太字タグの前半、および d です)。tinymce は範囲 start:2 end:5 を返しますが、後ろの実際の文字は start:5 end:16 になります。char 5 から 16 までのテキストをハイライト スパンでラップするだけでは、不適切な html が生成されます。& で始まり ; で終わる単語のチェック ポジションの数を追加すると、めちゃくちゃになります。もっと簡単な方法があるはずです
HTML文字のセットが何個の「可視」文字に変わるかを計算するにはどうすればよいですか?
または、別の方法で問題を攻撃するかもしれません
ありがとう
PS 1 さまざまな jquery ハイライト プラグインを調べましたが、検索文字列に基づいてハイライト表示されているようです。ユーザーが 1 つの文字を選択し、その文字が複数存在する場合、これらは機能しません。すべての出現箇所が強調表示されます。