Вставьте span в contentEditable с document.execCommand ('insert HTML',

Question

Я работаю над богатым редактором контента. Конфигурация настроена на добавление тега <p> в качестве разделителя абзацев:

document.execCommand('defaultParagraphSeparator', false, "p");

Мне нужно вставить специальные <span contenteditable='false'> разделы:

document.execCommand('insertHTML', false, "<span contenteditable='false'>...</span>");

Вставки не выполняются как ожидается.

Я ожидаю:

<p>something <span>...</span></p>

Я получил:

<p>something </p>
<span>...</span>

Не могу понять, почему тег span не вставлен в теге p. Есть идеи?

Answer 1

execCommand имеет историю несовместимости и ошибок в разных браузерах. В настоящее время execCommand устарело:

Эта функция устарела. Хотя он все еще может работать в некоторых браузерах, его использование не рекомендуется, поскольку его можно удалить в любое время. Старайтесь избегать его использования.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Предлагаю вам прочитать эту страницу на лучшие альтернативы: https://medium.com/@jitubutwal144 / три разные пути-к-строить-рядный контент-редактор, используя-javascrpit-d58c2edac9cb