問題タブ [contenteditable]

非常に単純な contentEditable div 入力を作成しようとしています。ただし、入力の値を取得するために考えられる方法は、空白が折りたたまれているため、ユーザーが IE で入力したものとまったく同じではありません。つまり、「hello world」は「hello world」になります。しかし、可能であれば、ユーザーが入力したテキストを取得できることが重要です。どうすればこれを行うことができますか？

InternetExplorer では、Enter キーを押すたびに contentEditable DIV によって新しい段落 ( <p></p>) が作成されますが、Firefox では<br/>タグが作成されます。IE に<br/>新しい段落の代わりに a を強制的に挿入させることは可能ですか?

画像を使用せずに HTML でそのような効果を得ることができますか?

テキストは、この効果で編集可能でなければなりません。

コンテンツ編集可能な DIV のオートコンプリートを作成しています (テキスト ボックスに HTML コンテンツをレンダリングする必要があるため、TEXTAREA よりも contenteditable DIV を使用することをお勧めします)。ここで、DIV にキーアップ/キーダウン/クリック イベントがあるときにカーソル位置を見つける必要があります。その位置にhtml/textを挿入できるようにします。何らかの計算でそれを見つける方法がわかりません。または、contententeditable DIV でカーソル位置を見つけるのに役立つネイティブブラウザー機能があります。

Internet Explorer では、Enter キーを押すたびに contentEditable DIV によって新しい段落 ( <p></p>) が作成されますが、Firefox では<br/> タグが作成されます。

hereで説明されているように、JavaScript を使用して Enter キーの押下をインターセプトし、代わりに range.pasteHTML を使用して を作成することができます<br/>。ただし、これを行うと元に戻すメニューが壊れます。Enter キーを押すと、それ以降は元に戻すことができなくなります。

元に戻すを中断せずに、Enter キーで contentEditable 要素に単一の改行を作成させるにはどうすればよいですか?

divに設定して単純なテキストエディタを作成していますcontentEditable=true（とにかくtextareaは同じように動作すると思います）が、タブキーに問題があります。

私が欲しいのは、ユーザーがタブキーを押すと、フォーカスがdivに残り、タブ文字がテキストに追加されることです。

キーダウン時にイベントオブジェクトを呼び出すことで問題の最初の部分を解決しましたがpreventDefault()、divはフォーカスを失いませんが、なぜ文字を挿入できないのかわかりません。

タブ文字のエンティティコードはです	が、この文字列をinnerHTML Firefoxに追加しようとすると、単純なスペース（空白 だけでなく）に置き換えられます。私も試してみまし\tたが、結果は同じです。

だから私の質問は、どうすればテキストにタブ文字を挿入できますか？

属性を使用してDIVを作成し、属性のようなcontenteditable=true子を追加しました。spanacontenteditable=false

ノード全体が単一のバックスペースで削除されるかどうかをテストしたかったのですが、驚いたことにFirefoxは要素を削除できませんでした。

また、これはFirefoxを除くすべての主要なデスクトップブラウザで期待どおりに機能します。
これに関する手がかりはありますか、または可能な回避策は何でしょうか？

ここでbugzillaの正確な問題を見つけました。

getBoundingClientRect() を使用して contenteditable div 内のカーソルの y 座標を取得しようとしています。コードの IE ブランチは機能しますが、他のブランチ (現在のテスト目的では Firefox 3.5) は機能しません。

以下のコードには、コメント内に *** でマークされた問題のある行があります。コードのその時点で、selObj と selRange の両方に値があります (Firebug で確認) が、どちらでも getBoundingClientRect() を呼び出すことができません (たとえば、selObj.getBoundingClientRect は関数ではありません)。getBoundingClientRect() が Firefox の Range オブジェクトでサポートされるようになったことを読みましたが、動作させることができません。間違ったタイプのオブジェクトで呼び出しているに違いないと思います...? 何を呼び出す必要がありますか？

次のコードは、関連する JavaScript を含む html ファイルとしての完全なテスト ケースです。IE で表示すると、カーソルの y 座標の値を取得できますが、Firefox ではポップします。

私の現在のプロジェクトでは、良くも悪くも mshtml を使用して実装され、contentEditable を true に設定するドキュメント エディターを使用しています。このセットアップを別のものに置き換えることは確かに検討していますが、当面はそれがオプションではないと仮定します.

重要な場合は、VS 2008 (.Net 3.5) と C# を使用してこれを行っています。

構造的な編集のほとんどを UI の背後に隠したいのですが、ユーザーが好きなようにテキストを編集できるようにします。いくつかのスタイルのいずれかで div を追加すると、問題が発生します。

(ボディ タグを追加して、プログラムで行っていることをシミュレートするため、IE でテストできますが、C#/.Net/VS で作業していることを思い出してください。)

これには 2 つの問題があります。

1. ユーザーが最初にクリックすると、 div が選択されます。クリックするとすぐにテキストが表示され、ユーザーにサイズ変更ハンドルが表示されないようにしたいと考えています。
2. ユーザーがカーソルを [その他のテキスト] に置いてから、キーボードを使用して div テキストに移動しようとすると、移動が妨げられます。div の外を移動している場合、div は 1 文字として扱われます。

事実上、div を単なる背景の装飾のように動作させる方法はありますが、その周りのすべてを編集可能にする方法はありますか? この html は完全に内部的なものなので、好きなことを何でもできます。したがって、div自体は重要ではありません。重要なのは、次のことです。

• 複数の P またはその他のタグを含む
• 含まれているすべての P またはその他のタグが 1 つのグループの一部であることをユーザーに視覚的に示します。これは、現在の div の境界線や背景色などのスタイル設定が現在達成されているためです。

このSOの質問は、現在のセットアップでは私が望むことができないのではないかと心配していますが、同様の問題に遭遇した他の人を助けるようお願いします. すぐに思いついた不完全な解決策をいくつか追加します。

可能かどうかにかかわらず、ご意見をお寄せいただきありがとうございます。

pre 要素を contenteditable に設定し、編集のためにフォーカスを当てると、見栄えの悪い点線の境界線が表示されます。フォーカスが別の場所にある場合、境界線はありません。
その境界線を削除するにはどうすればよいですか?

ありがとう