Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

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

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

How to add custom styles in TinyMCE?


Reply


3 Posts   111734 Views

Avatar
nomen

Community Member, 52 Posts

19 May 2008 at 10:38pm

Edited: 19/05/2008 10:39pm

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...

Avatar
jryancard

8 Posts

20 May 2008 at 1:32am

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.

Avatar
nomen

Community Member, 52 Posts

20 May 2008 at 9:25pm

Edited: 20/05/2008 9:31pm

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 [url=http://api.silverstripe.com/forms/fields-formattedinput/HtmlEditorField_dropdown.html]HtmlEditorField_dropdown api info[/url] but i think i don´t understand correcty how it works and how to use it. Can somebody explain it?

Thank you in advance.