Как запретить execCommand проталкивать форматирование через выбранные элементы? - PullRequest
Новая
       91

Как запретить execCommand проталкивать форматирование через выбранные элементы?

1 голос
/ 17 июня 2020

Я использую contenteditable div для настройки базового c редактора. Контент включает некоторые элементы, которые называются «atomi c» - это заполнители, которые сами по себе не редактируются. Однако, когда пользователь выбирает такой элемент, а затем выбирает (например) надстрочный индекс, форматирование проталкивается через диапазон, который представляет заполнитель, и в его содержимое.

Я установил минимальный пример ниже. Нажмите «Щелкните меня», чтобы применить верхний индекс к диапазону «Текст», который действительно должен делать весь элемент (с его рамкой) верхним индексом. Вместо этого границы остаются нормальными, а верхний индекс помещается внутрь диапазона. Создание диапазона «contenteditable = false», что я хотел бы сделать, поскольку это atomi c, приводит к полному сбою переформатирования. 

var button = document.getElementById("button");
button.onclick = function() {
    var element = document.getElementById("element");
  var range = document.createRange();
  range.selectNode(element);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);

  document.execCommand('superscript', false, false);
}
#editor {
  border:1px solid black;
  height:100px;
  width:100px;
  padding:10px;
}

#element {
  padding:3px;
  border:1px solid black;
  border-radius:5px;
}

#button {
  margin-top:10px;
}
<div id='editor' contenteditable="true">
  Stuff <span id='element'>Text</span> something
</div>
<button id='button'>
  Click me
</button>

Есть ли способ сообщить браузеру, что форматирование никогда не следует помещать внутрь определенного элемента?

...