Как реализовать Rich Text Editor в HTML? - PullRequest
Новая
       27

Как реализовать Rich Text Editor в HTML?

6 голосов
/ 02 декабря 2011

Вот демо:

http://www.kevinroth.com/rte/demo.htm

когда я использую Firebugs для проверки исходного кода, я вижу, что это только iFrame, но как iFrame может вести себя в текстовой области ?? Есть идеи, как это реализовать? Благодарю

Ответы [ 3 ]

8 голосов
/ 19 июня 2012

Поскольку я делаю это сейчас для своей работы, я провел небольшое количество исследований. Из того, что я понял, есть два способа сделать это:

Document.designMode

Использование document.designMode в JavaScript, который устанавливает возможность редактирования всего HTML-документа. Поскольку весь HTML-документ является редактируемым, предположительно, iframe необходим для инкапсуляции редактирования, чтобы пользователь не мог редактировать любую часть страницы, которую вы не хотите редактировать.

Насколько я могу судить, демо, которое вы связали, и TinyMCE использует этот метод.

contenteditable

Атрибут contenteditable HTML похож, но не требует использования iframe. Вы добавляете атрибут к тегу, и весь HTML-код внутри него становится редактируемым с мигающим курсором.

Вот демонстрация этого: http://html5demos.com/contenteditable

Примечания

  • Лично я буду смотреть на contenteditable для моей задачи. Вот хороший обзор и подробности по теме: http://blog.whatwg.org/the-road-to-html-5-contenteditable
  • Как я уже сказал, я провел ограниченное исследование по этому вопросу, поэтому, пожалуйста, помогите мне исправить любые ошибки:)
0 голосов
/ 02 декабря 2011

Использовать http://www.tinymce.com/ Это лучший многофункциональный редактор. Прекрасно работает с любым браузером и имеет много вариантов. Это очень просто в использовании. Просто посмотрите на примеры и документы. Он включен во многие популярные блоги и CMS.

0 голосов
/ 02 декабря 2011

В этом кадре вы можете увидеть полный исходный код HTML, который создает нечто, что выглядит как текстовая область + панель инструментов + материал.Сложный Javascript делает весь трюк позади.Например, если вы выделите какой-либо текст и выделите его жирным шрифтом с помощью панели инструментов, сценарий поместит теги <strong> вокруг текста и т. Д.

...