BUEditor - редактор для Lasto-блог

Мало пишу в последнее время, ибо времени практически не бывает. Вот и сейчас, решил написать в блог, потому как заболел и конкретными делами заниматься лень. Постараюсь исправиться в будущем. Тем более материала накопилось вдоволь.

В последнее время довольно часто поднимается вопрос визуального редактора для блога на движке Вадима Ласто. Пару решений уже описывались ранее. Автор fit-media.com предложил решение на основе внедрения в блог редактора FKCeditor и даже выставил это решение на продажу за цельных 3 уя. Также в комментариях блога Мастера Ласто некто Олег описал реализацию внедрения редактора SPAW.

Заинтересовался я этим вопросом уже давно, однако надобности в редакторе для самого себя я не видел, да и заниматься этим было лениво. Поэтому долго не приступал к изучению вопроса. Главными критериями при поиске решения были лёгкость реализации, использования и невесомость редактора. Например, чтобы внедрить SPAW Олег предлагал редактировать файл design.php в ситуации залогиненности. Это всё-таки не совсем корректно. Зачем редактировать весь шаблон ради одной страницы? А также почти все визуальные редакторы довольно громоздки. От самого известного, TinyMCE, меня, к примеру, вообще тошнит. Очень уж тормозит.

И решение было найдено. Простое и эффективное. Реализовать его может даже совершенно несведущий в программинге и вёрстке человек.

Итак, к делу. Мы используем для своих целей редактор BUEditor. Есть такой отличный модуль для CMS Drupal. Самостоятельного редактора BUEditor не существует. Это именно модуль, написанный специально под Drupal. Однако мы его всё же используем в наших целях.

Ахтунг! Далее последует подробная инструкция по установке BUEditor на Lasto-блог. Сразу скажу, что это работает. На данном блоге стоит этот редактор и именно этот пост редактируется уже с его помощью, а не руками или в Дримвивере.

Вначале качаем папку bueditor [] и закидываем её в корень вашего блога. Именно в корень ложить в принципе не обязательно, но дальнейшие пояснения будут касаться именно такой ситуации.

В папке находятся такие файлы:

  • В папке icons лежат графические кнопки для редактора
  • В папке library находится файл с основными функциями редактора
  • bueditor.css - файл, отвечающий за визуальное оформление редактора
  • bueditor.js - собственно сам редактор

Далее идём в папку data/tpl/template/ и редактируем файл post_form.php. Это собственно самое важное.

Вставляем такие строки:

<style type="text/css" media="all">@import "$turl/bueditor/bueditor.css";</style>

Подключение таблицы стилей для визуального отображения редактора


<script type="text/javascript" src="$turl/bueditor/bueditor.js"></script>

Подключение редактора


<script type="text/javascript" src="$turl/bueditor/library/default_buttons_functions.js"></script>

Подключение основных функций редактора


<script type="text/javascript">
editor.path = '$turl/bueditor/';
editor.buttons = [
['Bold', '<strong>%TEXT%</strong>', 'b.png', 'B'], //Bold
['Italic', '<em>%TEXT%</em>', 'i.png', 'I'], //Italic
['Preview', 'js: eDefPreview();', 'preview.png', 'P'] //Preview
];</script>

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


Кнопки описываются как ['название', 'функция', 'изображение или текст', 'быстрая кнопка']. Быстрые клавиши работают не во всех браузерах. В IE сработает комбинация Alt + Key, а в FireFox: Alt + Shift + Key. Одним из плюсов данного редактора является именно то, что вы сами можете задавать нужные кнопки.

И последний шаг. Нужно присвоить текстовой области класс editor-textarea.

Пример реализации редактора на обычной html страничке можно лицезреть воочию здесь. Там же прописаны основные кнопки. Можете забирать и использовать по своему усмотрению.

Итак, что мы имеем в итоге. Во-первых, лёгкий простенький редактор, который умеет показать результат ваших трудов (функция preview присутсвует в примере), а также напомнить значения кнопок нерадивому блоггеру (функция help также присутсвует в примере). Во-вторых, безспорная простота внедрения. Требуется всего лишь подключить пару файлов, задать кнопки и присвоить класс текстовой области. При этом не нужно править сам шаблон.

Надеюсь, подобная статья кому-либо пригодится. Возможно, в будущем получится модернизировать редактор, а пока я откланяюсь. Дела, дела, дела.

UPDATE: Редактор BUEditor обновлён. Подробности по линку.

Интересно, что будет дальше? Подпишись на RSS




Page: 01 02 03 04 05 06 07 08 09 10 11
Fast: 10 20

Рейтинг популярности заметок:

январь, 2009
пн вт ср чт пт сб вс
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31