Mootools WYSIWYM редактор
Mootools
- Содержание
NAWTE - это класс, который поможет создать ваш собственный WYSIWYM редактор. Класс позволяет без труда настроить редактор под себя. Необходимо добавить требуемые функции методом addFunction. Эта функция имеет три параметра. Первый добавит кнопку в ваш toolbar, второй содержит функцию, которая выполнит соответствующее изменение в текстовом поле, третий содержит атрибуты элемента тулбара. При этом nawte не зависит от языка разметки. Можно использовать html, bbcode или придумать свою собственную.
Данный класс я использовал для вставки bbcode в комментарии. К примеру
nawte.addFunction('Bold', function() {
selection = this.getSelection();
this.replaceSelection('[В]' + selection + '[/В]');
}, {'text': 'B'});
Метод добавит в тулбар кнопку с текстом 'B'. При нажатии на кнопку выделенный текст окаймляется тегами '[В]', '[/В]'.
Для вставки списка используются дополнительные методы wrapSelection, insertBefore, insertAfter, replaceSelection, processEachLine содержат параметр isLast. По умолчанию параметр равен true, установка его false означает, что за текущим изменением будут следовать другие. Разобраться в этом поможет пример.
// Создаем экземпляр класса
// thetext - текстовое поле
// toolbar - панель
nawte = new nawte('thetext', 'toolbar');
// Добавим кнопку "List", которая будет создавать список из выделенных строк
// или новый список, если текст не выделен
nawte.addFunction("list", function() {
selection = this.getSelection();
if (selection == "") {
this.replaceSelection("<ul>\n
<li>Item 1</li>\n
<li>...</li>\n</ul>");
}
else {
this.processEachLine(function(line) {
newline = "<li>" + line + "</li>";
return newline;
}, false);
this.insertBefore("<ul>\n", false);
this.insertAfter("\n</ul>", true);
}
});
Пример с разметкой BBCode.
Скачать класс для версии Mootools 1.1 и для 1.2.
Примеры с другими языками разметки Вы можете найти в источнике. Там же более подробное описание класса.
Понравилась статья? Подпишись на RSS.
Комментарии
Нужно будет детальнее ознакомиться с этим классом, пригодится. Спасибо, не слышал о NAWTE. Не так давно я использовал MooEditable — простенький WYSIWYG редактор на базе Mootools. В общем также неплохой.
ОтветитьМусор. Да, за ними такое замечают :) Понятно, что нужно разумно подходить к использованию WYSIWYG редактора. И не вставлять его там, где без него можно обойтись. Но, если принять во внимание, тот факт, что потенциальный пользователь не должен знать HTML или понимать, как работает BBCode, то … Скажем для вставки комментариев, отзывов, для написания новости неопытными пользователями без WYSIWYG редактора трудно обойтись.
ОтветитьMooEditable хорош, но как и все WYSIWYG редакторы вставляют мусор после копирования с других мест. Прикрутить к NAWTE функцию просмотра и цены ему не будет.
Ответить