7

私は、WordPress ページ クリエーターや Stack Overflow ポスト クリエーターに似た、オンラインのリッチ テキスト エディターに取り組んでいます。オンライン リッチテキスト エディターには、次の 2 つの異なるタイプがあることが指摘されています。

  1. WYSIWYG エディター、および
  2. HTML エディター

私は2番目のタイプを構築しています。残念ながら、どちら<textarea>もcontenteditableHTML リッチテキスト編集にはあまり便利ではありません。

(スタック オーバーフローで使用されている)の問題は、編集フィールドにテキスト レベルのセマンティクス<textarea>を表示できないことです。単語をハイライトして太字にするだけではなく、ある種のマークアップ (例: *****太字*****) を挿入する必要があります。あまりユーザーフレンドリーではなく、実際に「リッチ」なテキストでもありません。

一方、使用contenteditableするとこれらの問題は解決しますが、制御の問題が生じます。ブラウザーは、編集フィールドの見栄えを良くするために、あらゆる種類の HTML と CSS を挿入します。を押すと、ブラウザによっては、または、または、または...Enterが挿入されます。HTML からコピーしたいくつかの段落を貼り付けると、大量の過剰なマークアップが作成されます。ソース HTML の内容をも超えています。たとえば、次のソース コードは次のとおりです。<p><div><br><div><br></div>

<p>This is one paragraph!</p>
<p>This is another.</p>

Web サイトでは次のように表示されます。

This is one paragraph!

This is another.

...これをコピーしてcontenteditableフォームに貼り付けると、次のようになります。

<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is another.</p>

...インライン スタイルを導入し、場合によっては追加の HTML を導入します。

ブラウザーが要素に挿入する HTML の量を制限および制御する方法を見つけようとしていますが、それは WYSIWYG タイプの編集にのみ適してcontenteditableいると考え始めており、HTML スタイルのリッチテキストでは機能しません。contenteditable編集。

3 番目の選択肢はありますか、または誰かが私のニーズを満たす Javascript エディターを作成しましたか?

4

1 に答える 1

1

別の方法としては、通常の div でクリック イベントを使用して自分ですべてコーディングすることなどです。このアプローチを使用して実行する必要があることはたくさんあります。すべてのイベント ハンドラーの設定や、テキスト内の場所をクリックしたときのキャレットの追加の処理など、役立つスタック オーバーフローに関する質問がたくさんあります [1]。 、Enter、Backspace、Delete、すべての英数字キー、およびその他を含むすべてのキープレスイベント。何かをクリックしたときに視覚要素としてキャレットを作成し、入力時にテキストを入力し、バックスペースを押したときにテキストを削除し、Enter キーを押したときに改行を入力する必要があります。Google Docs と Online Word はおそらくこのアプローチを使用していますが、これは膨大な量の作業であり、それを実装しているオープン ソース ライブラリは知りませんが、すべてを完全に制御できます。

[1]テキスト内でクリックされた単語を検出する

于 2020-05-18T14:59:25.110 に答える