Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » How to add custom styles in TinyMCE?

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 111680 Views
  • nomen
    Avatar
    Community Member
    52 Posts

    How to add custom styles in TinyMCE? Link to this post

    Hi all:

    I need to add custom styles (new classes and new styles to p, h,...).
    I want to add this styles in editors drop down menu.
    I have read TinyMCE manual and add content_css with my styles but in doesn´t work...
    Wich is the right way to do it?

    Thanks in advance...

    bye...

  • jryancard
    Avatar
    8 Posts

    Re: How to add custom styles in TinyMCE? Link to this post

    Hey nomen, we needed to do the same thing for our projects just recently. You can go into the HtmlEditorField.php file in sapphire/forms/ and go down to line 248. This will probably have a commented line that is a style dropdown for the editor. If you uncomment it, that will allow you to add custom styles to select and place their definitions in typography.css . That should get you started.

  • nomen
    Avatar
    Community Member
    52 Posts

    Re: How to add custom styles in TinyMCE? Link to this post

    Thanks jryancard!

    It works, but if i put my classes in editor.css instead of typography.css.
    I added this in HtmlEditorField.php

       new HtmlEditorField_dropdown("mceSetCSSClass", "styleSelect", array(
                "mceContentBody" => "mceContentBody",
                "red-text" => "red-text",
             )),


    In editor.css i put

    .red-text{
       color: red;      
       }


    In the CMS editor i see the dropdown with red-text. It appears two times, i don´t know why. One of then works perfectly and the other does nothing.
    The correct one creates

    <span class="red-text">mytext</span>


    It is perfect for me.
    But i need also to create <div id="red-text">mytext</div> and i don´t know ho to do it. I try to create in editor.css

    #red-text{
       color: red;
       }


    But it doesn´t work. Is there a way to do it?

    By the way, i read HtmlEditorField_dropdown api info but i think i don´t understand correcty how it works and how to use it. Can somebody explain it?

    Thank you in advance.

    111680 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.