問題タブ [contenteditable]

wysihatと contentEditable を使用して、編集可能な優れたテキスト エリアを作成しました。貼り付けイベントをインターセプトして停止するか、挿入を許可する前に DOM を処理する方法が本当に必要です。Web ページ全体を編集可能領域に貼り付けることができるというのは、ちょっとおかしな話です。

これは可能ですか？

未来に来て、私の玄関先に到着してください。HTML5 の達人よ、発火せよ!

HTML コードに次の div があります。

contentEditable自動拡張テキストボックスを作成するための単純なクロスブラウザーメソッドとして div を使用しています。また、ユーザーがこの div に入力する内容の入力検証も行っています。コンマで区切られた電子メールアドレスのリストであると想定されています。ユーザーが間違った情報を送信しようとすると、私の Javascript は入力をチャンクアップし、すべての間違ったチャンクを赤で強調表示します。

配列「invalids」は、すべての不良チャンクのインデックスを保持します。この時点までのすべてが正常に機能します。しかし、ユーザーが赤いテキスト内で入力を開始したら、赤を消す必要がありますが、その範囲内だけです。たとえば、2 つの不良チャンクがあり、それぞれが赤で強調表示されていて、ユーザーが一方を修正し始めた場合、もう一方は赤色のままにする必要があります。

イベントリスナーをスパンにアタッチしてみました：

ただし、ユーザーがテキストを赤で編集しても、イベントは発生しません。ブラウザーの開発者ツールを使用すると、イベント ハンドラーがそこにあることがわかります。contentEditableスパンがイベントを受信しないようにするのは、divの属性ですか? また、スパン自体を作成しようとしましたcontentEditableが、動作は同じです。

私はこの問題を解決するための最良の方法を見つけようとして髪を引っ張ってきました。おそらく誰かがこれを楽しんでいるでしょう。

ほぼすべてで正常に機能するcontentEditable="true"のdivがあります。1つの例外は、ユーザーがCTRL-Aを使用してすべてを選択し、コピー/貼り付けする場合のFirefox内です。選択操作には、div自体のタグが含まれています。私が検索できた限り、このバグはMozillaによって修正されたと思われますが、それは真実ではありません。divは継続的にそれ自体の中に貼り付けられます。

ユーザーがクリップボードをコピーしたら、クリップボードの編集を検討しましたが、Flashを使用しない限り、Firefoxはあまり使い勝手がよくないようです。これはあまり望ましくありません。また、ユーザーが貼り付けを行うときに、もう一方の端で問題のあるタグをキャッチすることも考えましたが、貼り付けイベントは、javascriptイベントハンドラーが終了した後に実際のテキストをdivに配置します。貼り付けられるテキストを編集する方法はありますか？

span タグに contentEditable="true" を設定しても、fire fox ではこのタグは編集できませんが、IE では問題ありません。私に何ができる？

コンテンツ編集可能なアイテムに対して「jquerysortable」を実行すると、そのアイテムは編集できなくなります。

IEではすべてが正常に機能し、FF3.6.8でこの問題が発生することに注意してください。

私が抱えている問題は、IE の contentEditable 属性にあります。（決して変わらないものもあります）。

<li>問題は、サイズ変更ハンドルが表示され、要素がフォーカスされているときに要素の周りに太い境界線が表示されることです。

それらを削除する方法のアイデアはありますか? CSS または Javascript のトリックは大歓迎です。

私は現在、WYSIWYG Web エディターに取り組んでいます。

私が遭遇した問題は少し複雑です。

テキストのセクションを選択してツールの何かをクリックすると、コマンドは機能しますが、すぐにテキストが選択解除されます。

Web ページでテキストを選択するときと同じように、他の何かをクリックすると、テキストは選択されなくなり、すべてが通常に戻ります。

テキストが選択されたままになるように、テキストが既に選択されているときにマウスのクリックを抑制する方法はありますか?

前もって感謝します。

ユーザーがdivに入力できるように、contenteditableのdivタグがあります。ユーザーがボタンを押したときに div にリンクを追加する機能があります。ユーザーが引き続き入力できるように、リンクの後にキャレットを配置したいと思います。リンクは何度でも挿入できます。

コード例:

このコードは、IE、Firefox、Opera、Safari、および Chrome で動作する必要があります。

誰でも助けを提供できますか？

入力フィールドのさまざまな部分に対して、JavaScript で特定の属性を設定できる入力フィールドが必要です。私がやりたいことを示す簡単な例: 入力テキスト領域内のすべての呪いの単語に下線を引きたいとしましょう。そのため、JavaScript は新しい文字が挿入されると入力テキスト領域をチェックし、認識された呪いの単語の配列と一致する単語については、その単語に下線を引きます。ユーザー/クライアントがテキストの属性を設定できるようにしたくないことに注意してください。JavaScriptで特定の単語を他の単語とは異なる形式にできるようにしたいだけです(ツールバーなどはありません)。また、ボックスが他のすべての点で通常のテキスト領域とまったく同じように見えるようにしたいと考えています。

いくつかのリッチ テキスト エディター (juju エディターや lwrte など) やシンタックス ハイライターについては既に認識していますが、それらが私の意図どおりに機能するかどうかはわかりません。

それで、これを可能にするツールを知っている人はいますか？

ありがとう

タイトル用のプレーンテキスト フィールド、サムネイル用の画像、および HTML コンテンツ編集可能ブロックを含む Web パーツが必要なので、これを行う最善の方法は、既存のコンテンツ エディター Web パーツを試して拡張することであると考えました。残念ながら、CEWP は封印されているため、サブクラス化することはできません。反映して、独自のカスタム Web パーツで機能を再作成しようとしましたが (コードについては、質問の最後を参照してください)、CEWP のカスタム バージョンのコンテンツは保持されません。

誰も私ができる方法を知っていますか:

• ContentEditableWebPart を安全にサブクラス化する、または
• カスタム Web パーツにリッチ テキスト ブロック (RTE リボンを含む) を含める、または
• 複数の Web パーツを 1 つの "ラッパー" Web パーツでホストしますか?

前もって感謝します！

コードは以下のとおりです（リフレクターからコピーされたコンパイルを停止していたものはコメントアウト/変更/削除されています）