2

主に Firefox で発生しますが、他のブラウザでも壊れることがあります。以下のjsfiddleを確認すると、特に最後のタグに移動してそれらをすべて削除しようとすると、できません。できる場合もあります。一貫性がありません。

 <div id="testDiv" contentEditable="true">
      Hey <input id="user-tag-1" class="ut ut-full-name" carpos="9" type="button" tabindex="-1" value="Rob"/>
 </div>

これは Mozilla の掲示板やここで議論されているのを見たことがあります。回避策は、通常、非 contenteditable html を contenteditable <span>, <p>,でラップすること<span>です。私が見たもので、実際に問題を解決するものは何もありません。少なくとも完全ではありません。html を削除できたとしても、奇妙な動作がたくさんあります。

contenteditable divでこれが発生する理由を知っている人は誰でも、それがcontenteditableではないhtmlで発生するだけの場合、これらの問題を解決する解決策がありますか、またはタグをチェックして削除するためにバックスペースと削除キーのロジックを作成する必要がありますか? ?

http://jsfiddle.net/mstefanko/qDkYq/

4

1 に答える 1

1

ここで詳細に回答しました：https://stackoverflow.com/a/18069930/352335

要約すると、各ブラウザーが contenteditable div を処理する方法は大きく異なります。google plus の投稿ウィジェットの実装を掘り下げることが、これを修正するために必要なインスピレーションを与えてくれました。

contenteditable 内で編集不可の html 要素をレンダリングする場合:

Chromeの場合は、<button>タグを使用します。そして、編集可能な div でクロムのみの属性 contenteditable="plaintext-only" を使用します。html を追加する場合は、各要素に必ずスペースを追加してください。

firefoxの場合、<input>タグを使用して、<br>要素を editable に追加しますdiv。<br>div の最後にある を使用すると、要素の後にフォーカスすることができ、削除で発生していた問題が修正されました。

于 2013-08-06T00:49:13.397 に答える