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


27 января 2009, 12:12
№ 1Визуальный редактор
Отличное решине! Правда, например, лично я не буду ставить ;)
Мне удобно отредактировать в ФронтПэйдже и кинуть код в поле для добавления/редактирования статьи.
Ничего сложного, на мой взгляд.
P.S. За смену дизайна - респект! Красиво получилось! Сам рисовал?
27 января 2009, 14:06
№ 2
Да. Решение, как всегда, было на поверхности :) Его нужно было только заметить :)

ФронтПейдж никогда не пользовал и не буду. Если уж юзать редактор, то правильный. Хотя каждый сам выбирает.

Дизайн не сам рисовал. Обновил скрипт движка и за одно платный шаблон от Мастера Горди. Естественно, всё бесплатно.
Lex Nevermind
09 февраля 2009, 14:29
№ 3Визуальный редактор
Умеет этот редактор картинки заливать?
И есть ли скрин, глянуть?
09 февраля 2009, 14:40
№ 4
Да зачем скрин? вот пример: Link

Картинки заливать не умеет, к сожалению :) Редактор очень прост и выполняет только основные функции, однако есть мнение, что их достаточно.
Lex Nevermind
09 февраля 2009, 14:57
№ 5Визуальный редактор
Спасибо.
Просто очень хочется картинки кнопкой заливать.
09 февраля 2009, 16:05
№ 6
Хочется конечно... Подумать над этим надо будет. Может быть и реализуется в будущем. Кстати в виде плагина, легко присоединямого к блогу, редактор можно скачать по следующей ссылке: Link
Lex Nevermind
13 февраля 2009, 04:29
№ 7Заливка картинок
Странно слышать из уст _манимейкера_ фразу "целых 3 уя". Манимейкер - человек, делающий деньги. И если для гуру зарабатывания "целых 3 уя" - это очень огромные дуньги, то так ли гурист этот гуру? Стоит задуматься....
ЗЫ
По теме. Могу подарить всем желающим свой старенький ред. Он не визуальный, кнопки просто вставляют нужные тэги в позицию курсора (или обрамляют выделенный текст). Получается что-то типа помощника по вводу HTML-тэгов (аналогично вставке ВВ-кодов в форумах).
Зато он картинки заливать умеет. :-)
С вопросами и запросами го в форму обратной связи на http://fit-media.com
13 февраля 2009, 10:06
№ 8
Шутку юмора про "цельных 3 уя" не так поняли. Смайлики нужно обязательно ставить чтоли?) Ну да ладно.

Пожалуй, стукну первым :) Очень интересно глянуть на решение.
Lex Nevermind
13 февраля 2009, 15:07
12 марта 2009, 01:28
№ 10
Оброс мой скромный редактор умением заливать картинки и всевозможные файлы... а также оброс иконками и функциями... прошу в демонстрашку Link

Вскоре будет апдейт. Постараюсь завтра выложить. Хочется вылизать. Чтобы потом проблем было поменьше.

Тестируйте.
Lex Nevermind
Адрес заметки: http://lexnevermind.com/post_1232817839.html
Ваш комментарий к статье



cod


Примечание:
Обязательные для заполнения поля помечены карандашом
email при указании не будет опубликован.
Адреса с http:// преобразуются в ссылки автоматически
Для этого отделяйте их от текста ПРОБЕЛАМИ с обеих концов
Теги запрещены

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

январь, 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