Разверните выделенный текст из HTML-тега, используя чистый JS - PullRequest
Новая
       5

Разверните выделенный текст из HTML-тега, используя чистый JS

0 голосов
/ 13 сентября 2018

Я работаю над простым текстовым редактором, использующим contenteditable в javascript. К сожалению, я не могу использовать document.execCommand и должен сам это реализовать. Я создал функцию, которая делает мой текст жирным. Вот функция: 

document.getElementById("bold").onclick = function() {
  var selection = document.getSelection(),
      range = selection.getRangeAt(0).cloneRange();
  range.surroundContents(document.createElement("b"));
  selection.removeAllRanges();
  selection.addRange(range);
}
<div id="editor" contenteditable="true">This is the contenteditable</div>
<button id="bold">Bold</button>

Теперь, когда пользователь нажимает кнопку полужирного шрифта, когда текст уже выделен жирным шрифтом, я хочу развернуть текст. Другими словами, я хочу, чтобы текст больше не был жирным.

Как я могу это сделать? Есть ли что-то противоположное range.surroundContents или что-то подобное?

Обратите внимание, что я хотел бы, чтобы только выделенный текст был выделен жирным шрифтом, а не каждый жирный текст в документе, поэтому jQuery unwrap(), вероятно, не будет работать. Я ищу решение Vanilla js и что-то элегантное и простое, но если оно должно быть сложным, я был бы признателен за некоторое объяснение кода. Большое спасибо.

1 Ответ

0 голосов
/ 10 марта 2019

Сохраните созданный элемент: 

let b = document.createElement("b");
range.surroundContents(b);

Чтобы развернуть, переместите каждого дочернего элемента непосредственно перед элементом b, а затем удалите элемент b: 

while (b.firstChild) {
    b.parentNode.insertBefore(b.firstChild, b)
}

b.parentNode.removeChild(b)
...