Иногда мы хотим отобразить HTML внутри текстовой области.

В этой статье мы рассмотрим, как отображать HTML-контент внутри текстовой области.

Визуализировать контент в контентном Div

Текстовая область HTML не может отображать HTML.

Однако мы можем сделать содержимое div доступным для редактирования с помощью атрибута contenteditable.

Следовательно. мы можем использовать редактируемый div так же, как и с текстовой областью, но с содержимым HTML.

Например, мы можем написать следующий HTML:

<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>

Затем мы можем стилизовать его с помощью следующего CSS:

.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  resize: both;
  overflow: auto;
}

И тогда мы можем получить кнопки и изменить текст при нажатии на них:

const bold = document.querySelector('.bold')
const italic = document.querySelector('.italic')
const editable = document.querySelector('.editable')
const toggleRed = () => {
  const text = editable.innerHTML;
  editable.innerHTML = `<p style="color:red">${text}</p>`;
}
const toggleItalic = () => {
  const text = editable.innerHTML;
  editable.innerHTML = `<i>${text}</i>`;
}
bold.addEventListener('click', toggleRed);
italic.addEventListener('click', toggleItalic);

Мы делаем div доступным для редактирования с атрибутом contenteditable, установленным на true.

Мы выбираем все элементы, которые мы добавили с помощью document.querySelector.

Затем у нас есть функция toggleRed, которая получает существующий innerHTML из редактируемого div.

Затем мы добавляем элемент p с красным стилем.

Точно так же у нас есть функция toggleItalic для получения innerHTML из редактируемого div.

Затем мы оборачиваем текст тегом i.

CSS просто устанавливает ширину, границу, отступы и стили переполнения для редактируемого div.

Теперь, когда мы щелкаем по переключателю красного цвета и переключению курсива, мы видим соответствующие стили, примененные к тексту, который мы в него ввели.

Заключение

Мы можем отображать HTML в редактируемом div вместо текстовой области, если мы хотим добавить поле, в котором мы можем редактировать форматированный текст.