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

TinyMCE имеет открытый исходный код, поэтому вы можете посмотреть, как он работает изнутри. :)

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

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

Удачи!

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

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

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

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

<div contentEditable>I am editable!!!!</div>

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

После этого отправку формы можно выполнить, вытащив innerHTML из редактируемой области.

Используйте 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();

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

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

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