Как из Redactor сделать TinyRedactor

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

Это руководство как изменить стиль Redactor, чтобы он стал похож на TinyMCE 3.

1.) Скачать спрайт TinyMCE

Скачайте модифицированный спрайт и переместите его в styles/yourstyle/xenforo/editor/mce3icons.png.

2.) Изменение фона и цвета границы

- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Редактор-панель
- Удалите путь к изображению, повтор и значения позиции и выбрать этот цвет фона: # F0F0EE
- Изменить border bottom color на # CCCCCC
- Изменение значение padding-left на 0
- Сохранить

- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Редактор-контейнер
- Изменить border color на # CCCCCC
- Сохранить

- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Редактор-группа кнопок
- Удалите путь к изображению, повтор и значения позиций и очистить значение Фон (что делает его прозрачным)
- Удаление всех значений border
- Удалите box-shadow значение из окна вывода дополнительных CSS
- Сохранить

- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Редактор-кнопка (Hover)
- Изменение цвета фона на # b2bbd0
- Изменить цвет границы на # 0a246a
- Очистить значение Radius
- Сохранить


- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Редактор-кнопка (Активный)
- Изменение цвета фона на # b2bbd0
- Изменить цвет границы на # 0a246a и очистите стиль границы, ширину и радиус
- Сохранить

3.) Снятие непрозрачности эффектов

- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Настройки
- Снимите флажок "Разрешить полупрозрачность полнофункциональному редактору"
- Сохранить

4.) Замена Redactor кнопок на кнопки TinyMCE

- Перейти к Внешний вид → Настройки стиля → Полнофункциональный редактор → Редактор-кнопка
- Замените изображение пути фоне с этим:

@ ImagePath/xenforo/editor/mce3icons.png

- Измените ширину и высоту на 22px
- Сохранить.

В EXTRA.css вставьте следующий код:

.redactor_box .redactor_toolbar li a.redactor_btn_removeformat
{
    background-position: -580px 0;
    margin-right: 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_bold
{
    background-position: 0 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_italic
{
    background-position: -60px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_underline
{
    background-position: -140px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_deleted
{
    background-position: -120px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontcolor
{
    background-position: -961px -19px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontsize
{
    background-position: -87px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontfamily
{
    background-position: -106px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_createlink
{
    background-position: -500px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unlink
{
    background-position: -640px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_alignment
{
    background-position: -460px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unorderedlist
{
    background-position: -20px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_orderedlist
{
    background-position: -80px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_outdent
{
    background-position: -540px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_indent
{
    background-position: -400px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_smilies
{
    background-position: -22px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_image
{
    background-position: -380px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_media
{
    background-position: -320px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_code
{
    background-position: -65px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_quote
{
    background-position: -220px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_draft
{
    background-position: -480px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_undo
{
    background-position: -159px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_redo
{
    background-position: -100px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_switchmode
{
    background-position: -42px -39px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group
{
    margin-top: 0px;
    margin-bottom: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(1)
{
    margin-right: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(2)
{
    margin-left: 0px;
    margin-right: 0px;
}
.redactor_smilies .secondaryContent
{
    background: #F0F0EE;
}

- Сохраните.[DOUBLEPOST=1374525508,1374525351][/DOUBLEPOST]

На всякий случай размещу ниже ещё и оригинал. Т.к. перевод технический не самый точный :-) Как вариант, можно перейти на форуме на английский язык и выполнить инструкцию на оригинальном языке.

1.) Downloading TinyMCE spritesheet
- Download the modified spritesheet and move it to styles/yourstyle/xenforo/editor/mce3icons.png. In this spritesheet I have added the icons XenForo removed from their spritesheet. I did not remove all unused editor icons because there is just no point.

2.) Changing the background and border color

- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar
- Remove the image path, repeat and position values and select this background color: #F0F0EE
- Change the border bottom color to #CCCCCC
- Change the padding-left value to 0
- Save

- Go to Appearance → Style Properties → Rich Text Editor → Editor Container
- Change the border color to #CCCCCC
- Save

- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Group
- Remove the image path, repeat and position values and clear the value of the background color (making it transparent)
- Clear all values of the border
- Remove the box-shadow value from the additonal CSS box
- Save

- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button (Hover)
- Change the background color to #b2bbd0
- Change the border color to #0a246a
- Clear the radius value
- Save

- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button (Active)
- Change the background color to #b2bbd0
- Change the border color to #0a246a and clear the border values Style, Width and Radius
- Save

3.) Removing the opacity effects

- Go to Appearance → Style Properties → Rich Text Editor → Settings
- Uncheck the "Allow the rich text editor to be faded out" box
- Save

4.) Replacing Redactor buttons with TinyMCE buttons

- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button
- Replace the image path of the background with this:

@imagePath/xenforo/editor/mce3icons.png

- Change Width and Height to 22px
- Save.

Note: The default redactor spritesheet will never be loaded. Instead, always the modified TinyMCE spritesheet will be loaded.

- Go to Templates and open EXTRA.css
- Copy&pasta the following code:

.redactor_box .redactor_toolbar li a.redactor_btn_removeformat
{
    background-position: -580px 0;
    margin-right: 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_bold
{
    background-position: 0 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_italic
{
    background-position: -60px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_underline
{
    background-position: -140px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_deleted
{
    background-position: -120px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontcolor
{
    background-position: -961px -19px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontsize
{
    background-position: -87px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontfamily
{
    background-position: -106px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_createlink
{
    background-position: -500px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unlink
{
    background-position: -640px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_alignment
{
    background-position: -460px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unorderedlist
{
    background-position: -20px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_orderedlist
{
    background-position: -80px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_outdent
{
    background-position: -540px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_indent
{
    background-position: -400px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_smilies
{
    background-position: -22px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_image
{
    background-position: -380px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_media
{
    background-position: -320px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_code
{
    background-position: -65px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_quote
{
    background-position: -220px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_draft
{
    background-position: -480px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_undo
{
    background-position: -159px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_redo
{
    background-position: -100px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_switchmode
{
    background-position: -42px -39px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group
{
    margin-top: 0px;
    margin-bottom: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(1)
{
    margin-right: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(2)
{
    margin-left: 0px;
    margin-right: 0px;
}
.redactor_smilies .secondaryContent
{
    background: #F0F0EE;
}

- Save

 

[charafweb]

Thanks a lot for sharing this, I didn't like default redactor style, this one is better.

 

[pro100drug]

Сделал по инструкции, но иконки почему-то не отображаются :(

Подскажите, пожалуйста, что не так.
Xenforo 1.2.5

 

[Hope]

Странно... Должно было всё получится. Хотя давно не проверял, возможно в 1.2.5 что-то изменилось уже.