6

明確な構造を持つテキストを確実に記述しようとするLyXやそのようなエディターがあります。方法がわからないことを除いて、html5contentEditableフィールドから同じ動作をしたい。

私の要件：

  • DIVタグは作成されません。
  • テキストはテキストコンテナの外では許可されていません。（段落、見出し、プレブロック、インライン要素）

また、コンテンツをトラバースして、制限された形式でサーバーにプッシュする方法を理解する必要があります。

（contenteditableフィールドに対して実行できることに関する優れたドキュメントも気に入っています）

4

1 に答える 1

5

要素が編集可能であることの意味に関するDOM仕様は次のとおりです。http ：//www.w3.org/TR/html5/editing.html#editable

既存のすべての段落タグと見出しタグをコンテンツ編集可能にするだけで、あなたが何を求めているかを理解していれば、あなたが望むものが得られるようです。ユーザーが新しい段落や見出しを挿入できるようにする場合、編集中にEnterキーを押すと、Chromeでタグとして改行が挿入され<br>ますが、ユーザーがHTMLタグを入力すると、それらはエスケープされ、テキストとして表示されます。他のフォーマットされたコンテンツの挿入に関しては、それは完全にユーザーエージェント次第です。Chromeでの私のテストでは、ユーザーが太字/斜体などを挿入できないようです。文章。

編集：どうやらChrome（そしておそらく拡張機能、Safariでも）で、Control-I、Control-B、Control-Uを押すと、リッチテキストエディタに期待するのと同じ動作が発生します！

また、Firefoxでテストしたところ、Chromeとは異なり、仕様にまったく反していないことがわかりました。実際には、属性が追加された'sの<p>代わりに新しいタグが挿入されます。これを削除する必要はありません。Firefoxが仕様に準拠している場合、タグの外側にそのようにテキストを挿入することでDOMを壊すことはありません。ただし、ChromeとFirefoxを使用しているユーザーは異なるHTML構造を生成することに注意してください。これは、Javascriptまたはサーバー側のサニタイズでスムーズにすることができます...このマシンでは、処理方法を理解するためのIEも利用できません。残念ながら、改行、およびMicrosoftのドキュメントには指定されていません。<br>_moz_dirty=""

サーバーにプッシュする場合は、AJAXを使用して、問題の要素のテキストコンテンツをプルし（またはコンテンツ全体<div>を編集可能にし）、テキストコンテンツの配列を作成して、サーバーにPOSTすることでこれを行うことができます。これはjQueryを使用して行うのは非常に簡単です（これについては、リクエストに応じてさらにヘルプを提供できます）。

于 2010-07-21T15:57:59.903 に答える