Описание файла
Добавление своих кнопок 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. Сохраняете шаблон и все. Кнопки присутствуют в обоих формах ответа.
Изменения в версии 07/04/10 07:14 Просмотреть список изменений
Выпущена
Список изменений в этой версии не указан.
Рекомендованные комментарии