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.

Content Editor Discussions /

Forum for content editors and CMS users.

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

Styling the dropdowns in TinyMCE


Reply


2 Posts   1460 Views

Avatar
Borgopio

Community Member, 14 Posts

17 January 2013 at 4:01am

Hi all,

I'm using SilverStripe 2.4.7, trying to customize the TinyMCE menu bar.
There's a way to
1. use Style Formats? http://www.tinymce.com/wiki.php/Configuration:style_formats
2. style the dropdown items to reflect what will appear in the editor? So "Header 1" text is bigger than the "Header 2" in the dropdown, ecc.

For the first question I've tryed adding

HtmlEditorConfig::get('cms')->setOption('style_formats',"[{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}]");


in the _config.php but with no success.

Thanks in advance

Avatar
jnv

Community Member, 1 Post

21 March 2013 at 5:22pm

Hey, I've found how to get style_formats to work in SS 3.0; I am not sure about 2.4, it's possible that its TinyMCE version is not compatible.

Anyway, you need to pass parameter as actual nested PHP array, which then gets converted to JavaScript objects; if you pass the string, even TinyMCE gets the string and won't be happy.

In your case, it may look like this:

$formats = array(
array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000'))
);
HtmlEditorConfig::get('cms')->setOption('style_formats',$formats);

Or this HTML5 example from TinyMCE – http://www.tinymce.com/tryit/html5_formats.php – may be implemented in SilverStripe like this:

$formats = array(
array('title' => 'section', 'block' => 'section', 'wrapper' => true, 'merge_siblings' => false),
array('title' => 'article', 'block' => 'article', 'wrapper' => true, 'merge_siblings' => false),
array('title' => 'hgroup', 'block' => 'hgroup', 'wrapper' => true),
array('title' => 'aside', 'block' => 'aside', 'wrapper' => true),
array('title' => 'figure', 'block' => 'figure', 'wrapper' => true),
);
HtmlEditorConfig::get('cms')->setOption('style_formats',$formats);

(Note that for HTML5 tags to work, you also need to add them to valid_elements.)