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

Еще одно статья, на этот раз с 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>
    <span style="text-decoration: underline;"><em>// подгружаем NicEdit</em></span>
    <script type="text/javascript">
    var area1, area2;
    <strong>function toggleArea1()</strong> {
    <span style="text-decoration: underline;"><em>// Функция-переключатель. Включает/выключает NicEdit для textarea#myArea1</em></span>
      if(!area1) {
        area1 = new nicEditor({fullPanel : true}).panelInstance(
           'myArea1',{hasPanel : true});
      } else {
        area1.removeInstance('myArea1');
        area1 = null;
      }
    }
    <strong>function addArea1()</strong> {
    <span style="text-decoration: underline;"><em>// Функция-включатель. Включает NicEdit для textarea#myArea1</em></span>
      area1 = new nicEditor({fullPanel : true}).panelInstance('myArea1');
    }
    <strong>function removeArea1()</strong> {
    <span style="text-decoration: underline;"><em>// Функция-выключатель. Выключает NicEdit для textarea#myArea1</em></span>
      area1.removeInstance('myArea1');
    }
    bkLib.onDomLoaded(function() { toggleArea1(); });
    <span style="text-decoration: underline;"><em>// Инициализация.</em></span>
    </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('<span style="text-decoration: underline;">area1</span>');
    Для настройки редактора мы колдуем с параметрами, передаваемыми nicEditor (). Например, так можно добавить не стандартную, а полную панель инструментов:
     new nicEditor({fullPanel : true}).panelInstance('<span style="text-decoration: underline;">area1</span>');
    А чтобы заменить стандартный набор иконок, можно сделать такой финт(предвраительно этот набор иконок разместив по указываемому адресу):
     new nicEditor({iconsPath : '<span style="text-decoration: underline;">../ourNicEditorIcons.gif</span>'}).panelInstance('<span style="text-decoration: underline;">area1</span>');
    Но это все мелочи. Куда полезней и интересней самим опрделить панель инструментов. Чтобы понять, как это делается, рассмотрим следующий пример:
     new nicEditor({buttonList : [
      '<span style="text-decoration: underline;">fontSize</span>',
      '<span style="text-decoration: underline;">bold</span>',
      '<span style="text-decoration: underline;">italic</span>',
     '<span style="text-decoration: underline;">underline</span>', '<span style="text-decoration: underline;">strikeThrough</span>', '<span style="text-decoration: underline;">subscript</span>', '<span style="text-decoration: underline;">superscript</span>', '<span style="text-decoration: underline;">html</span>', '<span style="text-decoration: underline;">image</span>'
    ]}).panelInstance('<span style="text-decoration: underline;">area1</span>');

    Поле NicEdit изменяет свой вертикальный размер, когда переполняется текстом, не создавая внутренней вертикальной полосы прокрутки. Если же нам надо, чтобы он вел себя в этом отношении как стандартная textarea, можем применить следующий прием:
     new nicEditor({maxHeight : <span style="text-decoration: underline;">100</span>}).panelInstance('<span style="text-decoration: underline;">area1</span>');

Также NicEdit имеет и другие возможности, такие как применение собственных стилей, или редактирование содержимого любых html-элементов, но это уже мало согласуется с изначально поставленной задачей, а следовательно — и с темой статьи.

Запись навигация

Top