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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Archive /

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

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

How to add custom styles in TinyMCE?


Go to End


3 Posts   112271 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 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.