Как сделать раздел WYSIWYG на веб-странице?

Я хочу знать базовый принцип, используемый для страниц WYSIWYG в Интернете. Я начал кодировать его и сделал это с помощью текстовой области, но очень скоро я понял, что не могу добавлять или показывать изображения или любой HTML-текст в текстовой области. Поэтому я сделал это с помощью DIV, но я не понял, как сделать его доступным для редактирования.

Итак, в сути, я хочу знать, как (в принципе) сделать редактируемый раздел DIV на веб-странице, что-то похожее на документы Google или FCKEditor или TinyMCE.

Я был бы очень благодарен за любые указатели и информацию.

Благодаря!

Существует флаг contentEditable который можно добавить к любому элементу на странице, чтобы сделать его редактируемым, например.

 
I am editable!!!!

Должен работать во всех основных браузерах в наши дни, и такие вещи, как клавиши быстрого доступа (cmd / ctrl-b и т. Д.), Будут работать просто.

Затем представление формы можно сделать, вытащив innerHTML из области редактирования.

То, что вы видите, это то, что вы имеете в виду , – не следуйте пути WYSIWYG, поскольку он заполнен ловушками.

WYMeditor является лучшим, когда дело доходит до вывода семантического и чистого HTML.

TinyMCE является открытым исходным кодом, поэтому вы можете взглянуть на то, как он работает под капотом. 🙂

Из указаний по установке видно, что раздел form HTML (чтобы предоставить отправку формы на сервер для хранения) выполняется с текстовым полем, внутри которого заменяется редактор TineMCE.

Сам источник ссылается на файл tiny_mce.js который tiny_mce.js в целевом HTML-файле, поэтому это может быть хорошей отправной точкой, чтобы увидеть, как это работает.

Удачи!

Редактировать:

Хотя я не тратил много времени, глядя на источник для TinyMCE, кажется, указывает, что сам редактор находится внутри iframe , поэтому это может объяснить, как изображения могут отображаться в «редактируемой» области.

Если вам интересно, загрузите пакет разработки и посмотрите на tiny_mce/jscripts/tiny_mce/classes/Editor.js . Со всей строки 400 кажется, что они настраивают iframe и добавляют его в DOM целевого HTML.

Используйте TinyMCE и отключите панели инструментов.

Серьезно, создание WYSIWYG-редактора для Интернета намного сложнее, чем кажется, и есть миллион способов, по которым вы можете пойти не так. Вы могли бы провести следующие два месяца, сражаясь с разными браузерами и вещами, которые ломаются без уважительной причины, или вы можете доверять людям, которые знают больше о предмете, чем вы или я.

TinyMCE впечатляюще настраивается, и вы можете скрыть все панели инструментов, используя самые простые параметры конфигурации:

 tinyMCE.init({ mode: 'textareas', theme: 'advanced', theme_advanced_buttons1 : '', theme_advanced_buttons2 : '', theme_advanced_buttons3 : '', theme_advanced_statusbar_location : "none", }); 

Вы также можете использовать обычный CSS, чтобы сделать

 .mceLayout { background: none !important; border: none !important; } 

Я не уверен, что вы хотите использовать WYSIWYG, но, скорее всего, вам нужно будет получить содержимое в какой-то момент. Вы можете сделать это с помощью простого Javascript:

 var editor = tinyMCE.get('editorid'); var stuff = editor.getContent(); 

Он бесплатный, простой в использовании и проверенный многими пользователями. Нет никакой веской причины изобретать велосипед.