Репликация некоторых функций в SCEditor

В моем текущем приложении я создал собственный редактор BBCode - я использую ряд расширений BBCode и предъявляю другие требования к интеграции, которые требуют, чтобы я использовал свой собственный редактор гораздо лучше, чем готовый.

Создание этого, гарантирующего, что сгенерированный BBCode всегда действителен, переведен в хороший HTML и т. Д., Было большой работой, но я очень доволен результатами. Однако... в настоящее время я обязываю конечного пользователя просматривать и редактировать BBCode. Было бы лучше иметь WYSIWYG. Отмечу, что SCEditor имеет интерфейс WYSIWYG. Просматривая обложки с отличным отладчиком Chrome, я заметил следующее

  • Исходная текстовая область скрыта
  • Div, содержащий iframe вставлен
  • Документ в iframe содержит contenteditable div и скрытый элемент управления textarea.

Я мог бы продолжить свои исследования и выяснить, как все это делается. Однако я надеюсь, что кто-то здесь сможет дать мне несколько советов о том, что здесь требуется. Я представляю, что введенный BBCode каким-то образом "перенаправляется" в скрытую текстовую область, анализируется на лету и результаты отображаются в редактируемом содержимом div или что-то в этом роде? Также будет проблема правильного обращения с щелчками мыши и выборами.

Источник

1 ответ

Решение

SCEditor работает с парсером BBCode и конвертером DOM в BBCode (в данный момент это немного уродливо).

Первоначально редактор преобразует BBCode из textarea в HTML через синтаксический анализатор BBCode и помещает его в элемент contentEditable iframe, Затем пользователь может редактировать содержимое элемента contentEditable, как и любой другой редактор HTML WYSIWYG.

Когда форма отправлена ​​или пользователь хочет просмотреть источник BBCode, DOM затем переводится обратно в BBCode через конвертер. Перевод из DOM в BBCode может быть выполнен точно, так как это, по сути, то, что BBCode анализирует в любом случае.

Так, например, для жирного шрифта вы можете проверить, есть ли у узла style.fontWeight жирным шрифтом или если это <strong> или же <b> тег. Для других элементов, таких как ссылки, вы просто используете href атрибут и обернуть содержимое внутри [url] тег.

Наконец, результирующий BBCode анализируется во второй раз анализатором BBCode и выводится с любыми заданными параметрами вывода BBCode. На самом деле не существует стандарта для BBCode, поэтому такие элементы, как перевод строки после элементов уровня блока, должны быть настраиваемыми.

По сути, то, что делает SCEditor:

  • BBCode -> DOM
  • Редактировать с помощью contentEditable
  • DOM -> BBCode

Из создания SCEditor я узнал, что, если вы не хотите тратить годы на его совершенствование, не пишите WYSIWYG-редактор с contentEditable, просто используйте / строите на чужом. Есть ответ на другой пост от разработчика CKEditor, говорящего почти то же самое.

Если вы действительно хотите создать свой собственный редактор WYSIWYG, использование Rangy для работы с выбором браузера должно упростить задачу. Нативные API выбора браузера (или по крайней мере были) очень глючные! Кроме того, IE < 9 использует совершенно нестандартный метод доступа к выборкам. Rangy предоставляет общий API, который работает с нестандартным подходом IE, а также работает с ошибками браузера.

Источник
Другие вопросы по тегам