0

選択範囲の両側に HTML/任意のタグを追加する - Javascript

問題：

PHP/html ファイルにテキストエリア ボックスを作成した後、もう少し機能を追加したいと思い、書式設定を使用できるテキストエリアを作成することにしました。

<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>

タグが何であるかは関係ありません ($_POSTデータを受信すると、PHP スクリプトがスタイル ID としてタグを使用して正しいタグを自動的に適用するため、気になるすべてのバブルになる可能性があります。関係ありません) 。

質問

  • JavaScript を使用してこの機能を作成するにはどうすればよいですか?
  • 役立つリンクはありますか？
  • また、情報があれば説明していただけますか？

編集: 他の近い例ですが、完全ではありませんが、stackoverflow のエディターであり、サードパーティのスクリプトを使用したくないことに注意してください。これは私にとって学習プロセスです。テキストに挿入されたタグはデータベースに保存され、ページがリクエストされると、PHP はタグをスタイル ID に置き換えます。サードパーティのスクリプトを使用しない回避策がある場合は、提案してください

そして、グーグル検索に対する反研究の懐疑論者にとって、意味のあるものはほとんど見つからず 、SOFに関する以前の研究がありました:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html -editor
-選択範囲にタグを追加する

前もって感謝します

4

3 に答える 3

0

<textarea>要素に特別なマークアップを含めることはできず、値のみを含めることができます。テキストエリアにスタイルを適用することはできません。

あなたがする必要があるのは、カーソルを描くことを含めて、テキストボックスが通常行うであろうすべてを偽造することです。ハッカタックが言ったように、これは大変な作業です。

jQueryを入手して、いじり始めれば、多くのことができます。簡単にするためにIDを付けてタグを投げ、<div>ハッキングを開始します。

個人的に作ったことはありませんが、たくさんあります。HTML5のcontentEditableは、おそらくそこへの道のかなりの部分を得ることができます：http: //html5demos.com/contenteditable/

このデータをサーバーに戻したい場合は、コンテナーのinnerHTMLを取得し、フォームの送信時に非表示の入力にスラップする必要があります。

あなたがただいじり回っているならあなたがチェックすることができる他のいくつかの事柄はここにあります：

編集：私は完全に誤解したと思います

リッチテキストエディタを探しておらず、コード用のヘルパーボタンが必要な場合は、selectionStartとselectionEndが最適です。ブラウザのサポートが何であるかはわかりませんが、Chromeで機能しています：http： //jsfiddle.net/5yXsd/

于 2012-07-21T02:41:08.717 に答える
0

iframeを使用してWYSIWYG効果を実装することをお勧めします。iframeと呼ばれるプロパティがありますdesignMode

詳細については、こちらを
ご覧くださいhttps://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

また、軽量の例もあります
。http ：//code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js

于 2012-07-21T02:32:26.600 に答える
0

texarea 内の基本的な書式設定以外は何もできません。複雑なフォーマットが必要な場合は、div の contentEditable 属性を true に設定することを検討してください。または、wysisyg エディターを作成することもできますが、それは大きなプロジェクトです。これにはサードパーティのコードを使用することを強くお勧めします。

于 2012-07-21T02:09:20.773 に答える