Иногда мы хотим отобразить 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 вместо текстовой области, если мы хотим добавить поле, в котором мы можем редактировать форматированный текст.