Редактирование в Chrome ведет себя иначе, чем в Firefox или Edge - PullRequest
Новая
       13

Редактирование в Chrome ведет себя иначе, чем в Firefox или Edge

1 голос
/ 24 апреля 2019

Учитывайте этот бит HTML при визуализации в веб-браузере: 

<p contenteditable="true"><span style="font-weight:bold;">Bold</span>.</p>

В Firefox 66 и Edge 17 выделение всех пяти символов текста (т. Е. Включая точку остановки) и ввод слова "Например, «новая» приводит к следующей разметке: 

<p contenteditable="true"><span style="font-weight:bold;">New</span></p>

Однако, если вы сделаете то же самое в Chrome 73, вы получите: 

<p contenteditable="true"><b>New</b></p>

Похоже, что Chrome решилзаменить диапазон с элементом b для достижения того же визуального эффекта.

Есть ли способ остановить это?У меня есть текстовый редактор, который очень смущает это поведение.

Вы можете поиграть с этим 

<p contenteditable="true"><span style="font-weight:bold;">Bold</span>.</p>

Примечание. Если весь текст находится в пределах интервала (поэтому в этом примере нет полной остановки), элемент b не создается.

1 Ответ

1 голос
/ 24 апреля 2019

Вы правы Chrome решите заменить новый текст аналогичным стилем

так что вам нужно заблокировать Chrome от этого: Document.execCommand () и он сохранит предыдущий элемент перед удалением с предыдущим стилем.

поэтому вам нужна команда styleWithCSS, которая заменяет то, что внутри contentEditable, на стиль.

styleWithCSS

Заменяет команду useCSS. Значение true изменяет / генерирует атрибуты стиля в разметке, значение false создает элементы представления. 

document.execCommand('styleWithCSS', false, 'true')


document.execCommand('styleWithCSS', false, 'true')
    <p contenteditable="true">
<span style="font-weight:bold;">Bold</span>.</p>
...