Redactor (редактор в Xenforo 1.2)

[Владимир Миронов]

В этой теме предлагаю обсудить новый редактор в Xenforo 1.2 под названием Redactor
Его вы можете наблюдать на нашем форуме.

В TinyMCE только вроде стали разбираться как добавлять кнопки как вышел в новой версии Xenforo новый редактор. Кто-нибудь пробовал или знает как устанавливать кнопки, например, для плагинов спойлер, Hide и т.д.?

В TinyMCE добавляли различные ббкоды. В этом редакторе кто-нибудь пробовал добавлять новые ббкоды?

 

[Hope]

Вот это должно помочь: http://xenforo.info/resources/bbcodes-buttons-manager.153/[DOUBLEPOST=1374092655,1374092388][/DOUBLEPOST]Да и такой мануал есть, правда не совсем понятен алгоритм сего действия:

How to add some plugins or custom icons to Redactor?
A few things before to know:

• No need to waste your time to look at the Redactor API on the official website, a lot of functions have changed and are now for Redactor 9. They didn't keep a track of Redactor 8 API. Better to look at directly the code.
• No need to waste your time to try to use some Redactor API with the XenForo framework, it seems they don't work and furthermore they have bugs (even the destroy function fails on FF), so stay in the limit of the framework done and checked by Mike. This will be safer.
• Your JS customizations will have to be executed before the XenForo framework is launched, which means before the javascript "bb_code_edit.js" (see the template "editor_js_setup")
• Your JS customizations will have to target the original textarea of this editor and more precisely the data "options" which has the moment two keys:
  1. editorOptions
     You can customize here any settings of the editor. This is the place you will have to load your plugins.
  2. buttons
     This is the place to put your customize buttons. From what I saw, but I may be wrong, currently you:
     • can't load modify the button position. It will be added at the end of the toolbar (like on vBulletin 3.x) Can be overridden - check version 1.1
     • can't select in which button group the button is going to go. Each time you add one or several buttons, this/these will be under the same group.
       Can be overridden - check version 1.1
     • can automatically insert the tags of the bbcode. At the moment the options can't be set, nor the content (this can be easily modified if XenForo developers are willing to)
  I repeat these information need to be confirmed.

How to install the demo javascript file:

Download the archive and extract the javascript file. Put it inside the directory you want. Then make the top of your template "editor_js_setup" look like this:

<xen:require js="js/redactor/redactor.js" />
<xen:require js="js/yourCustomDirectory/demo.js" />
<xen:require js="js/xenforo/bb_code_edit.js" />

After this you will have to customize your css.

Пробуем, отписываемся. :)

 

[Владимир Миронов]

судя по описанию плагина BbCodes & Buttons Manager 2.1.0 , он расчитан на 4 версию старого редактора.

 

[Mirovinger]

Пробуем, отписываемся. :)

Попробовал добавить кнопки для [HIDE] Addon, отписываюсь.
Всё работает: , использовал demo2.js, там есть возможность, поместить кнопки в любое место(видно на скрине).
Может кому интересно, прикрепляю свой вариант в аттаче и описание:
Загружаем содержимое папки upload, в каталог вашего форума.
В шаблоне "editor_js_setup" находим:

<xen:require js="js/redactor/redactor.js" />

и внизу добавляем:

<xen:require js="js/redactor/plugins/demo_hide.js" />

Но я бы советовал делать через встроенный TMS(Модификации шаблонов)

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Пример:



В шаблон EXTRA.css, в любом месте добавить:

/* add_buttons_hide========================================================================== */
.redactor_btn_group li a.redactor_btn_myCustomButton_hide {
  background-image: url('styles/hide/hide.png') !important;
  width: 22px;
  height: 24px;
}
.redactor_btn_group li a.redactor_btn_myCustomButton_stg {
  background-image: url('styles/hide/showtogroups.png') !important;
  width: 22px;
  height: 24px;
}
/* end_add_buttons_hide====================================================================== */

На идеальное описание не претендую, но как я понял, для добавления дополнительных кнопок,
придется каждый раз править файлик JS(в моём примере demo_hide.js), но там все просто, может я ошибаюсь, тогда поправите.

 

[Hope]

О как! Спасибо, за отличный мануал. :)

 

[Владимир Миронов]

Все смайлы выезжают снизу, если нажать на кнопку смайлика в редакторе. Может можно сделать, чтобы все смайлы автоматом сразу появлялись внизу?[DOUBLEPOST=1375140644,1374675742][/DOUBLEPOST]Mirovinger, а ты не разобрался как добавить функции в редактор? На их сайте

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

видно, что функций намного больше.
Там и обтекание картинки тестом по бокам, и выделение текста маркером и горизонтальная линия есть и таблицы.

Вот тут они плагины к редактору выкладывают

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

но я не знаю как их к редактору в Xenforo присобачить :)[DOUBLEPOST=1375405961][/DOUBLEPOST]очень удобно стало добавлять закрывающиеся теги. Добавил себе кнопку спойлер.
Кнопку можно поместить в любое место. А есть ли возможность изменить картинки других кнопок? Например, картинку кнопки "смайлик" хочется поменять.
И как быть с добавлением не закрывающихся тегов? Например backcolor (выделение текста маркером).

 

[luckyman]

Владимир Миронов, поделись КАК добавлять кнопки в редактор? Я не хочу для этого ставить BBM, напиши пожалуйста инструкцию.

 

[Mirovinger]

Владимир Миронов, ну так подкоректировать спрайт с иконками, и заменить иконку смайла на свою, вроде не состовляет труда.
Предложите свой вариант, глянем, что из этого выйдет.
На счет добавления новых функций в редактор как-то не смотрел, будет больше свободного времени гляну, если кто раньше не разберется.[DOUBLEPOST=1375467964,1375419514][/DOUBLEPOST]

Например, картинку кнопки "смайлик" хочется поменять.

Хочется поменять кнопку "смайлик", пожалуйста измененный спрайт(icons2.png).

 

[Владимир Миронов]

супер :thumbsup:

Владимир Миронов, поделись КАК добавлять кнопки в редактор? Я не хочу для этого ставить BBM, напиши пожалуйста инструкцию.

Mirovinger и Hope рассказали. Я лишь повторю, добавив скриншоты.
Для примера мы установим кнопки для плагинов hide и spoiler


Смотрим на скриншот и делаем далее по инструкции.
шаг 1: Скачиваем здесь файл, я его назвал buttons.js Копируем по адресу js/redactor/ Файл используйте для добавления кнопок в редактор.
шаг 2: Начинаем редактировать buttons.js
Сейчас его содержание следующее:

!function($, window, document, _undefined)
{
    XenForo.customEditorForMyAddon = function($textarea) { this.__construct($textarea); };

    XenForo.customEditorForMyAddon.prototype =
    {
        __construct: function($textarea)
        {
            var redactorOptions = $textarea.data('options'),
            myButtons = this.createCustomButtons(),
            myOptions = {
                editorOptions:{
                    plugins: ['test', 'test2'],
                    buttons:[
                            ['switchmode'],
                            ['removeformat'],
                        ['bold', 'italic', 'underline', 'deleted'],
                        ['fontcolor', 'fontsize', 'fontfamily'],
                        ['createlink', 'unlink'],
                        ['alignment'],
                        ['unorderedlist', 'orderedlist', 'outdent', 'indent'],
                        ['smilies', 'image', 'media'],
                        ['code', 'quote'],
                        ['draft'],
                        ['myCustomButton_1'], ['myCustomButton_2'],
                        ['undo', 'redo']
                        ]
                },
                buttons: myButtons
            };

            if(typeof RedactorPlugins == 'undefined')
                RedactorPlugins = {};

            $textarea.data('options', $.extend(redactorOptions, myOptions));
        },
        createCustomButtons: function()
        {
            //Some functions should be static, ie: wrapSelectionInHtml
            //wrapSelectionInHtml should have an option to allow to set BbCode Options or Content
             
            return {
                myCustomButton_1: {
                    title: 'myCustomButton_1',
                    tag: 'myBbCode1'
                },
                myCustomButton_2: {
                    title: 'myCustomButton_2',
                    tag: 'myBbCode2'
                }
            }
        }
    }

    XenForo.register('textarea.BbCodeWysiwygEditor', 'XenForo.customEditorForMyAddon');

}(jQuery, this, document);

Меняем в нём строчку

 plugins: ['test', 'test2'],

на

plugins: ['hide', 'spoiler'],

Если нужно, то можете в скобках добавить через запятую ещё плагинов.

Дальше идёт список установленных кнопок и туда добавлены 2 кнопки с тестовым названием myCustomButton_1 и myCustomButton_2

 buttons:[
                            ['switchmode'],
                            ['removeformat'],
                        ['bold', 'italic', 'underline', 'deleted'],
                        ['fontcolor', 'fontsize', 'fontfamily'],
                        ['createlink', 'unlink'],
                        ['alignment'],
                        ['unorderedlist', 'orderedlist', 'outdent', 'indent'],
                        ['smilies', 'image', 'media'],
                        ['code', 'quote'],
                        ['draft'],
                        ['myCustomButton_1'], ['myCustomButton_2'],
                        ['undo', 'redo']
                        ]

Меняем цифру 1 на hide, а цифру 2 на spoiler. В зависимости от того куда вы поместите эти кнопки среди всех остальных, там они и будут отображаться.

Далее находим код

return {
                myCustomButton_1: {
                    title: 'myCustomButton_1',
                    tag: 'myBbCode1'
                },
                myCustomButton_2: {
                    title: 'myCustomButton_2',
                    tag: 'myBbCode2'
                }

в title меняем цифру 1 на hide, а цифру 2 на spoiler.
а tag пишем описание кнопки, которое будет высвечиваться при наведении мышки на неё.

В итоге получился следующий код:

!function($, window, document, _undefined)
{
    XenForo.customEditorForMyAddon = function($textarea) { this.__construct($textarea); };

    XenForo.customEditorForMyAddon.prototype =
    {
        __construct: function($textarea)
        {
            var redactorOptions = $textarea.data('options'),
            myButtons = this.createCustomButtons(),
            myOptions = {
                editorOptions:{
                    plugins: ['hide', 'spoiler'],
                    buttons:[
                            ['switchmode'],
                            ['removeformat'],
                        ['bold', 'italic', 'underline', 'deleted'],
                        ['fontcolor', 'fontsize', 'fontfamily'],
                        ['createlink', 'unlink'],
                        ['alignment'],
                        ['unorderedlist', 'orderedlist', 'outdent', 'indent'],
                        ['myCustomButton_smile', 'smilies', 'image', 'media'],
                        ['code', 'quote'],
                        ['draft'],
                        ['myCustomButton_hide', 'myCustomButton_spoiler'],
                        ['undo', 'redo']
                        ]
                },
                buttons: myButtons
            };

            if(typeof RedactorPlugins == 'undefined')
                RedactorPlugins = {};

            $textarea.data('options', $.extend(redactorOptions, myOptions));
        },
        createCustomButtons: function()
        {
            //Some functions should be static, ie: wrapSelectionInHtml
            //wrapSelectionInHtml should have an option to allow to set BbCode Options or Content
             
            return {
                myCustomButton_hide: {
                    title: 'Данный тэг скрывает содержимое от пользователей с количеством сообщений меньшим X.',
                    tag: 'HIDE'
                },
             
                myCustomButton_spoiler: {
                    title: 'Данный тэг скрывает содержимое в спойлер.',
                    tag: 'spoiler'
                }
            }
        }
    }

    XenForo.register('textarea.BbCodeWysiwygEditor', 'XenForo.customEditorForMyAddon');

}(jQuery, this, document);

шаг 3: В шаблоне "editor_js_setup" находим:

<xen:if is="{$debugMode}">
    <xen:require js="js/redactor/redactor.full.js" />
<xen:else />
    <xen:require js="js/redactor/redactor.js" />
</xen:if>

и ниже пишем

<xen:require js="js/redactor/buttons.js" />

шаг 4: В конец EXTRA.css добавляем следующее:

/* add_buttons================================== */
.redactor_btn_group li a.redactor_btn_myCustomButton_hide {
  background-image: url('js/redactor/hide.png') !important;
  width: 22px;
  height: 24px;
}
.redactor_btn_group li a.redactor_btn_myCustomButton_spoiler {
  background-image: url('js/redactor/spoiler.png') !important;
  width: 22px;
  height: 24px;
}
/* end_add_buttons================================ */

шаг 5: Закачиваем картинки кнопок по указанному адресу в css и с точно таким же названием файлов :-)
Всё, проверяем работу кнопок в редакторе.

 

[luckyman]

Владимир Миронов, я тебе признателен! Подробнейшая инструкция! БЛАГОДАРЮ!

 

[Mirovinger]

Готовая, кнопка для спойлера, инструкция по установке внутри.

 

[NuBiK]

Mirovinger, огромное спасибо,а как это исправить?

 

[Mirovinger]

Пересохрани, файл spoiler.js, в кодировке UTF-8.
Или перекачай архив, во вложении вверху, исправил и перезалил.
Да и картинка на кнопке не видна, похоже ты забыл, добавить содержимое в EXTRA.css

 

[NuBiK]

Да и картинка на кнопке не видна, похоже ты забыл, добавить содержимое в EXTRA.css

Cделал

Или перекачай архив, во вложении вверху, исправил и перезалил.

Перезагрузил

Пересохрани, файл spoiler.js, в кодировке UTF-8.

Как?

 

[Hope]

Как?

:biggrin: Как так-то?

 

[Mirovinger]

Как?

Если, ты скачал заново архив, просто закинь его содержимое, к себе на форум.

 

[NuBiK]

@Mirovinger,Я так и сделал.
Спойлер http://xenforo.info/threads/fancy-spoiler.1782/#post-10563

 

[Mirovinger]

@Mirovinger,Я так и сделал.
Спойлер http://xenforo.info/threads/fancy-spoiler.1782/#post-10563

Так я не понял работает или нет.
Споилер есть, толко-что тестанул, а где кнопка?

 

[NuBiK]

Mirovinger,

а где кнопка?

В спойлере кнопка не стоит стандартно..

 

[Mirovinger]

Mirovinger,
В спойлере кнопка не стоит стандартно..

Нет, поэтому, надо добавлять самому.