Contenteditable: предотвратить внутренний элемент от удаления

Question

У меня есть простой contenteditable разметка:

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

Когда я удалить «Some content», то class="inside" ДИВ также будет удален. Есть ли способ предотвратить удаление внутреннего 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>