私は、入力フィールドとしてcontenteditable DIVタグを使用するniceditを使用しています。このページでは、ユーザーがテキストを入力してフォーマットし、その後、このフォーマットされたテキストを画像に変換するphpスクリプトに送信します。 このcontenteditable div内のテキストは、折り返された行区切り文字なしでワードラップされています。
この折り返しがどこで発生したかを知る方法はありますか？発生時に改行を挿入して、別の行としてテキストにアクセスできるようにする方法はありますか？単語区切りで区切られたdivタグに改行を入れることはできますか？
各単語のピクセル座標を計算する必要がありますが、クロスブラウザを実現するには可能ですがそれほど簡単ではありません。 1つの方法は、各単語の前にゼロ幅のダミー要素を挿入し、その位置を使用することです。最近のWebKitとFirefoxのブラウザでは、getClientRects()というDOM Rangeオブジェクトのメソッドが提供されています。これは、侵襲性が低く、より優れたパフォーマンスを発揮するため、望ましい方法です。 IEの独自のTextRangeオブジェクトには、単語とプロパティの間で移動するメソッドboundingLeftとboundingTopがあり、TextRangeのバウンディングボックスを提供します。
別の方法を試して、イメージをレンダリングする方法を変更してください。おそらく、自動的に単語の折り返しを処理するグラフィックライブラリ、またはページ上のHTMLを複製してPhantomJSなどを使用してスナップショットを作成するグラフィックスライブラリを見つけることができます。