1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Tutorial] Get TinyRedactor 1.0

How to make Redactor look like TinyMCE 3

  1. Luxus
    tinyredactor.png

    This is a guide, tutorial, template modification or however you want to call it that styles Redactor to look like XenForo's version of TinyMCE 3.

    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:
    Code:
    @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:
    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

    Done.

Recent Reviews

  1. Sheratan
    Sheratan
    5/5,
    Version: 1.0
    Nice idea.
  2. Matthew Hawley
    Matthew Hawley
    5/5,
    Version: 1.0
    Pretty cool
  3. Sheldon
    Sheldon
    5/5,
    Version: 1.0
    Nice addition Luxus. This should definitely appease those who prefer the TinyMCE look.