Tinyeditor Простой и простой в использовании html wysiwyg редактор

Несколько дней назад я представил вам внутренний редактор XHTML. Сегодня я хочу порекомендовать вам Tinyeditor. Это простой и простой в использовании HTML Wysiwyg Editor, только что выпущенный Leigeber.com, известным блогом иностранного веб-дизайна.

• Он написан в JavaScript и не зависит от других библиотек
• Это легкий редактор, а файлы, которые следует назвать, всего 8 КБ
• Он может обрабатывать большинство требований к форматированию HTML, а встроенные функции делают сгенерированные теги максимально простыми
• Небольшой значок, используемый в редакторе, использует технологию Sprite CSS, снижая HTTP -соединения
• Тестовый проход в основных браузерах
• Можно использовать в личных или коммерческих проектах, после лицензии Creative Commons

1. Ссылка на файлы JS и CSS, предоставленные TinyEditor в файлах веб -страницы
2. Добавление тегов, требуемых редактором в файл веб -страницы, на самом деле является текстовой обработкой, следующим образом

    <TextAREA ID = стиль ввода = ширина: 400px; Высота: 200px> </textarea>

   Обратите внимание, что длина и ширина, определенные в Textarea, имеют размер редактора.

3. Инициализируйте редактор с помощью сценариев и настройте различные параметры следующим образом:

    new tiny.editor.edit ('editor', {id: 'input', // (обязательно) Idwidth: 584 из Textarea, определенного во втором этапе выше, // (необязательно) Высота ширины редактора: 175, // (необязательно) Reditor Height Cssclass: 'te', // (опциозно ClassRowClass: 'teheader', // (необязательно) Редакция кнопок Line ClassDividerClass: 'tedivider', // (необязательно) Управление стилем кнопок редактора: ['' Bold ',' italic ',' Underline ',' Strikethrough ',' | ',' spipct ',' SuperScript ',' |, ', «Заказан»,', ',', ',', ',', ',', ', «Заказанный список»,', ',', ',', ',' | 'odent', '|', 'LableLign', 'Centerign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlik', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', 'pave' // (Требуется) Добавить элементы управления кнопкой в ​​редактор по мере необходимости, где «| '» представляет собой вертикальную линию разделения между функциональными кнопками, а «n» представляет собой линию разделения между кнопками. XHTML: true, // (необязательно) Редактор генерирует XHTML или HTML TAG CSSFILE: 'style.css', // (необязательно) Внешний файл CSS подключен к контенту редактора: «Начало содержимого», // (Необязательно) Установите начальный контент в области редактора CSS: 'Fool-Fool-Contire: #CC. Редактирование области области фона BodyId: 'Editor', // (необязательно) Установите область редактирования идентификатор идентификатора: 'Tefooter', // (необязательно) Установите редактор нижний classtoggle: {text: 'исходный код', ActiveText: 'Visualization', CSSClass: 'Toggle'}, // (опциозно classResize: {cssclass: 'resize'} // (необязательно) Установить кнопку регулировки размера редактора});

   Можно сказать, что он очень настраивается, а элементы конфигурации относительно ясны.

В фактическом применении TinyEditor следует отметить, что перед отправкой контента редактора функция encess.post () должна быть вызвана для обеспечения того, чтобы последний визуальный контент в области редактирования был преобразован в текст тега.

Пример просмотра: http://sandbox.leigeber.com/tinyeeditor/