Я хочу сделать текстовый редактор HTML, имеющий жирный функционал, используя window.getSelection

Я хочу сделать текстовый редактор HTML, имеющий жирный функционал, используя window.getSelection

Одним из способов сделать это может быть следующее:

  • Получить окно выбора.
  • Преобразуйте выделение в строку, чтобы получить текст.
  • Создайте элемент, который будет выделен жирным шрифтом.
  • Замените выделенный текст, содержащийся в innerHTML parentElement полужирным элементом.

Пример на основе предоставленного вами кода:

 let boldBtn = document.getElementById('Bold-Btn'); let boldClickListener = (event) ={amp}gt; { event.preventDefault(); // Get selection let selection = window.getSelection(); // Get string of text from selection let text = selection.toString(); // Create bolded element that will replace the selected text let final = `{amp}lt;span class="text-bold"{amp}gt;${text}{amp}lt;/span{amp}gt;`; // Replace the selected text with the bolded element selection.anchorNode.parentElement.innerHTML = selection.anchorNode.parentElement.innerHTML.replace(text, final); }; boldBtn.addEventListener('click', boldClickListener); 
 .text-bold { font-weight: bold; } 
 {amp}lt;div{amp}gt; Test this text {amp}lt;/div{amp}gt; {amp}lt;button id="Bold-Btn"{amp}gt; Bold {amp}lt;/button{amp}gt; 

Обратите внимание, что вы можете добавить больше логики при создании элемента, выделенного жирным шрифтом, для обработки, если какой-либо существующий текст уже выделен жирным шрифтом.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector