1

<p></p>ユーザーが要素内の既存の文字列を確認mouseoverして編集できるようにするアプリを構築していmouseoutます。

現在、Javascript で を に置き換えて<p>い<textarea>ます。<textarea>要素の値に設定しinnerHTMLて、値を入力し<p>ます。テキストが書式設定されたテキストではなく HTML として表示されることを除いて、これは問題なく機能します。

たとえば、ユーザーは次のように入力した可能性があります。 

"An old silent pond...
A frog jumps into the pond,
splash! Silence again."

次に、テキストを編集するときが来ると、次のように表示されます。 

"An old silent pond...<br>A frog jumps into the pond,<br>splash! Silence again."

編集用に表示されているものが生の HTML ではなく、解釈された HTML/フォーマットされたテキストであることを確認する方法はありますか? フォーマットを解釈する必要があります。HTML タグを削除したくありません。

PS:textareaテキストを編集するためのウィンドウを作成する正しい方法だと思いますが、私はそれに慣れていません。

4

3 に答える 3

3

書式設定を表示および保持しながら、テキストを編集できるようにしたいとお考えですか。これは単純に実行できるものではありません。TinyMCEやCKEditor<textarea>などの wysiwyg エディターを検討することをお勧めします。

もう 1 つの可能性は、HTML5 のcontenteditable属性と、HTML5 より前のブラウザーをサポートする JavaScript ポリフィルです。

セクションで行った変更を保存するための基本的な提案については、変更の保存を参照するか、この件に関する多くの記事をcontenteditableWeb で検索してください。save contenteditable changes

また、HTML5 属性「contenteditable」を使用して WYSIWYG を作成すると、単純化されたエディターを構築する手順が示されます (プレーンな醜いボタンが追加されました!)。

于 2013-03-28T00:12:25.317 に答える
1

textContent利用可能な場合は、の代わりに設定しinnerHTMLます。

textarea.textContent = p.innerHTML;

IE8 をサポートする必要がある場合は、 innerTextif textContentis not there を使用してください。

http://jsfiddle.net/yUMtj/

編集: @RobG が示すように、互換性をさらに高めるため.valueに代わりに使用します。.textContent

于 2013-03-28T00:01:32.520 に答える
0

textarea 要素のコンテンツはHTML として解析されません。利用可能な HTML ベースのエディターは数多くあります。Google はあなたの味方です。

textarea 要素のコンテンツはその値です。HTML 仕様では、textarea 要素の innerHTML、textContent、または innerText プロパティが定義されていないため、value プロパティを使用して値にアクセスする必要があります。

于 2013-03-28T00:15:08.677 に答える