Добавляем свои кнопки в быстрые и расширенные формы в CKEditor в vBulletin 4.1.4

06-21-2011, 12:25 AM

Решение:

После обновления на 4.1.4 доп тег хайда обрабатывается, но кнопок вставки тега нет. При добавлении доп тега говорит "такой тег уже существует", добавить не дает. Также стоит задача добавить кнопку тега в быстрый ответ и в быстрое редактирование.

1. Открываем файл images/editor/sprite.png в проге редактирования, допустим в Paint.Net
2. Выделяем все, копируем, создаем новый лист и ширину увеличиваем на 50 пикселей
3. В конце дорисовываем наш значек, все белые области надо стереть.
4. Заливаем нашу картинку обратно на хостинг
5. Заходим в админку воблы, Языки и фразы, управление фразами, добавить фразу:
тип фраз
Posting

продукт
vBulletin

имя
wrap_hide_tags

текст
Wrap [HIDE] tags around selected text

текст на русском
Вставить BB код [HIDE] вокруг выделенного текста

6. открываем файл vb/ckeditor.php
7. находим

PHP Code:


			
        $this->config['vbulletin']['phrase'] = array(
            'attachments'                                   => $this->vbphrase['attachments'],
            'wrap_quote_tags'                               => $this->vbphrase['wrap_quote_tags'],
            'wrap_html_tags'                                => $this->vbphrase['wrap_html_tags'],
            'wrap_php_tags'                                 => $this->vbphrase['wrap_php_tags'],
            'wrap_code_tags'                                => $this->vbphrase['wrap_code_tags'],
            'wrap_x_tags'                                   => $this->vbphrase['wrap_x_tags'],
            'enter_tag_option'                              => $this->vbphrase['enter_tag_option'],
            'enter_video_url_below'                         => $this->vbphrase['enter_video_url_below'],
            'example_video_url'                             => $this->vbphrase['example_video_url'],
            'insert_video'                                  => $this->vbphrase['insert_video'],
            'insert_video_clip'                             => $this->vbphrase['insert_video_clip'],
            'supported_videos'                              => $this->vbphrase['supported_videos'],
            'insert_preview_break'                          => $this->vbphrase['insert_preview_break'],
            'insert_page_break'                             => $this->vbphrase['insert_page_break'],
            'this_message_already_contains_a_preview_break' => $this->vbphrase['this_message_already_contains_a_preview_break'],
            'switch_editor_mode'                            => $this->vbphrase['switch_editor_mode'],
            'enter_link_url'                                => $this->vbphrase['enter_link_url'],
            'enter_list_item'                               => $this->vbphrase['enter_list_item'],
            'iespell_not_installed'                            => $this->vbphrase['iespell_not_installed'],
        );

8. Добавляем в массив

PHP Code:


			
            'wrap_hide_tags'                               => $this->vbphrase['wrap_hide_tags'],

чтобы получилось:

PHP Code:


			
        $this->config['vbulletin']['phrase'] = array(
            'attachments'                                   => $this->vbphrase['attachments'],
            'wrap_quote_tags'                               => $this->vbphrase['wrap_quote_tags'],
            'wrap_html_tags'                                => $this->vbphrase['wrap_html_tags'],
            'wrap_php_tags'                                 => $this->vbphrase['wrap_php_tags'],
            'wrap_code_tags'                                => $this->vbphrase['wrap_code_tags'],
            'wrap_x_tags'                                   => $this->vbphrase['wrap_x_tags'],
            'enter_tag_option'                              => $this->vbphrase['enter_tag_option'],
            'enter_video_url_below'                         => $this->vbphrase['enter_video_url_below'],
            'example_video_url'                             => $this->vbphrase['example_video_url'],
            'insert_video'                                  => $this->vbphrase['insert_video'],
            'insert_video_clip'                             => $this->vbphrase['insert_video_clip'],
            'supported_videos'                              => $this->vbphrase['supported_videos'],
            'insert_preview_break'                          => $this->vbphrase['insert_preview_break'],
            'insert_page_break'                             => $this->vbphrase['insert_page_break'],
            'this_message_already_contains_a_preview_break' => $this->vbphrase['this_message_already_contains_a_preview_break'],
            'switch_editor_mode'                            => $this->vbphrase['switch_editor_mode'],
            'enter_link_url'                                => $this->vbphrase['enter_link_url'],
            'enter_list_item'                               => $this->vbphrase['enter_list_item'],
            'iespell_not_installed'                            => $this->vbphrase['iespell_not_installed'],
            'wrap_hide_tags'                               => $this->vbphrase['wrap_hide_tags'],
        );

9. В том же файле ниже находим:

PHP Code:


			
    protected function setToolbar($toolbartype)
    {
        $toolbar = array();
        $iespell = (is_browser('ie') AND !is_browser('ie64bit') AND !is_browser('mac'));
        $justify = (vB::$vbulletin->stylevars['textdirection']['string'] == 'ltr' ? array('JustifyLeft', 'JustifyCenter', 'JustifyRight') : array('JustifyRight', 'JustifyCenter', 'JustifyLeft'));
        if ($this->editor_type == 'qr')
        {
            $toolbar[] = array('RemoveFormat', '-', 'Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Link', 'Email', 'Unlink', 'Image', 'Video', '-', 'Quote');
            if ($iespell)
            {
                $toolbar[] = array('iespell');
            }
            $this->config['toolbar'] = $toolbar;
        }
        else if ($this->editor_type == 'qr_small')
        {
            $toolbar[] = array('RemoveFormat', '-', 'Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Link', 'Email', 'Unlink', 'Image', 'Video');
            if ($iespell)
            {
                $toolbar[] = array('iespell');
            }
            $this->config['toolbar'] = $toolbar;
        }
        else if ($this->editor_type == 'qe')
        {
            $toolbar[] = array('RemoveFormat', '-', 'Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Link', 'Email', 'Unlink', 'Image', 'Video', '-', 'Quote');
            if ($iespell)
            {
                $toolbar[] = array('iespell');
            }
            $this->config['toolbar'] = $toolbar;
        }
        else if ($this->editor_type == 'cms_article')
        {
            $toolbar[] = array('RemoveFormat', '-', 'PasteFromWord', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Attach', '-', 'Undo', 'Redo');
            if ($iespell)
            {
                $toolbar[] = array('iespell');
            }
            $toolbar[] = '/';
            $toolbar[] = array('Bold', 'Italic', 'Underline');
            $toolbar[] = $justify;
            $toolbar[] = array('NumberedList', 'BulletedList', 'Outdent', 'Indent');
            $toolbar[] = array('Link', 'Email', 'Unlink', 'Image', 'Video');
            $toolbar[] = array('Quote');
            $toolbar[] = array('Code', 'Html', 'Php');
            $toolbar[] = '/';
            $toolbar[] = array('Table', 'TableProperties', 'DeleteTable', '-', 'InsertRowBefore', 'InsertRowAfter', 'DeleteRow', '-', 'InsertColumnBefore', 'InsertColumnAfter', 'DeleteColumn', '-', 'Subscript', 'Superscript', 'HorizontalRule', 'PageBreak', 'PreviewBreak');

            $this->config['toolbar'] = $toolbar;
            $this->addCustomToolbarButtons();
        }
        else
        {
            $toolbar[] = array('RemoveFormat', '-', 'PasteFromWord', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Attach', '-', 'Undo', 'Redo');
            if ($iespell)
            {
                $toolbar[] = array('iespell');
            }
            $toolbar[] = '/';
            $toolbar[] = array('Bold', 'Italic', 'Underline');
            $toolbar[] = $justify;
            $toolbar[] = array('NumberedList', 'BulletedList', 'Outdent', 'Indent');
            $toolbar[] = array('Link', 'Email', 'Unlink', 'Image', 'Video');
            $toolbar[] = array('Quote');
            $toolbar[] = array('Code', 'Html', 'Php');
            $toolbar[] = '/';
            $toolbar[] = array('Table', 'TableProperties', 'DeleteTable', '-', 'InsertRowBefore', 'InsertRowAfter', 'DeleteRow', '-', 'InsertColumnBefore', 'InsertColumnAfter', 'DeleteColumn', '-', 'Subscript', 'Superscript', 'HorizontalRule');
            
            $this->config['toolbar'] = $toolbar;
            $this->addCustomToolbarButtons();
        }

Это "макет" расположения кнопок. Соответственно
if ($this->editor_type == 'qr') - это быстрый ответ
else if ($this->editor_type == 'qe') - это быстрое редактирование
else - это расширенный режим.
10. Перед
$this->config['toolbar'] = $toolbar;
в быстром ответе, быстром редактировании и расширенном режиме добавляем
$toolbar[] = array('Hide');
Также при необходимости вы можете скопировать в быстрые редактирование и ответ
$this->addCustomToolbarButtons();
после $this->config['toolbar'] = $toolbar; - тогда у вас и в быстрых редактированиях будут выводиться на панели теги, которые вы добавили в админке воблы вручную (так они выводятся только в расширенном режиме)

11. Открываем файл clientscript/ckeditor/ckeditor.js
находим

Code:

{m.addCommand(w,{exec:function(y){}});m.ui.addButton(w,{label:x,command:w});},n=m.config.vbulletin.phrase;o('Quote',n.wrap_quote_tags,'QUOTE');o('Code',n.wrap_code_tags,'CODE');o('Html',n.wrap_html_tags,'HTML');o('Php',n.wrap_php_tags,'PHP');p('PreviewBreak',n.insert_preview_break,'PRBREAK');q('PageBreak',n.insert_page_break,'PAGE');r('iespell',m.lang.vbulletin.spell_check);s('Email',m.lang.vbulletin.email);for(var t in m.config.vbulletin.bbcodecache){var u=m.config.vbulletin.bbcodecache[t],v=u.buttonimage;if(v.indexOf(':/')==-1&&v.indexOf('/')!==0)v=m.config.baseHref+v;o(u.title,n.wrap_x_tags.replace(/\%1\$s/,u.bbcodetag),u.bbcodetag.toUpperCase(),u.twoparams,v);}}});(function(){j.add('videotag',{init:function(m){var n='videotag';a.dialog.add(n,m.config.vbPluginPath+'videotag/dialogs/videotag.js?v='+SIMPLEVERSION);m.addCommand(n,new a.dialogCommand(n));m.ui.addButton('Video',{label:m.config.vbulletin.phrase.insert_video,command:n});}});})();(function(){j.add('tablebuttons',{requires:['tabletools'],init:function(m){var n=m.lang.table;

Добавляем после

Code:

o('Php',n.wrap_php_tags,'PHP');

следующее

Code:

o('Hide',n.wrap_hide_tags,'HIDE',1);

Четвертый параметр 1 говорит о том, что при нажатии будет спрашивать опцию тега.

12. Идем опять в админку, стили и шаблоны, управление стилями, редактировать шаблоны, additional.css, добавляем в него:

HTML Code:

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Hide .cke_icon
{
	background-position: -2484px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_Hide .cke_icon_image
{
	left: -2484px;
}

Тут можете отцентровать чтобы точно картинка на кнопку накладывалась.

Это все.

Если кто-то знает где находится editor_custom_toolbar_loop из текста что ниже файла vb/ckeditor.php

PHP Code:


			
    protected function addCustomToolbarButtons()
    {
        $rows = count($this->config['toolbar']);
        $custom = array();
        if (vB::$vbulletin->bbcodecache !== null AND $this->show['custom_bbcode'])
        {
            foreach (vB::$vbulletin->bbcodecache as $bbcode)
            {
                if ($bbcode['buttonimage'])
                {
                    $custom[] = $bbcode['title'];
                }
            }

            if (count($custom) > 0)
            {
                $this->config['toolbar'][$rows - 1][] = '-';
                foreach($custom as $title)
                {
                    $handled = false;
                    ($hook = vBulletinHook::fetch_hook('editor_custom_toolbar_loop')) ? eval($hook) : false;

                    if (!$handled)
                    {
                        $this->config['toolbar'][$rows - 1][] = $title;
                    }
                }
            }

        }
    }

То все это можно я думаю сделать проще использую встроенные функции добавления кнопок бб кодов, созданных в админке. Думаю тут все в одном месте можно будет указать + использовать отдельную картинку а не добавлять в тот файл sprite.png. Но с этим я не разобрался(

fagediba добавил 20.06.2011 в 23:25
Также там явная беда с тегом IMG

Я сделал так:

Там где про хайд добавляли добавляем:
o('Image1',n.wrap_img_tags,'IMG');

В файле cke_editor.php в макете меняем все Image на Image1
Там же добавляем фразу
'wrap_img_tags' => $this->vbphrase['wrap_img_tags'],

В админке создаем значение соответствующей фразы

В стили ксс добавляем

HTML Code:

.cke_skin_kama span:not(.cke_browser_ie) .cke_button_Image1 .cke_icon, .cke_skin_kama span:not(.cke_browser_ie) .cke_button_vbimage .cke_icon
{
	background-position: -747px 0;
}
.cke_skin_kama .cke_browser_ie .cke_button_Image1 .cke_icon_image, .cke_skin_kama .cke_browser_ie .cke_button_vbimage .cke_icon_image
{
	left: -747px;
}

И получаем нормальную привычную кнопку вставки тега IMG

п.с. очень надеюсь что в версии 4.1.5 этого всего делать повторно не придется и они сделают все нормально.

07-06-2011, 11:50 PM

Для совсем новичков
На орге появился мод для 4.1.4, который избавляет от необходимости править шаблоны, добавляет смайлы в быстрый ответ (колонка справа) и делает вместо 3-х строк иконок - 2. Так же можно изменить цвет бекграунда редактора.
Автор запретил перевод и перепост без его разрешения, поэтому просто ссылка.

07-06-2011, 11:56 PM

Quote:

Originally Posted by Gecuba

Автор запретил перевод и перепост без его разрешения

что за бред?

ну я понимаю, репост на других ресурсах, но перевод то тут при чем?

07-07-2011, 12:21 AM

Ню... не знаю. Что написал, то и перепостиласказала

Quote:

Translation :
You don't have any permission to edit or translate this Mod without contacting me First via PM.

07-07-2011, 12:49 AM

я видел, что он написал, поэтому и говорю, бред =)

07-15-2011, 05:50 PM

Quote:

Originally Posted by Gecuba

Для совсем новичков
На орге появился мод для 4.1.4, который избавляет от необходимости от править шаблоны, добавляет смайлы в быстрый ответ (колонка справа) и делает вместо 3-х строк иконок - 2. Так же можно изменить цвет бекграунда редактора.
Автор запретил перевод и перепост без его разрешения, поэтому просто ссылка.

С разрешения автора сделал перевод, оформил на орге

Выкладываю тут
[CKEditor] MARCO1 Advanced Editor Settings русский перевод

07-17-2011, 05:57 PM

coffeman, вот за это спасибочки

11-17-2011, 09:07 PM

Quote:

Originally Posted by coffeman

Выкладываю тут
[CKEditor] MARCO1 Advanced Editor Settings русский перевод

Господа, дело такого рода, что дополнительные BB-коды отображаются только в форме быстрого ответа. В форме же быстрого редактирования тоже отображается расширенная форма, но без ВВ-кодов, добавленных мной.

Версия булки 4.1.8.

Никто не в курсе, как пофиксить?

06-19-2012, 03:59 PM

fagediba, еще раз огромное спасибо за инструкцию!

(можно было б 2 раза кликать на кнопку - кликнула бы)

Не нравилось мне как хак Marco1 кнопки расставлял... поотключала, оставила в хаке только смайлы сбоку включенными, а кнопки во всех редакторах перебрала на свой вкус.

Теперь "красатища" и ниче лишнего.

Возник вопрос - для того чтобы отображалась кнопка 'Attach' нужно выполнение каких-то особых условий? Так как менеджером вложений часто пользуются и при редактировании, и при быстром ответе - добавила их в эти формы. Но кнопка не появилась.

Так же в "быстрые" формы добавила вывод добавленных (custom bbcodes) кнопок (их мало), они выводятся после разделителя | , хотелось бы чтобы отдельной суб-панелью - визуально разбился бы длинный ряд кнопок. Может кто-то себе уже так переделал? - поделитесь, плиз.

Так поняла, в ckeditor.php за это отвечает строчка:

PHP Code:


			
$this->config['toolbar'][$rows - 1][] = '-';

но знаний чтоб подправить - нет

07-27-2012, 03:39 AM

Quote:

После обновления на 4.1.4 доп тег хайда обрабатывается, но кнопок вставки тега нет. При добавлении доп тега говорит "такой тег уже существует", добавить не дает. Также стоит задача добавить кнопку тега в быстрый ответ и в быстрое редактирование.

Я решил немного проще.
Приведенная в пример, автором, отлично функционирует в качестве обычного ВВ-кода (и, как правильно заметил автор, движком рапарсивается).
Моя ситуация похожа. Я "пошел" в админку, убедился, что все мои BB-коды живы поле апдейта. Далее, отправился в /vb/ckeditor.php
на 247й строке нашел метод setToolbar, а в нем:

PHP Code:


			
if ($this->editor_type == 'qr')

        {

            $toolbar[] = array('RemoveFormat', '-', 'PasteText', '-', 'Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Link', 'Email', 'Unlink', 'Image', 'Video', '-', 'Quote');

            if ($iespell)

            {

                $toolbar[] = array('iespell');

            }

            $this->config['toolbar'] = $toolbar;

        }

добавил туда строку взятую из поведения else - этого же метода:
$this->addCustomToolbarButtons();
Получилось

PHP Code:


			
if ($this->editor_type == 'qr')

        {

            $toolbar[] = array('RemoveFormat', '-', 'PasteText', '-', 'Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'TextColor', '-', 'Smiley', '-', 'Link', 'Email', 'Unlink', 'Image', 'Video', '-', 'Quote');

            if ($iespell)

            {

                $toolbar[] = array('iespell');

            }

            $this->config['toolbar'] = $toolbar;

            $this->addCustomToolbarButtons();

}

Все! Собственно, все мои BB-шки стали в форме быстрого ответа, что и требовалось.
Таким же методом, можно добавить BB в быстрое редактирование ($this->editor_type == 'qe') и т.д.