tinymce: режим форматированного текста, как он работает

Question

Я хочу понять, как работает tinymce.

Редактор форматированного текста содержит HTML-документ внутри iframe. как вложенные элементы DOM внутри доступны для редактирования, другими словами, как я могу печатать внутри слоя <div> или <p>, когда нет текстовой области или поля ввода (по крайней мере, я его не вижу)?

элементы преобразуются в поля ввода, когда они активны?

edit: Если вы собираетесь проголосовать за вопрос, укажите причину.

Answer 1

В случае с tinyMCE (и большинством других редакторов) это <iframe> (чтобы не наследовать стили от родительской страницы, среди прочих причин), но магия заключается в установке атрибута contentEditable до true.

Подробнее о рабочем проекте HTML5 вы можете прочитать здесь .

Вы можете протестировать очень упрощенную демонстрацию здесь , редакторы, конечно, делают гораздо больше со своими панелями инструментов, поддержкой <textarea> для хранения разметки для отправки на сервер и т. Д. ... но ваш вопрос кажется, как вы редактируете элементы, ядро ​​которых contenteditable.