Очень рекомендую к прочтению (на англ.): 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