太字、異なる色など、テキストエリア内にさまざまなスタイルを追加しようとしています
通常、Web ページで使用される WYSIWYG エディタ (tinyMCE など) はこれを行いますが、どのように行うのかわかりません。
これを行うことはできません:
代替テキスト http://www.yart.com.au/test/html.gif
では、彼らはどのようにそれを達成するのでしょうか?
太字、異なる色など、テキストエリア内にさまざまなスタイルを追加しようとしています
通常、Web ページで使用される WYSIWYG エディタ (tinyMCE など) はこれを行いますが、どのように行うのかわかりません。
これを行うことはできません:
代替テキスト http://www.yart.com.au/test/html.gif
では、彼らはどのようにそれを達成するのでしょうか?
オーウェンは正しい考えを持っています。これらのライブラリは、テキストエリアを iframe に置き換えてから、iframe のドキュメントをdesignMode
orcontentEditable
モードにします。これにより、文字通り iframe 内の html ドキュメントを編集できるようになり、ブラウザはカーソルとすべてのキーストロークを処理し、スタイル変更 (太字、斜体など) を行うために呼び出すことができる API を提供します。次に、ユーザーがフォームを送信すると、innerHTML が iframe から元のテキストエリアにコピーされます。このモードを有効にする方法と、このモードでできることの詳細については、https ://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla を参照してください。
ただし、サイトでこの機能が必要な場合は、既存のリッチ テキスト コントロール ライブラリのいずれかを使用することをお勧めします。以前にビルドしたことがありますが、うまく機能するものを得るためには、ブラウザの不一致に対処するために膨大な時間を費やすことになります。編集機能を有効にする方法の違いに加えて、作成される html を正規化する必要もあります。たとえば、IE は<br>
ユーザーが Enter キーを押すと要素を作成し、FF は<p>
タグを作成します。スタイルを変更する場合、IE は<b>
、<i>
などを使用しますが、FF はスタイル属性を持つスパンを使用します。
通常、div のような独自の表示コンポーネントでテキストエリアをオーバーレイします。ユーザーが入力すると、javascript は入力されたコンテンツを受け取り、表示領域にスタイルを適用します。textarea の値は、指定されたスタイルでレンダリングするために必要な html タグを含むテキストです。そのため、ユーザーはスタイル付きのテキストを視覚的に見ることができます。
もちろんこれは簡単な説明です。
tinymce は特に、表示目的でテーブル/iframe を使用していると思います (既存のテキストエリアの代わりに使用されます)。保存する準備ができたら、処理のためにすべての情報をテキストエリアにコピーします。