x First time here? Check out the FAQ

Adding Styles to the TinyMCE

    Possible to get the broken-link images restored here? Would help a bit :)

    This guide will show you how to add styles to the TinyMCE so you and your content editors can assign custom styles to a web page rendered from the TinyMCE.

    Firstly we need to create a stylesheet that we will associate with the Tiny MCE. Go Settings - Stylesheets and right click the Stylesheets item and click create to add new stylesheet to your Umbraco website. Give the stylesheet a relevant name, here I have chosen "TinyMCE".

    Next we need to add the styles to the stylesheet that we will use on our TinyMCE. Right click the stylesheet you have just created and select Create. Enter a name for the new style - keeping it consistent with CSS naming conventions* the fields that are required are:

     

    • Name: This will be the name you enter when creating the style and will appear in the style drop down list of the TinyMCE.
    • Alias: These are standard CSS identifiers or classes, here I have used a period as the imageRight CSS class could potentially be used across several images. If you are certain your CSS class will only be used once you will be fine using an identifier (for more information read here).
    • Next we add in the actual CSS styles I wish to be applied to the class. These are entered one per line and delimited with a semi-colon.
    Here's our completed style:
    Note: Firefox doesn't always implement link styles correctly so you may find that even though you have style rules delcated in your stylesheet for the richtexteditor they still show blue and underlined in the editor.  To get around this, simply add '!important' after your style rules, so:
    a {
       color: #f00;
    text-decoration: none;
    }
    Would become:
    a {
        color: #f00 !important;
        text-decoration: none !important;
    }
    Next we need to tell the TinyMCE to use our stylesheet and allow styles to be used within the TinyMCE itself. Go to Developer - Data Types - Richtext Editor. Ensure that the checkbox next to the styles drop down is selected and your stylesheet is checked within the Related Stylesheets section, as per our example:
    Almost done!
    Next go to your content with the TinyMCE editor on it, here I am using the Blog4Umbraco, but the TinyMCE is available on any content you add it to. I have clicked the image that I had previously added to the editor and click the styles drop down, selecting the imageRight style. This will add the CSS we created in the previous steps to the image, aligning it nicely to the right so the text flows around it and giving is a nice border.
    If we view the HTML, we can see the style within the image declaration.
    Finally add the link to your newly created stylesheet into your master page:
    <link rel="stylesheet" type="text/css" href="/css/TinyMCE.css" />
    And that's all there is to it. If you get stuck, you can post in the ever-friendly Our Umbraco forums.