web-dev-qa-db-ja.com

contenteditable divバックスペースとテキストノードの削除の問題

Contenteditable divには多くの問題があり、編集可能なdiv内のhtmlやコンテンツ以外の編集可能なコンテンツを削除しています。

ここで優れたTim Downの回答を使用する： contentEditable属性を持つdiv内のHTML要素を削除する方法

Timのコードを使用すると、テキストノード全体が削除されます。これは、textareaと同じように機能するために必要です。1文字ずつ削除し、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/

javascripthtmlrangeselectioncontenteditable
19
mstef

グーグルがグーグルプラスユーザーのタグ付けでコンテンツ編集可能なdivをどのように使用するかを分析した後、私ははるかに合理的な解決策を見つけました。多分それは他の誰かを助けるでしょう。

Google Plus Post Widget

1つのタグを追加した後、HTMLブラウザーごとに多くの違いを確認できます。

Google Chrome Source

Google Chromeでは、タグごとにスペースが追加されます。ボタンタグが使用されます。そして、chrome-only contenteditable = "plaintext-only"が使用されます。

Google Chroem Source

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

enter image description here

Firefoxでは、BRタグは最初のタグとともにすぐに追加されます。スペースは必要ありません。そして、ボタンタグの代わりに入力タグが使用されます。

BRタグは、これを掘り下げていたときに私が持っていた最も優れたブレークスルーの1つでした。これを追加する前は、フォーカスの問題だけでなく、タグの削除に関して多くの風変わりな動作がありました。

enter image description here

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

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

重要な部分：

HTMLをレンダリングする場合は、次のようにします...

1。Chrome buttonタグを使用する必要があります

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

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

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

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

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

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

fireFoxの場合：

range.setEndBefore($(el).find('br')[0]);
42
mstef