Описание плагина jquery.bbcode

Подключение

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

Для этого необходимо выполнить следующие действия. Скачать архив с плагином и загрузить содержимое архива на сайт, затем подключить плагин (файл jquery.bbcode.js) на страницу, на которой вы планируете использовать BB редактор.

1

<script src='/cms/js/jquery.bbcode.js' type='text/javascript'></script>

Далее на странице необходимо разместить элемент textarea, в котором будет происходить редактирование. Данный элемент может иметь любые атрибуты, обязательным является только атрибут id ,по которому плагин идентифицирует элемент. В моем примере id элемента "user_text". После этого остается только подключить плагин к элементу.

1
2
3
4
5

<script type="text/javascript">
  $(document).ready(function(){
    $("#user_text").bbcode();
  });
</script>

Результат вы можете посмотреть на странице примера.

Настройки.

Плагин принимает следующие праметры:

teg_bold - показывать или нет кнопку "жирный текст" (true|false по умолчанию true)

teg_italic - показывать или нет кнопку "Курсив" (true|false по умолчанию true)

teg_underline - показывать или нет кнопку "Подчеркнутый" (true|false по умолчанию true)

teg_linck - показывать или нет кнопку "Ссылка" (true|false по умолчанию true)

teg_image - показывать или нет кнопку "Картинка" (true|false по умолчанию false)

button_image - отображать кнопки текстовыми или графическими (true|false по умолчанию true) - будут использованы картинки

image_url - путь до графических кнопок. По умолчанию используется путь - '/cms/bbimage/'

Далее привожу пример вызова плагина с параметрами:

1
2
3
4
5

<script type="text/javascript">
  $(document).ready(function(){
    $("#user_text").bbcode({teg_image:true,button_image:false});
  });
</script>

В этом примере на панель кнопок будет добавлена кнопка «загрузить картинку», и кнопки станут текстовыми.

Стили отображения:

После запуска плагина, поле textarea становится дивом, и принимает следующий вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="bbcode_container">
  <div id="bbcode_bb_bar">
    <a href="#" alt="b" title="">
      <img src="/cms/bbimage/bold.png">
    </a>
    <a href="#" alt="i" title="">
      <img src="/cms/bbimage/italic.png">
    </a>
    <a href="#" alt="u" title="">
      <img src="/cms/bbimage/underline.png">
    </a>
    <a href="#" alt='a[href=""]' title="">
      <img src="/cms/bbimage/linck.png">
    </a>
  </div>
  <textarea id="user_text" name="test"></textarea>
</div>

Для изменения внешнего вида необходимо указать стили для:

#bbcode_container – контейнер, в который помещается textarea и панель инструментов

#bbcode_bb_bar - панель кнопок редактора

#bbcode_bb_bar a – ссылка, которая является кнопкой редактора

Передача на сервер

Так как плагин редактора, ничего не меняет в структуре страницы, только оборачивает textarea в div для привязки панели кнопок и не более, отправка информации на сервер вполне может осуществляться обычной формой, или иным другим способом (самописный AJAX, плагин Form для Jquery)? в общем, на ваше усмотрение!

Обработка информации на сервере

Для конвертации из bb-кодов в html используеться класс bbParser, который входит в архив с плагином (естественно можно использовать и любой другой).

В приведенном примере textarea имеет атрибут name - "test" соответственно и информация на сервере будет находиться в переменной $_POST['test']

Пример использования php класса:

1
2
3
4
5

<?php
  $parser = new bbParser();
  $text = $parser->getHtml($_POST['test']);
  //  В переменной $text находится уже преобразованный в HTML текст.
?>

На этом можно закончить описание плагина.