Базовый редактор javascript wysiwyg

Могу ли я получить объяснение, как создать редактор wysiwyg с использованием текстового поля? Все, что мне нужно для этого, - это анализировать базовые теги html, такие как жирный, курсив, подчеркивание и т. Д. Не требуется никаких кнопок, которые его вставляют, я просто хочу иметь текст по умолчанию внутри тегов textarea, которые анализируют HTML.

Пример:

<textarea cols="20" rows="20" name="ok">
<b>wat</b>
</textarea>

Это распечатает <b>wat</b> вместо ват внутри текстового поля.

Изменить: предпочтительнее jQuery


javascript jquery wysiwyg
person David    schedule 05.09.2010    source источник
comment
Вы смотрели на tinymce или любой из сотни других редакторов, богатых javascript? Есть ли у вас возражения против их использования?   -  person Jarrett Widman    schedule 05.09.2010
comment
Я не думаю, что это так просто сделать даже базовый редактор wysiwyg. Проблема в том, что отображение текста со стилем является функцией вывода в HTML. Но вам также понадобится сторона ввода для создания редактора. Я предлагаю вам изучить хорошо написанный, гибкий, такой как YUI RTE. Затем настройте функции, которые вам не нужны.   -  person Larry K    schedule 05.09.2010
comment
Я думаю, что потребуется несколько довольно тяжелых регулярных выражений, чтобы создать даже простой собственный редактор.   -  person Shane Reustle    schedule 05.09.2010

Ответы (3)


arrow_upward
4
arrow_downward

Посмотрите на атрибут contenteditable. Он поддерживается многими современными браузерами. Просто добавьте его к элементу и отредактируйте ...

document.getElementById('something').contentEditable = true;

Конечно, это не работает с текстовыми полями. Вам нужно будет заменить текстовое поле на div и сделать его редактируемым. Вам также необходимо убедиться, что текстовое поле содержит содержимое (например, innerHTML) div в качестве его значения при отправке формы.

alt text

person Dagg Nabbit    schedule 05.09.2010

arrow_upward
4
arrow_downward

Текстовое поле не может анализировать HTML - точка. (Любой может поправить меня по этому поводу)

Редакторы WYSIWYG, которые вы видите, не находятся в текстовой области, по крайней мере, не таким же образом. Я предлагаю использовать готовый редактор, такой как TinyMCE или FCK Editor.

person Kerry Jones    schedule 05.09.2010
comment
Интересно, что текстовые поля могут быть как бы «неразборчивыми» HTML. Все, что вы помещаете в них (кроме </textarea>, конечно), будет рассматриваться как буквальное содержимое текстового поля, а не HTML. Сюда входят даже разделы cdata и комментарии html. - person Dagg Nabbit; 05.09.2010

arrow_upward
1
arrow_downward

Текстовое поле не будет анализировать HTML, но с помощью плагина WYSIWYG редактор заменит текстовое поле и предоставит пользователю возможность просматривать и изменять контент. В некоторых редакторах, таких как TinyMCE, вы можете установить для него простой режим и разрешить только основы форматирования (полужирный, курсив, подчеркивание, маркеры и т. Д.), Которые вам интересны. Это помогает избежать загромождения редактора с ненужными инструментами.

Я предлагаю проверить TinyMCE или CKEditor

person Shane Reustle    schedule 05.09.2010