IPB 2.2.x: Дополнительные кнопки bb-кода
Редактор, используемый в последних версиях IPB, громоздкий для освоения, кроме того, он целиком связан с java. В статье рассмотрено решение проблемы добавления своих кнопок bb-кода в редактор.
Бывает нужно добавить кнопочки бб-кода в редактор, а как это сделать? Тем более нынешний редактор от ips слишком тяжелый в понимании так к тому же еще и полностью завязан с java.
Вот небольшая статья, о том как добавить на панель редактора свои кнопки, которые будут работать, как в обычном режиме редактора, так и в расширенном (WYSIWYG).
Буду делать все на примере тега [sometag]. И так первое – это открыть ваш дистрибутив форума, и найти там папку development. В ней есть папка с несжатыми скриптами под названием javascript_uncompressed, там нам понадобятся следующие файлы:
./jscripts/ips_text_editor.js
Копируйте их куда-нибудь и откройте в любом редакторе с подсветкой синтаксиса. Не используйте обычный блокнот для редактирования файлов!!!
Начнем с формы быстрого ответа, за нее отвечает файл ips_text_editor_lite.js. Найдем там строки:
* STD:
* IPB code override
*/
this.ipb_code = function()
{
var _text = this.get_selection();
this.wrap_tags( ‘code’, false, _text );
};
Копируем их, и вставим ниже. Т.е. получится что-то вроде этого:
* STD:
* IPB code override
*/
this.ipb_code = function()
{
var _text = this.get_selection();
this.wrap_tags( ‘code’, false, _text );
};
/**
* STD:
* IPB code override
*/
this.ipb_code = function()
{
var _text = this.get_selection();
this.wrap_tags( ‘code’, false, _text );
};
Теперь находим в том, что мы скопировали слова “code” и заменяем их на “sometag”. В итоге у нас получилась вот такая конструкция (вместе со стандартным текстом):
* STD:
* IPB code override
*/
this.ipb_code = function()
{
var _text = this.get_selection();
this.wrap_tags( ‘code’, false, _text );
};
/**
* STD:
* IPB sometag override
*/
this.ipb_sometag = function()
{
var _text = this.get_selection();
this.wrap_tags( ’sometag’, false, _text );
};
На данный момент вы получили полностью рабочую функцию вашей кнопки, можно сразу залить на сайт, однако этот файл слишком большой по объему, и его желательно сжать, как сделали это ips. Весь файл мы естественно сжимать заново не будем, а сожмем лишь новую функцию. И так, берем:
* STD:
* IPB sometag override
*/
this.ipb_sometag = function()
{
var _text = this.get_selection();
this.wrap_tags( ’sometag’, false, _text );
};
И удаляем из нее все пробелы и переводы строк, но не трогаем пробел после слова “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, который мы до этого копировали. И ищем в нем строки:
* STD:
* IPB Quote override
*/
this.ipb_quote = function()
{
this.wrap_tags_lite( ’[quote]‘, ‘[/quote]‘, 0)
};
Опять проделываем операцию копирования и получаем вот это (вместе с тем, что копировали).
* STD:
* IPB Quote override
*/
this.ipb_quote = function()
{
this.wrap_tags_lite( ’[quote]‘, ‘[/quote]‘, 0)
};
/**
* STD:
* IPB Quote override
*/
this.ipb_quote = function()
{
this.wrap_tags_lite( ’[quote]‘, ‘[/quote]‘, 0)
};
Заменяем везде в копии слово “quote” на свой тэг, у меня это “sometag”. И получаем (вместе с исходной функцией):
* STD:
* IPB Quote override
*/
this.ipb_quote = function()
{
this.wrap_tags_lite( ’[quote]‘, ‘[/quote]‘, 0)
};
/**
* STD:
* IPB sometag override
*/
this.ipb_sometag = function()
{
this.wrap_tags_lite( ’[sometag]‘, ‘[/sometag]‘, 0)
};
Далее сжимаем полученное (только в новой функции). Удаляем комментарии, пробелы, переводы строк. У меня получилось вот так:
Теперь открываете файл ./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. Сохраняете шаблон и все. Кнопки присутствуют в обоих формах ответа.
