Добавление своих кнопок bb-кода

Добавление своих кнопок bb-кода

Бывает нужно добавить кнопочки бб-кода в редактор, а как это сделать? Тем более нынешний редактор от ips слишком тяжелый в понимании так к тому же еще и полностью завязан с java.

Вот небольшая статья, о том как добавить на панель редактора свои кнопки, которые будут работать, как в обычном режиме редактора, так и в расширенном (WYSIWYG).

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

./jscripts/ips_text_editor_lite.js

./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", а так же закомментированные строки. Удалив это, у вас должно получиться что-то наподобие этого:

this.ipb_sometag=function(){var _text=this.get_selection();this.wrap_tags('sometag',false,_text);};

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

this.ipb_code=function(){var _text=this.get_selection();this.wrap_tags('code',false,_text);};

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

this.ipb_sometag=function(){var _text=this.get_selection();this.wrap_tags('sometag',false,_text);};

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

this.ipb_code=function(){var _text=this.get_selection();this.wrap_tags('code',false,_text);};this.ipb_sometag=function(){var _text=this.get_selection();this.wrap_tags('sometag',false,_text);};

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

<td><div class="rte-normal" id="fast-reply_cmd_ipb_code"><img src="style_images/<#IMG_DIR#>/folder_editor_images/rte-code-button.png"  alt="{$this->ipsclass->lang['js_rte_lite_code']}" title="{$this->ipsclass->lang['js_rte_lite_code']}"></div></td>

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

<td><div class="rte-normal" id="fast-reply_cmd_ipb_sometag"><img src="style_images/<#IMG_DIR#>/folder_editor_images/rte-sometag-button.png"  alt="Some Tag" title="Some Tag"></div></td>

Не забудьте залить картинку в папку 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)
};

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

this.ipb_sometag=function(){this.wrap_tags_lite('[sometag]','[/sometag]',0)};

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

this.ipb_quote=function(){this.wrap_tags_lite('[quote]','[/quote]',0)};

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

this.ipb_sometag=function(){this.wrap_tags_lite('[sometag]','[/sometag]',0)};

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

this.ipb_quote=function(){this.wrap_tags_lite('[quote]','[/quote]',0)};this.ipb_sometag=function(){this.wrap_tags_lite('[sometag]','[/sometag]',0)};

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

<td><div class="rte-normal" id="{$editor_id}_cmd_ipb_code"><img src="{$images_path}rte-code-button.png"  alt="{$this->ipsclass->lang['js_rte_lite_code']}" title="{$this->ipsclass->lang['js_rte_lite_code']}"></div></td>

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

<td><div class="rte-normal" id="{$editor_id}_cmd_ipb_sometag"><img src="{$images_path}rte-sometag-button.png"  alt="Some tag" title="Some tag"></div></td>

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