問題タブ [contenteditable]

奇妙なことに、これは Firefox と Opera でのみ壊れています (IE、Chrome、Safari は正常に動作します)。

迅速な修正のための提案はありますか?

インターネット上には多数の WYSIWYG エディタがありますが、ドラッグ アンド ドロップの実装を何らかの形で実装するものはまだ見つかりません。

独自のエディターを作成するのは簡単ですが、ユーザーが編集可能領域の外から要素 (つまりトークン) をドラッグして、編集可能領域内の任意の場所にドロップできるようにしたいと考えています。

編集可能な要素の特定の場所に html を挿入するのは簡単ですが、ユーザーが編集可能な領域の要素に DIV をドラッグしているときに、キャレットがどこにあるべきかをどのように判断するのでしょうか。私が説明しようとしていることをよりよく説明するために、次のシナリオを参照してください。

編集可能領域 (編集モードの IFRAME または contentEditable 属性が true に設定された DIV) には、既に次のテキストが含まれています。

「親愛なる、ご了承ください....」

ユーザーは、要素のリストから何らかのトークンを表す要素を編集可能領域にドラッグし、上記のようにテキスト内のコンマ (,) の直前にキャレットが表示されるまでカーソルをテキスト上に移動します。ユーザーがその場所でマウス ボタンを離すと、HTML が挿入され、次のような結果になる可能性があります。

「{UserFirstName} 様、ご注意ください ...」.

誰かがこれに似たようなことをしたことがあるかどうか、または少なくとも JavaScript を使用してこれを行う方法を知っているかどうかはわかりません。

どんな助けでも大歓迎です。

わかりました、何人かの人は私が何を意味するかを知って私の質問を編集しますが、彼らはそれを間違っていました.

より良い説明：

divtextの contenteditableがありますThis is a Test String.。あなたが今使っている なら、あなたが今使っているならexecCommand('underline')、Test Stringこれは正しいです。This is a <u>Test String</u>execCommand('strikethrough')is a TestThis <s>is a <u>Test</u></s><u>String</u>

そのため、HTML5 では<u>と<s>は廃止されました。最初に、を とともにexecCommand使用できます。を使用すると、 が表示されます。surroundContents()<span style="text-decoration:underline;">surroundContets()execCommandBAD_BOUNDARYPOINTS_ERR

私が欲しいのは、execCommandこの場合のように機能する関数ですが、魔女の HTML タグで定義できる関数を使用すると、文字列がラップされます... (オーバーラップがある場合はインテリジェントである必要があります...)

contentEditable 属性が true に設定されている要素のドラッグ アンド ドロップ機能を無効にすることは可能ですか。

次の HTML ページがあります。

私が直面している主な問題は、画像を DIV にドラッグ アンド ドロップすることが可能であり、(タイトルとクリック ハンドラーと共に) コピーされることです。

<br>Enter キーの押下に応答してを挿入するために、キーボード イベント ハンドラーに少しのコードを記述しました。

これは、カーソルが2つの文字の間にある場合にのみ機能し、最後に2つの<br>要素が必要な場合にのみ機能します。回線の終端にいるかどうかを検出できますか? または、入力問題の他の実用的なアイデアはありますか?

また、通常のキー イベント (ctrl キーが押されていない状態) をキャッチし、Enter キーが ctrl と共に押される JS でキーボード イベントを作成しようとしました。しかし、これはうまくいきません…</p>

Webkit/Safari でのみ動作する必要があります…</p>

contenteditable と styleWithCss を使用しようとしています。

Webkit では動作しないようです。

do execCommand を使用するたびに、<b>期待したスパンではなく が生成されます。

ここにデモがあります： http://jsbin.com/izomo/2/edit

テキストの一部を選択し、太字のボタンをクリックして、html 出力を確認します。

これはバグですか、それとも何か間違っていますか。

どうもありがとうございました。

MooTools Javascript ライブラリを使用しています。そして、このライブラリはここでいくつかの本当に便利な機能を提供します: http://mootools.net/docs/more/Element/Element.Forms

問題は、この関数が textarea などの「フォーム」要素に対してのみ機能することです。

今、私はオンライン エディターを作成しています。エディター自体は、div 要素とコンテンツ編集機能を使用しています。

mootools (more) ライブラリで getCaretPosition のような関数を使用したい場合、次の行が呼び出されます。

しかし、私はこのエラーを受け取ります:

フォーム要素だけがこの選択オブジェクトを持っているようです (このドキュメントでは:S ?)。

フォーム機能を div (またはすべて) 要素に追加する方法はありますか?

div タグで HTML5 contenteditable を使用して単純な texteditor を作成しようとしています。ご存じのとおり、選択されたテキストは IE ではまったく異なる方法で処理されます。

他のブラウザで「anchorNode」と「focusNode」を使用できるように、選択したテキスト ノード (テキスト自体ではない) を取得する方法を探しています。私が見つけた IE の唯一の代替手段は、「parentElement()」関数です。これは、contenteditable div 自体を選択することしかできません。

何か案は？

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

私の要件：

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

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

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

I'm creating a contentEditable div within a table cell to capture user input. The problem is, when I align the text to the right IE8 does not show a text input caret. Every other browser I've tried works. It works if I don't use "text-align: right". It also works if the caret is anywhere other than the far right of the div. Here's some sample code:

What am I doing wrong? If nothing, how can I get around this?