Как сделать раздел WYSIWYG на веб-странице? - PullRequest
Новая
       20

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

3 голосов
/ 13 декабря 2008

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

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

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

Спасибо!

Ответы [ 4 ]

4 голосов
/ 13 декабря 2008

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

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

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

Отправка формы может быть выполнена путем извлечения innerHTML из редактируемой области.

3 голосов
/ 14 декабря 2008

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

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

2 голосов
/ 13 декабря 2008

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

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

2 голосов
/ 13 декабря 2008

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

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

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

Удачи!

Edit:

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

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

...