1

const getFirstTemplate = ()=>`<span>[ДОБАВЛЕНО]</span>`;
const element = document.querySelector('[contenteditable="true"');

element.addEventListener('mouseup', event=>{
  document.execCommand('insertHTML',false, getFirstTemplate());
  
});
element.addEventListener('input', event=>{
  console.log(event.target.innerHTML);
});
<div contenteditable="true">кликнуть-по-тексту</div>

Почему не добавляется span, и почему появляется <br>? Как это исправить?

1 ответ 1

0

Как оказалось, это ожидаемое поведение,ведь сам тег span не несет никакой смысловой нагрузки и умный браузер его просто игнорирует. Но стоит добавить в тег описание, он начинает расцениваться, как необходимый.

const getFirstTemplate = ()=>`<span class="text">[ДОБАВЛЕНО]</span>`;
const element = document.querySelector('[contenteditable="true"');

element.addEventListener('mouseup', event=>{
  document.execCommand('insertHTML',false, getFirstTemplate());
  
});
element.addEventListener('input', event=>{
  console.log(event.target.innerHTML);
});
<div contenteditable="true">кликнуть-по-тексту</div>

На самом деле ответ можно считать и верным и нет,так как он работает только при таком раскладе. Если изменить структуру дерева или изменить сами html теги, то работать уже не будет. Пишут что это какие-то баги и судя по датам устранять их не торопятся.

Эта особенность, к моему разочарованию, делает contenteditable вообще не пригодным к использованию. Так как если создать собственную функцию добавления html в редактор, что не составит труда, обяжет писать самому систему undo\redo что является не таким простым и что обязывает писать редактор полностью самому.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.