Jump to:

520 Posts in 248 Topics by 263 members

Content Editor Discussions

SilverStripe Forums » Content Editor Discussions » Styling the dropdowns in TinyMCE

Forum for content editors and CMS users.

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

Page: 1
Go to End
Author Topic: 1303 Views
  • Borgopio
    Avatar
    Community Member
    14 Posts

    Styling the dropdowns in TinyMCE Link to this post

    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

  • jnv
    Avatar
    Community Member
    1 Post

    Re: Styling the dropdowns in TinyMCE Link to this post

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

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