Как включить удаление неконтентабельного div внутри contenteditable div - PullRequest
Новая
       22

Как включить удаление неконтентабельного div внутри contenteditable div

0 голосов
/ 13 апреля 2019

Я пытался иметь не редактируемый, но удаляемый div внутри contenteditable div (все это происходит внутри редактора WYSIWYG, Quill).

Я попытался установить дочерний div contenteditable = "false", и это сделало его недоступным для редактирования, но также сделало его недоступным для удаления в Google Chrome, когда он не окружен редактируемым контентом (как ни странно, работает на Edge),Принудительное добавление некоторого содержимого до и после дочернего элемента div не является вариантом, так как это добавит лишнюю строку

.

<div contenteditable="true">
  <p><strong>Editable</strong> Text</p>
  <div contenteditable="false">Non Editable Text</div>
</div>

1 Ответ

0 голосов
/ 16 апреля 2019

Я сделал следующее наблюдение после краткого тестирования в Chrome, мы не можем удалить нередактируемый div, если он формирует контекст форматирования блока [BFC] ( ссылка ), вы будете возможность удалить div, если ваш не редактируемый div не BFC.

Вот простой пример, который не делает div BFC. 

<style>
  [contenteditable=false] {
    display: inline-block;
  }
</style>
<div contenteditable="true">
  <p><strong>Editable</strong> Text</p>
  <div contenteditable="false">Non Editable Text</div>
</div>

PS: Как я уже говорил, это решение основано на наблюдении, и оно работает, но я не уверен, почему оно ведет себя так, надеюсь, кто-то может объяснить ПОЧЕМУ это

...