Добавление своих кнопок bb-кода - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Владелец

Информация о файле

  • Дата размещения: Июн 07 2007 01:09
  • Обновлен: Июл 04 2010 10:13
  • Размер файла: Неизвестно
  • Просмотров: 12011
  • Загрузок: 16

Предыдущие версии

  • 07 Июл 2007 Скачать Добавление своих кнопок bb-кода

Скачать Добавление своих кнопок 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/ipbskins/folder_editor_images/, где ipbskins это папка со всеми изображениями вашего стиля, с названием, которое вы указали, у меня это 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/ipbskins/folder_editor_images/, где ipbskins это папка со всеми изображениями вашего стиля, с названием, которое вы указали, у меня это rte-sometag-button.png. Сохраняете шаблон и все. Кнопки присутствуют в обоих формах ответа.






Это нравится Vigmy и Alirus

1 – число отзывов

Полезная информация была в своё время когда у меня был IPB 2.3.6

Можно ли такую же подробную информацию написать и для IPB 3.3.4? Через редактор добавить не проблема, а вот как добавить без редактора и поменянь там всё. Вот это было бы отлично...
1
Страница 1 из 1

Случайные файлы


Статистика загрузок

Всего файлов
266
Всего категорий
36
Всего владельцев
39
Всего скачиваний
49 028
Последнее обновление
(SIV34) Mobile Online Status от siv1987 » (сегодня, 11:39 )

0 посетителей за последние 15 минут
0 гостей, 0 скрытых пользователей


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна