Минималистичный WYSIWYG

Теги: полезности, javascript

По многочисленным заявкам трудящихся, поднимаю эту тему. Итак, вы - минималист, и у вас есть сайт. Исходя из вышесказанного, сайт сделан не на 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-элементов, но это уже мало согласуется с изначально поставленной задачей, а следовательно - и с темой статьи.

Для тех, кто хочет более детально изучить это программное решение, могу предложить посетить:

1. Официальный сайт (англ.)
   
2. Примеры с описаниями (англ.)
   
3. Документацию (wiki, англ.)
   

Статьи схожей тематики:

Создание и использование плагинов FCKeditor

Новый плагин для FCKeditor - scaleimages

Документация по FCKeditor JavaScript API

Подключаем к FCKeditor видео с RuTube

FCKeditor и настройка диалогов

Добавить комментарий

RSS сайта

и rss комментариев