Contenteditable要素内に新しいタグが作成されないようにするにはどうすればよいですか？

Question

<p contenteditable="true"></p> 
<p contenteditable="true"></p> 
<h1 contenteditable="true"></h1> 

上記のコードは、親を満足できるものにするのではなく、個別の内容編集可能な要素で構成されています。

問題は、ユーザーがcontenteditable要素のいずれかで[Enter]ボタンを押すと、そのタグ自体に新しいタグが作成されることです。

例

出力は次のようになります

<p contenteditable="true"> 
    <p>One</p> 
    <p>Two</p> 
</p> 

所望の出力は次のようになります。私はまた、すべての要素が終わるであろうことを確実にするためにjQueryを使用してい

<p contenteditable="true"></p> 
<p contenteditable="true">One</p> 
<p contenteditable="true">Two</p> 

満足できるものとして：

setInterval(function() { 
    $('p').attr('contenteditable','true'); 
    $('h1').attr('contenteditable','true'); 
},100); 

ご協力いただきありがとうございます。

Answer 1

したがって、新しい行の振る舞いを防ぐには、ENTERキーを検出する必要があります。

また、変更要素をトリガーするのも適切な時期です。

$("[contenteditable='true']").on("keydown",function(e){ 
 

 
    if(e.which=="13"){      // 13 is enter key 
 
    console.log("Enter Key!!"); 
 

 
    $(this).trigger("changeElement");  // Custom event here ;) 
 
    return false; 
 
    } 
 
}); 
 

 
// Handler for our custom event: Focus on the next! 
 
$("[contenteditable='true']").on("changeElement",function(){ 
 
    $(this).next().focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p contenteditable="true"></p> 
 
<p contenteditable="true"></p> 
 
<h1 contenteditable="true"></h1>

Answer 2

私はのcontentEditable要素が一定の間隔の後pタグが含まれているか否かをチェックすることによって、作業にこれを得ています。

このような場合は、子要素が親の前に移動されます。

setInterval(function() {  
    $("[contenteditable='true']").each(function() { 
     finder = $(this).find("p"); 
     $(finder).insertAfter($(this)); 
     $(finder).focus(); 
    });  
},100);