Как сделать WYSIWYG-редактор HTML/JS? [закрытый]
Я попробовал много различных поисков Google, но я не смог найти текущее учебное руководство (более новым, чем 2006) о том, как на самом деле создать WYSIWYG-редактор. Я понимаю, что уже существуют многие, но мне любопытно относительно того, как они на самом деле работают. Я просмотрел часть исходного кода, но это много к обзору. Кажется, что форматированный текст не может быть помещен в поле текстовой области, и все же они дают иллюзию выполнения просто этого - как?
2 ответа
Редакторы Javascript WYSIWYG не используют текстовое поле (по крайней мере, не извне, вполне вероятно, что за кулисами существует текстовое поле, которое заполняется кодом, составляющим контент WYSIWYG, чтобы его можно было опубликовать в форме) .
Скорее, есть два свойства, которые используются для создания редактируемой области на веб-странице: designMode , который применяется ко всему документу, или contentEditable , который применяется к конкретному элемент. Оба свойства изначально были нововведением Microsoft, но были приняты всеми основными браузерами ( contentEditable теперь является частью HTML5).
После того, как документ (с точки зрения редакторов форматированного текста это обычно означает встраивание iframe с параметром designMode, установленным на вашу страницу) или элемент становится редактируемым, форматирование выполняется с помощью метода execCommand (для которого существует представляют собой несколько различных режимов - полужирный, курсив и т. д. - которые не обязательно одинаковы для всех браузеров (дополнительную информацию см. в этой таблице ).
Чтобы передать контент от редактируемого элемента на сервер, обычно innerHTML редактируемого элемента загружается в текстовое поле, которое публикуется. Состав сгенерированного HTML зависит от браузера.
Ресурсы :
Обычно они скрывают ваше текстовое поле и помещают iframe в качестве поля редактора. Они фиксируют ваш ввод (текст + форматирование) и записывают соответствующий HTML-код в iframe. Если вы отправляете свою форму, включая исходное текстовое поле, они копируют содержимое iframe в текстовое поле, и поэтому отправляется HTML-код.
Ну, это довольно упрощенно.