Как работают текстовые редакторы в Интернете?

Мне было интересно, как интерактивные текстовые редакторы поддерживают форматирование при вставке текста с веб-страницы или документа. Стандартный текстовый ящик принимает текст только в том случае, когда эти редакторы WYSIWYG, похоже, используют DIV. Как это работает?

3 ответа

Текстовые редакторы онлайн-контента используют contentEditable или designMode для воспользуйтесь встроенной поддержкой браузера для редактирования HTML. Когда вы вставляете элемент contentEditable или designMode, браузер автоматически помещает HTML в элемент. Попробуйте сами, вставив Midas Demo, а затем используя элемент проверки Firebug, чтобы посмотреть на вложенный HTML-код.

Приложения JavaScript могут использовать метод execCommand для форматирования выбора пользователя в текстовом редакторе.


Редакторы WYSIWYG на самом деле строят поверх основных функций редактирования HTML, которые уже встроены в браузер. В Firefox технология называется Midas. В IE contentEditable.


Используя существующие возможности браузера (IE - ContentEditable). Это позволяет разработчику разрешить пользователю напрямую редактировать html. Обычно они используют iFrame для разделения редактируемого раздела с остальной части страницы, но это не требуется.

Затем разработчик может просто прочитать html-источник iframe (или что-то еще), и они будут выполнены.

licensed under cc by-sa 3.0 with attribution.