Как создать WYSIWYG-редактор на HTML/JS? [закрыто]
Проблема: Не удается найти актуальный учебник по созданию WYSIWYG-редактора
Я пытался провести множество различных поисков в Google, но не смог найти актуального учебника (более позднего 2006 года) о том, как на самом деле создать WYSIWYG-редактор. Понимаю, что такие редакторы уже существуют, но мне любопытно, как они функционируют. Я просмотрел некоторые исходные коды, но это слишком сложно для восприятия. Мне кажется, что отформатированный текст нельзя поместить в поле textarea, и в то же время они создают иллюзию этого — как это достигается?
Пожалуйста, помогите разобраться с этой проблемой!
2 ответ(ов)
Привет! Спасибо за то, что поделились своим кодом для создания простого WYSIWYG редактора. Давайте взглянем на ваш код и немного его разберем.
Вы сделали правильные шаги, чтобы открыть новое окно с результатом, полученным из <textarea>. Вот краткий обзор вашего кода:
- HTML часть: Вы создали
<textarea>для ввода текста и кнопку, которая вызывает функциюShowResult()при нажатии.
<body>
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value"></textarea>
<br />
<button onclick="ShowResult()">see result!</button>
</body>
- JavaScript часть: В функции
ShowResult()создается новое окно, и текст из<textarea>вставляется в это окно.
function ShowResult() {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write(x);
}
- Полный код:
<html>
<script type="text/javascript">
function ShowResult() {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write(x);
}
</script>
<body>
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value"></textarea><br />
<button onclick="ShowResult()">see result!</button>
</body>
</html>
Замечания:
- Вы используете
onblur, чтобы задать значение переменнойx, однако стоит учитывать, что при каждом новом вводе пользователю может потребоваться повторно кликать вне текстового поля для обновления переменной. - Чтобы улучшить код, вы можете использовать событие
onclickдля кнопки, чтобы получить текущее значениеtextarea, что предотвращает необходимость в дополнительной переменной.
Вот обновленный вариант функции:
function ShowResult() {
var x = document.querySelector('textarea').value; // Получаем значение textarea напрямую
my_window = window.open("about:blank", "mywindow1");
my_window.document.write(x);
}
Таким образом, ваш код становится немного чище, и вам не нужно использовать глобальную переменную x.
Если у вас есть дополнительные вопросы или вы хотите обсудить другие аспекты WYSIWYG редакторов, не стесняйтесь спрашивать! Спасибо, что задали этот вопрос и помогли мне расширить свои знания о JavaScript.
В основном, они скрывают ваш <textarea> и устанавливают <iframe> в качестве поля редактора. Они захватывают ваш ввод (текст + форматирование) и записывают соответствующий HTML в <iframe>. При отправке формы, включая оригинальный <textarea>, они копируют содержимое <iframe> в <textarea>, и таким образом HTML-код отправляется.
Хотя это довольно упрощённое объяснение.
Потеряно HTML-кодирование при чтении атрибута из поля ввода
jQuery/JavaScript: Замена битых изображений
Предварительный просмотр изображений перед загрузкой
jQuery / JavaScript — вызов события нажатия кнопки из события нажатия другой кнопки
Установить значение по умолчанию в выпадающем списке с помощью jQuery