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

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


javascript browser jquery dom-events wysiwyg
person Babiker    schedule 19.12.2010    source источник

Ответы (4)


arrow_upward
4
arrow_downward

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

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

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

person mu is too short    schedule 19.12.2010
comment
JavaScript вообще не имеет доступа ни к одному из этих процессов, так что это не имеет значения. - person Tim Down; 19.12.2010
comment
@Tim Down: JavaScript не работает, но браузер делает это, поэтому вы ошибаетесь или просто чересчур педантичны. Базовый редактируемый элемент HTML имеет доступ к этому процессу через браузер. Обычно редакторы графического интерфейса в браузере заменяют <textarea> редактируемым <div>, а браузер обеспечивает согласование типа контента для редактируемого <div>. - person mu is too short; 19.12.2010
comment
В ПОРЯДКЕ. Не думаю, что я ошибаюсь, но я не собираюсь вступать в спор. Ваш ответ имеет некоторую ценность в качестве фона, но на самом деле очень мало дает для реального ответа на вопрос. - person Tim Down; 19.12.2010
comment
У вас есть примеры онлайн-редакторов форматированного текста? - person Quidam; 03.11.2019
comment
Я погуглил. Это первое, что я делаю. Предложения людей часто оказываются более ценными. - person Quidam; 03.11.2019

arrow_upward
2
arrow_downward

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

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

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

person Tim Down    schedule 19.12.2010

arrow_upward
1
arrow_downward

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

person Mark Ransom    schedule 19.12.2010

arrow_upward
0
arrow_downward

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

person NanoHead    schedule 19.12.2010