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

Владимир Миронов · 18 Июл 2013

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

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

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

Hope · 18 Июл 2013

Вот это должно помочь: 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.

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

Владимир Миронов · 18 Июл 2013

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

Mirovinger · 18 Июл 2013

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

Попробовал добавить кнопки для [HIDE] Addon, отписываюсь.
Всё работает:

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

PHP:

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

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

PHP:

<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 · 19 Июл 2013

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

Владимир Миронов · 2 Авг 2013

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

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

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

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

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

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

luckyman · 2 Авг 2013

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

Mirovinger · 2 Авг 2013

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

Владимир Миронов написал(а):
Например, картинку кнопки "смайлик" хочется поменять.

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

Владимир Миронов · 3 Авг 2013

супер :thumbsup:

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

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

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

PHP:

!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 пишем описание кнопки, которое будет высвечиваться при наведении мышки на неё.

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

PHP:

!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" находим:

PHP:

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

и ниже пишем

PHP:

<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 · 3 Авг 2013

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

Mirovinger · 4 Авг 2013

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

NuBiK · 4 Авг 2013

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

Mirovinger · 4 Авг 2013

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

NuBiK · 4 Авг 2013

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

Cделал

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

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

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

Как?

Hope · 4 Авг 2013

NuBiK написал(а):
Как?

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

Mirovinger · 4 Авг 2013

NuBiK написал(а):
Как?

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

NuBiK · 4 Авг 2013

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

Mirovinger · 4 Авг 2013

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

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

NuBiK · 4 Авг 2013

Mirovinger,

Mirovinger написал(а):
а где кнопка?

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

Mirovinger · 4 Авг 2013

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

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

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

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

Hope

Вложения

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

Mirovinger

Вложения

Hope

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

luckyman

Mirovinger

Вложения

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

Вложения

luckyman

Mirovinger

Вложения

NuBiK

Mirovinger

NuBiK

Hope

Mirovinger

NuBiK

Mirovinger

NuBiK

Mirovinger

Похожие темы

Мы ценим вашу конфиденциальность