5

Я видел несколько реализаций визуальных редакторов, таких как TinyMCE и CodeMirror. Все могу разделить на 3 группы:

  • DIV c contenteditable=true - кажется в готовых проектах не используется в чистом виде
  • iframe + body[contenteditable=true] - Такой подход используется в TinyMCE, где редактор находится в iframe
  • hidden texarea + Events + обычный DIV - такой подход используется в CodeMirror, как я понимаю он постоянно держит фокус на скрытом textarea и читает события перевода каретки, вставки и ввода данных, и добавляет их в обычный нередактируемый (contenteditable=false) блок. Причем даже выделение текста делается с помощью цветного DIV.

В связи с этим у меня стоит выбор, какую реализацию выбрать и в чем ее особенности.

На данный момент мне надо:

  • Простое форматирование
  • Кастомную каретку
  • Адекватное копирование/вставку контента с сохранением форматирования
  • Возможно эффект плавного появления текста при печати

Использовать готовые разработки не могу. Спасибо.

1 ответ 1

1

Очень рекомендую к прочтению (на англ.): https://stackoverflow.com/questions/10162540/contenteditable-div-vs-iframe-in-making-a-rich-text-wysiwyg-editor (+ по ссылкам), мы во многом пересекаемся, но там пишут разработчики существующих редакторов.

Разница между iframe vs <div contenteditable>

iframe более "тяжелый" (создается отдельный документ), и соответственно, более изолирован:

  • В iframe не попадет ничего из внешнего документа (в частности, стили). Это позволяет вам реализовать WYSIWYG для более ограниченного набора функциональности, чем доступна в Web. Простейший пример - будет ли ваш код готов к тому, что произвольные куски редактируемого контента будут display: hidden из-за унаследованных стилей? Более сложный - как будет работать каретка и выделение с унаследованными float? Ну и т.д.
  • Содержимое iframe не повлияет на внешний документ. Где-то приводился пример, что баг браузера приводил к вставке контента "мимо" contenteditable - с iframe это будет менее жесткий баг;
  • Народ пишет про безопасность. Сам не разбирался детально, но предполагаю, что может быть связано с тем, что в дочернем фрейме можно запретить "случайное" выполнение левого вредительского кода через что-нибудь вроде <iframe sandbox>.

contenteditable vs не-contenteditable

Тут все просто: несмотря на все свои баги^H^H^H^Hособенности, contenteditable все-таки реализует огромную кучу функциональности, в т.ч. такой, о которой мы даже не задумываемся (IME какой-нибудь).

Соответственно, либо:

  • Реализуем всю необходимую функциональность самостоятельно (это CodeMirror, Ace, "новый" (в 2010) google docs).
    • Это возможно, если у вас есть возможность потратить тысячи человеко-дней (Google) или необходимая функциональность существенно сужена (например, в CodeMirror и Ace редактируется только plain text - код);
    • Позволяет: иметь полный контроль над происходящим
  • Используем contenteditable:
    • "Проще" в реализации (хотя см. ниже) - быстрее получается что-то работающее
    • Ограничения по функциональности, обходить которые будет все сложнее, если не невозможно совсем.

Постановка задачи

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

  • В связи с отсутствием нормальных API в браузерах, кучи багов, нехватки внятной документации и т.п., ваше начинание по сути сведется к реализации очень большого количества тривиального встроенного функционала методом длительных исследований и экспериментов.
  • Если у вас опасения по поводу лицензий и запрещено смотреть в опенсорсные реализации WYSIWYG, то исследования еще больше усложняются.
  • Лично у меня осознание пришло, когда я реализовал в чистом contenteditable одну операцию: дано <li>text <b>te|xt</b></li> (| - каретка), нужно реализовать то, что происходит при нажатии на Enter. С тремя допущениями и двумя TODO это занимает 20+ строк кода ...
  • Самое прекрасное, что сама задача WYSIWYG весьма плодородная в плане багов. Вот тут про это хорошо написано: Why ContentEditable is Terrible. Or: How the Medium Editor Works

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.