Как некоторые редакторы WYSIWYG сохраняют форматирование вставленного текста?

Question

Как некоторые редакторы WYSIWYG сохраняют форматирование вставленного текста?Например, я скопировал красный текст курсивом из текстового редактора в WYSIWYG, и он сохранил цвет и стиль текста, как это происходит?Долгое время я думал, что JavaScript имеет доступ только к тексту буфера обмена.Разве это не так?Если так, то что это?

Answer 1

Во время операции копирования / вставки существует согласование типа контента между источником и целью.Это происходит примерно так:

1. Вы копируете что-то в буфер копирования и вставки.Скопированные данные помечены, более или менее, типом MIME и тем, кто их туда поместил.
2. При вставке цель вставки сообщает системе копирования и вставки, что она понимает определенный список типов MIME..
3. Система копирования и вставки сопоставляет доступные форматы с желаемыми форматами и находит text/html в обоих списках.
4. Кто-то (возможно, исходный источник данных) затем преобразуетвставьте буфер в text/html и поместите его в редакторе.

Это было довольно похоже на то, как все работало, когда я занимался разработкой X11 / Motif (эй! убирайся с моего газона, вы, гнилые дети!)Я предполагаю, что все делают это примерно одинаково.

Answer 2

JavaScript вообще не имеет прямого доступа к буферу обмена. Однако все основные браузеры, выпущенные за последние несколько лет, имеют встроенную функцию редактирования WYSIWYG через атрибут / свойство contenteditable любого элемента (что делает редактируемым только этот элемент) и свойство designMode объектов документа (которое делает весь документ редактируемым).

Пока пользователь редактирует содержимое страницы, если он запускает вставку (с помощью сочетаний клавиш, таких как Ctrl + V или Shift + Вставьте или через меню «Редактирование» или «Контекст»), браузер автоматически обрабатывает весь процесс вставки без какого-либо вмешательства со стороны JavaScript. Часть этого процесса включает сохранение форматирования, где это возможно.

Однако созданный HTML-код может быть ужасным и сильно различаться в зависимости от браузера. Многие WYSIWYG-редакторы, такие как TinyMCE и CKEditor, используют трюки , чтобы перехватить вставленный контент и очистить его, прежде чем он достигнет редактируемой области редактора.

Answer 3

То, что вы видите, - это текстовый редактор.В этой статье Википедии есть информация: http://en.wikipedia.org/wiki/Online_rich-text_editor

Answer 4

Я думаю, что вместо этого скопировал выбранный DOM