Еще одно статья, на этот раз с www.bolzamo.org.ru, как понятно из названия посвяшена WYSIWYG.
Кто не знает: WYSIWYG (сокращение от What You See Is What You Get, англ. что видишь, то и получишь, произносится как «ви-зи-виг») — способ редактирования, при котором редактируемый материал в процессе редактирования выглядит в точности так же, как и конечный результат.
По многочисленным заявкам трудящихся, поднимаю эту тему. Итак, вы — минималист, и у вас есть сайт. Исходя из вышесказанного, сайт сделан не на WordPress или Drupal, а на какой-нибудь минималистичной cms вроде Neutrino, или вообще на самописном решении, вес которого — килобайт 100 от силы. Проблемой этого решения становится отсутствие визуального редактора, и вот с ней мы и будем бороться.
Понятно, что подключать туда FCKEditor будет как-то не эстетично ввиду его большого размера(аж полтора мегабайта) и сложности подключения и настройки. Большинство же легковесных WYSIWYG`ов по функциональности явно слабоваты, но все-же встречаются исключения, такие как NicEdit. О нем и поговорим.
NicEdit — это полнофункциональный WYSIWYG-редактор, написанный на JavaSctipt, который в распакованном виде вместе с картинками весит 35 килобайт, а в установке настолько прост, что с ним справится даже ребенок. Его даже не обязательно закачивать себе на сайт, можно подгрузить с сайта производителя.
Касаясь вышеупомянутой CMS Neutrino, плагин для подключения NicEdit уже написан, его нужно просто скачать на странице расширений и установить на сайт.
Если в вашей CMS такого плагина не написано, не проблема, потому что установка действительно проста, а настройка очень гибка. Рассмотрим ее поподробнее.
- Простейший вариант. Подгружаем с сайта разработчика, и конвертируем все textarea в WYSIWYG. Для этого нужно вставить в HTML-код страницы следующий код:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script> - Подключаем NicEdit со своего сайта. Если не хочется, что-то подгружать в свою админку со стороны, или играет роль происхождение трафика, можно скачать скрипт, распаковать себе на сайт, и подключать как в предыдущем примере, с той лишь разницей, что в первой строке аттрибут src должен указывать на ваше местоположение файла nicEdit.js.
- Включение WYSIWYG для отдельных полей ввода. Более сложный вариант настройки. С подключением уже разобрались, оба варианта подключения скрипта работоспособны, и на тюнинг не влияют. А влияет на этот процесс скрипт инициализации, который представлен во второй строке первого примера. Его нам придется заменить.
Итак, чтобы применить NicEdit к отдельному полю ввода, после подгрузки скрипта следует выполнить следующий код:
<script type="text/javascript">new nicEditor().panelInstance('area1');</script>
, где area1 — это ID нашего поля ввода текста. - Включение/выключение NicEdit. Чтобы понять принцип, рассмотрим пример:
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
// подгружаем NicEdit
<script type="text/javascript">
var area1, area2;
function toggleArea1() {
// Функция-переключатель. Включает/выключает NicEdit для textarea#myArea1
if(!area1) {
area1 = new nicEditor({fullPanel : true}).panelInstance(
'myArea1',{hasPanel : true});
} else {
area1.removeInstance('myArea1');
area1 = null;
}
}
function addArea1() {
// Функция-включатель. Включает NicEdit для textarea#myArea1
area1 = new nicEditor({fullPanel : true}).panelInstance('myArea1');
}
function removeArea1() {
// Функция-выключатель. Выключает NicEdit для textarea#myArea1
area1.removeInstance('myArea1');
}
bkLib.onDomLoaded(function() { toggleArea1(); });
// Инициализация.
</script>
Меняем myArea1 на ID нашего поля ввода текста, и получаем набор фукнций, которые можно привязать к кнопкам, ссылкам, или другим событиям. Например, так:
<button onClick="toggleArea1()">NicEdit on/off</button>
<a href="#" onClick="addArea1()">NicEdit On</a>
<a href="#" onClick="removeArea1()">NicEdit Off</a> - Настройка редактора. Переходим к более продвинутому тюнингу. В нижеследующих примерах, подчеркиванием выделены изменяемые параметры. Как уже было сказано выше, для простого подключения NicEdit к textarea#area1 можно использовать такой код:
new nicEditor().panelInstance('area1');
Для настройки редактора мы колдуем с параметрами, передаваемыми nicEditor(). Например, так можно добавить не стандартную, а полную панель инструментов:
new nicEditor({fullPanel : true}).panelInstance('area1');
А чтобы заменить стандартный набор иконок, можно сделать такой финт(предвраительно этот набор иконок разместив по указываемому адресу):
new nicEditor({iconsPath : '../ourNicEditorIcons.gif'}).panelInstance('area1');
Но это все мелочи. Куда полезней и интересней самим опрделить панель инструментов. Чтобы понять, как это делается, рассмотрим следующий пример:
new nicEditor({buttonList : [
'fontSize',
'bold',
'italic',
'underline',
'strikeThrough',
'subscript',
'superscript',
'html',
'image'
]}).panelInstance('area1');
Поле NicEdit изменяет свой вертикальный размер, когда переполняется текстом, не создавая внутренней вертикальной полосы прокрутки. Если же нам надо, чтобы он вел себя в этом отношении как стандартная textarea, можем применить следующий прием:
new nicEditor({maxHeight : 100}).panelInstance('area1');
Также NicEdit имеет и другие возможности, такие как применение собственных стилей, или редактирование содержимого любых html-элементов, но это уже мало согласуется с изначально поставленной задачей, а следовательно — и с темой статьи.