IPB 2.2.x–2.3.x: Дополнительные кнопки bb-кода

Редактор, используемый в последних версиях IPB, громоздкий для освоения, кроме того, он целиком связан с java. В статье рассмотрено решение проблемы добавления своих кнопок bb-кода в редактор.

Бывает нужно добавить кнопочки бб-кода в редактор, а как это сделать? Тем более нынешний редактор от ips слишком тяжелый в понимании так к тому же еще и полностью завязан с java.
Вот небольшая статья, о том как добавить на панель редактора свои кнопки, которые будут работать, как в обычном режиме редактора, так и в расширенном (WYSIWYG).
Буду делать все на примере тега [sometag]. И так первое – это открыть ваш дистрибутив форума, и найти там папку development. В ней есть папка с несжатыми скриптами под названием javascript_uncompressed, там нам понадобятся следующие файлы:

Копируйте их куда-нибудь и откройте в любом редакторе с подсветкой синтаксиса. Не используйте обычный блокнот для редактирования файлов!!!
Начнем с формы быстрого ответа, за нее отвечает файл ips_text_editor_lite.js. Найдем там строки:

Копируем их, и вставим ниже. Т.е. получится что-то вроде этого:

Теперь находим в том, что мы скопировали слова “code” и заменяем их на “sometag”. В итоге у нас получилась вот такая конструкция (вместе со стандартным текстом):

На данный момент вы получили полностью рабочую функцию вашей кнопки, можно сразу залить на сайт, однако этот файл слишком большой по объему, и его желательно сжать, как сделали это ips. Весь файл мы естественно сжимать заново не будем, а сожмем лишь новую функцию. И так, берем:

И удаляем из нее все пробелы и переводы строк, но не трогаем пробел после слова “var”, а так же закомментированные строки. Удалив это, у вас должно получиться что-то наподобие этого:

Вот вы и сжали функцию. Теперь открываете файл ./jscripts/ips_text_editor_lite.js в папке с вашим форумом, предварительно сделав резервную копию. B находите в нем такую конструкцию:

И вставляете после нее вашу сжатую функцию, у меня это sometag:

И в итоге получится вот такая длинная строка

Сохраняем. Далее идем в стили, выбираем в опциях стиля “редактировать html фрагменты” (Edit template html) Далее в строке поиска шаблона пишем “quick_reply_box_open (skin_topic)” (без кавычек), нажимаете найти, и у вас появится этот фрагмент. В нем ищете

Копируете этот текст и ниже вставляете его же, только заменяя {$this->ipsclass->lang['js_rte_lite_code']} на ваше название кнопки, в моем случае это “Some Tag”. И заменяете везде слово code на ваш тэг, у меня sometag. В итоге получится вот такая измененная строка

Не забудьте залить картинку в папку style_images/<#IMG_DIR#>/folder_editor_images/, где <#IMG_DIR#> это папка со всеми изображениями вашего стиля, с названием, которое вы указали, у меня это rte-sometag-button.png. Сохраняете шаблон и все. Кнопка в быстром ответе готова.

Теперь кнопка в форме расширенного ответа. В принципе делать будем по аналогии, разве, что функции чуток отличаются.
И так, открываем ваш несжатый файл ips_text_editor.js, который мы до этого копировали. И ищем в нем строки:

Опять проделываем операцию копирования и получаем вот это (вместе с тем, что копировали).

Заменяем везде в копии слово “quote” на свой тэг, у меня это “sometag”. И получаем (вместе с исходной функцией):

Далее сжимаем полученное (только в новой функции). Удаляем комментарии, пробелы, переводы строк. У меня получилось вот так:

Теперь открываете файл ./jscripts/ips_text_editor_lite.js в папке с вашим форумом, предварительно сделав резервную копию, и добавляете после

Вашу функцию бб кода:

И в итоге получаем вот такую строку:

Сохраняем, и опять заходим в стили. На этот раз набираем в поиске “ips_editor (skin_editors)” (без кавычек). Находим в появившемся шаблоне строки:

Копируете этот текст и ниже вставляете его же, только заменяя {$this->ipsclass->lang['js_rte_lite_code']} на ваше название кнопки, в моем случае это “Some Tag”. И заменяете везде слово code на ваш тэг, у меня sometag. В итоге получится вот такая измененная строка

Не забудьте залить картинку в папку style_images/<#IMG_DIR#>/folder_editor_images/, где <#IMG_DIR#> это папка со всеми изображениями вашего стиля, с названием, которое вы указали, у меня это rte-sometag-button.png. Сохраняете шаблон и все. Кнопки присутствуют в обоих формах ответа.