のcontentEditable：私は簡単なのcontentEditableマークアップを持って

Question

を削除され、内側の要素を防ぐ：私は「Some content」を削除する場合

<div class="example" contenteditable="true"> 
    <div class="inside">Some content</div> 
</div> 

、その後、class="inside" div要素も削除されます。コンテンツが削除されたときに内部divが削除されないようにする方法はありますか？

たとえば、コンテンツが削除されると、これは私が作成しようとしている外観です。

<div class="example" contenteditable="true"> 
    <div class="inside"></div> <!-- The div is not deleted --> 
</div> 

私は周りを見回しましたが、明確な答えがないようです。

ご協力いただければ幸いです。

ありがとうございます。

Answer 1

.inside, .example { 
 
    display: inline; 
 
}

<div class="example" contenteditable="true"> 
 
    <div class="inside">Some content</div> 
 
</div>

たぶんインラインレベル要素であるスタイルがあります。

コンテンツを削除すると、幅は0％になるので、もう一度クリックしたり、コンテンツを追加することはできません。

だから、私の解決策は、あなたがしたい場合は、幅を指定することができます

.inside, .example { 
    display: block; 
} 

になります。 :)

.inside, .example { 
 
    display: block; 
 
}

<div class="example" contenteditable="true"> 
 
    <div class="inside">Some content</div> 
 
</div>