Редактор, используемый в последних версиях IPB, громоздкий для освоения, кроме того, он целиком связан с java. В статье рассмотрено решение проблемы добавления своих кнопок 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. Сохраняете шаблон и все. Кнопки присутствуют в обоих формах ответа.

Теги: ,

Комментарии (15) on IPB 2.2.x–2.3.x: Дополнительные кнопки bb-кода

  1. Это вроде все понятно. Но у меня такая проблема. Я добавил дополнительный бб-код в админке [download]тут ссылка[/download], который вместо текстовой ссылки выводит картинку. Также я добавил кнопку на панель редактора. Весь вопрос в том, как привязать нажатие кнопки к этому бб-коду. Уже все излазил, а ответа найти не могу. Если сможете, помогите пожалуйста.

  2. andaril:

    Вы статью читали?
    Меняете sometag на download

    не вижу проблем

  3. DarthNox:

    спасибо, очень полезная статья

  4. Misaki:

    Спасибо! Весь интернет перерыла в поисках этого для спойлера и наконец нашла))

  5. Adid:

    Слушайте, упарился, ну ни в какую не пашет.
    Кнопочка появляется в понелях быстрого и полного ответа, но они не пашут, как на неё не жми — ничего не появляется.
    Панелька быстрого ответа начала благополучно вообще переставла реагировать на все мои двежения, то есть теперь хоть жми на кнопку B (Bold) — ничего не произойдет…

    Не знаю чего придумать, и почему не пашут кнопки((

  6. andaril:

    Ну как бы у всех работает у вас нет. Странно, прям вас дескриминируют. А если серьезно, значит, что вы что-то делаете не так. :)

  7. Dmitry:

    Так же ничего не работает. Кнопки есть а не нажимаются..

  8. Vadim:

    А если подобная статья для IPB3. Мне просто нужно сделать так что когда вводили в каком-то теге ссылку она обрабатывалась моим скриптом и отдавала нужный html код для отображения.

  9. К сожалению, подобной статьи пока нет.

  10. bat:

    Вот спасибочки, как раз надо было ))) буду сейчас ставить )

  11. bat:

    что-то тут недоговаривается…

    можно посмотреть на весь код файла ips_text_editor_lite.js, в котором уcтановлено более одной дополнительной кнопки???

    а то у меня при его корректировке вообще все кнопки отключаются.

  12. bat:

    Разобрался в чем дело!!! в названии тега нельзя вводить дефис «-» !!!
    Без дефиса все пашет )))

  13. Самое интересное, что многие справочные статьи рекомендуют дефис, а с подобными глюками тоже сталкивался и токо счас понял… :)

  14. Это все делается намного проще — Управление — Дополнительный BB коды — Добавить.

    У меня вопрос. По вставке кода у меня не закрывается панель с дополнительными кодами, не по кнопки добавить не по отмене. Никак не могу отловить где этот баг

  15. Автор не поддерживает эту запись. Если есть вопросы, лучше спросите на форуме.

Добавить комментарий

*

Для предотвращения автоматического заполнения, пожалуйста, выполните задание, приведенное рядом.