ContentEditable - Enterキーを押してPタグを生成

Question

現在、私はcontenteditableを使ってエディタを作っています。私は、次のしている：私は新しい使用execCommandを作成し、それの後にエンターキーを押したとき

<div contenteditable="true"> 
<h2>Header</h2> 
<p>Content lorem ipsum</p> 
</div> 

、< DIV>が作成されます。しかし、代わりに< p>を作成します。私はキー入力イベントを使用してfalseを返すことで（jQueryを使用して）入力を完全に停止することができますが、< p>タグを< div>に強制する方法はありますか？ WYMeditorの次期バージョン（注、私はすでに内部< p>タグだが、それは<のdiv内のときに動作しないときには、すでに<のp>正しく置き>）

Answer 1

我々ました

pargraphを強制する（あるいは段落に再フォーマットする）には、jQueryでこれを行うことができます（要素はDOMノードです）。 jQueryオブジェクト）：

function formatElement (element, tagName) { 
    element = $(element); 
    newElement = $('<'+tagName+'/>').append(element.clone().get(0).childNodes); 
    element.replaceWith(newElement); 
} 

これは、現在の選択肢を見て新しく作成した要素を取得し、上記の関数を呼び出すキーアップで行うことができます。

WYMeditorでは、有効な文書構造を維持するために、実際にブロック要素を変更していることを確認します。そうでなければ、DOMツリーを歩いてブロックの親を見つけます。

DanielHのソリューションと同様に、このアプローチの欠点は、独自の元に戻す/やり直しスタックを実装する必要があることですが、私が知っている限り、これを実行する唯一の信頼できるクロスブラウザの方法です。