22

contenteditable div と、編集可能な div 内の html および/または非コンテンツ編集可能コンテンツの削除には、非常に多くの問題があります。

ここで優れたティム・ダウンによる回答を使用する: How to delete an HTML element inside a div with attribute contentEditable?

Tim のコードを使用すると、テキスト ノード全体が削除されます。これは、テキストエリアと同じように機能し、文字ごとに削除し、html 要素もバックスペースできることを確認する必要があります。

私は次のことを試しました

else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}

しかし、これは明らかに正しく機能しません。コンテンツの最後にいる場合、物事は期待どおりに機能します。しかし、カーソルを他の場所に置いても、最後から削除されます。

私はこの時点で迷っています。どんな助けも大歓迎です

http://jsfiddle.net/mstefanko/DvhGd/1/

4

1 に答える 1

50

Google が Google+ ユーザーのタグ付けで contenteditable div をどのように使用しているかを分析した後、私ははるかに合理的な解決策にたどり着きました。多分それは他の誰かを助けるでしょう。

Google Plus 投稿ウィジェット

1 つのタグを追加した後、既に html ブラウザーからブラウザーへの多くの違いを確認できます。

Google Chrome ソース

Google Chrome では、各タグにスペースが追加されます。ボタンタグを使用しています。そして、クロムのみの contenteditable="plaintext-only" が使用されます。

Google Chrome ソース

クロムでスペースをバックスペースすると、BR タグが追加されます。

ここに画像の説明を入力

Firefox では、BR タグは最初のタグとともにすぐに追加されます。スペースは必要ありません。また、button タグの代わりに input タグが使用されます。

BR タグは、これを掘り下げているときに私が経験した最大の突破口でした。これを追加する前は、タグの削除やフォーカスの問題に関する多くの奇妙な動作がありました。

ここに画像の説明を入力

IE では、さらに興味深い変更が加えられました。ここでは、タグに contenteditable false のスパンが使用されています。スペースや BR タグはありませんが、空のテキスト ノードです。

以上のことから、Google を正確にコピーする必要はありません。

重要な部分:

HTML をレンダリングしている場合は、次の手順を実行します...

1. Chrome はボタンタグを使用する必要があります

2. Firefox/IE は input タグを使用する必要があります

範囲/選択では、通常、タグなどを単一の文字として扱いたいと考えています。これを範囲/選択ロジックに組み込むことができますが、入力/ボタン タグの動作ははるかに一貫性があり、コードがはるかに少なくなります。

IE は、スパンを使用して IE7-8 でより適切に動作します。ただUIの観点から。しかし、古いバージョンの IE でサイトがきれいかどうか気にしない場合、入力は IE でも Firefox でも正しく動作します。

3. Chrome のみ。編集可能な div で contenteditable="plaintext-only" 属性を使用します。

そうしないと、ユーザーがリッチテキストを貼り付けようとしたときだけでなく、html 要素を削除するときにも、スタイルが div に転送されることがあります。これに関する多くの奇妙な問題に気付きました。

4. キャレット位置を div の最後に設定する必要がある場合は、BR の前に範囲の最後を設定します。

ファイアフォックスの場合:

range.setEndBefore($(el).find('br')[0]);
于 2013-08-06T00:24:32.383 に答える