#javascript #html #tinymce #textarea
#javascript #jquery #tinymce #текстовый редактор
Вопрос:
Я хочу понять, как функционирует tinymce.
редактор форматированного текста содержит html-документ в iframe. как можно редактировать вложенные элементы DOM внутри, другими словами, как я могу вводить текст внутри <div> слоя или <p> слоя, когда нет текстовой области или поля ввода (по крайней мере, я их не вижу)?
преобразуются ли элементы в поля ввода, когда они активны?
редактировать: если вы собираетесь отклонить вопрос, пожалуйста, укажите, почему.
Комментарии:
1. Ответ на ваш вопрос выходит за рамки SO. Вы могли бы попробовать форум TinyMCE: tinymce.moxiecode.com/punbb Запрос на сжатие тысяч строк кода в сообщение, которое помещается на форуме, все еще довольно широк.
2. Голосуем! Хороший вопрос. Я искал тот же ответ. Насколько я понимаю вопрос (и что мне нужно), нам не важен tinymce, просто нужно понять механизм его повторного использования в наших собственных решениях. Это именно то, для чего SO 🙂
Ответ №1:
В случае с TinyMCE (и большинством других редакторов) это <iframe> (чтобы не наследовать стиль от родительской страницы, среди прочих причин), но магия — это contentEditable атрибут, на который устанавливается значение true .
Вы можете прочитать более подробную информацию в рабочем проекте HTML5 здесь .
Вы можете протестировать здесь очень упрощенную демонстрацию, редакторы, конечно, делают гораздо больше со своими панелями инструментов, поддержкой <textarea> для хранения разметки для отправки на сервер и т. Д. Но, Похоже, ваш вопрос заключается в том, как вы редактируете элементы, суть этого contenteditable .
Комментарии:
1. О, мой восторг!!! Это ТАК ПРОСТО! Я не могу поверить! Только один атрибут. У меня создалось впечатление, что это должен быть какой-то хитрый JavaScript, который отслеживает изменения текстовой области и соответствующим образом изменяет html (например, create <p> и устанавливает стиль для полета.) … боже! действительно, не могу поверить… ты открываешь мне глаза!