Как работают онлайн-текстовые редакторы?

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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