Как визуальные редакторы онлайн работают?
Я задавался вопросом, как визуальные редакторы онлайн поддерживают форматирование при вставке текста от веб-страницы или документа. Стандартное поле текстовой области только берет текст, в то время как эти 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 (или что-то в этом роде) и все.
.