web-dev-qa-db-ja.com

jQueryで編集可能なHTML5コンテンツ

内部のテキストを編集可能にする必要がある要素がいくつかあります。このために、HTML5属性contentEditableを使用しています。複数のセレクターを使用して、これにjQueryを使用することはできないようです。私がやりたいのは、コンテナdiv内のすべてのタグを編集可能にすることです。 jQueryで動作した場合の例を次に示します。

$("#container <all tags here>").contentEditable = "true";

すべてのタグを選択させる方法がわかりませんが、要点はわかります。

したがって、すべてのスパン、div、テーブル、太字などは個別に編集可能である必要があります

jqueryhtmlcontenteditable
17
David
$('#container *').attr('contenteditable','true');

*は「すべての要素タイプ」を意味し、a,div,span,ul,etc...に類似しています。

他のほとんどのjQuery関数と同様に、attrは、セレクターによってキャプチャされたすべての要素に同じ操作を適用します。

38
Rex M
$("#container *").attr("contentEditable", true)

ただの推測。ワークステーションから離れて。

4
mkoistinen

私はあなたが2つの場所で問題を誤解しているという印象を受けます：

  1. jQueryは、DOM要素のセットを操作するための省略形を提供する「クエリ」オブジェクトを作成します。サンプルコードは、一致するものではなく、クエリにcontentEditableを設定します。 「一致するすべての要素に属性を設定する」のjQueryの省略形、つまり$('whatever').attr('contentEditable','true');が必要です。

  2. ContentEditableを正しく理解しているかどうかわかりません。編集可能な各リージョンのトップレベルコンテナに設定する必要があり、その効果はその中のすべてに適用されます。私の経験では、contentEditable on#containerまたは#container div.postのようなものを設定するだけでは十分ではない場合、より大きな問題が発生します。

1
ssokolow

正しく覚えていれば、親にcontentEditable値を設定すると、そのすべての子も編集可能になります。

だからこれを行う：

$('#container').attr("contentEditable", "true");

動作するはずです。

0
Yi Jiang

IE10では、何らかの理由でこれだけが機能しているように見えました。

$('#container').get(0).contentEditable = "true";

なぜattrが機能しなかったのかわかりません。

0
Matthew Lock