IPB в Рунете | Помощь по форуму на движке IP.Board
RSS иконка Домашняя иконка

  • IPB 2.2.x–2.3.x: Дополнительные кнопки bb-кода

    Написано Июнь 8th, 2007 andaril 12 комментариев

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

    Google Bookmarks Digg Reddit del.icio.us Ma.gnolia Technorati News2.ru 2focus.org БобрДобр.ru RUmarkz Ваау! Memori.ru МоёМесто.ru Mister Wong Яндекс Закладки
    Модификации IPB, Разработка, Технические вопросы ,

     

    12 responses to “IPB 2.2.x–2.3.x: Дополнительные кнопки bb-кода” RSS иконка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    Оставить реплику

    This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)

    Впишите в строку 5 символов с картинки, содержащей цифры от 0 до 9, а также латинские буквы от A до F, и нажмите кнопку "Отправить".

      

    Я не могу прочесть символы на картинке. Пожалуйста, сгенерируйте

Лучший хостинг для IPB

Работает на WordPress | Дизайн My Mobiles | Поддержка – IPB Skins Team
При копировании материалов прямая ссылка на ipb-ru.net обязательна.