Jump to:

5516 Posts in 1734 Topics by 1221 members

Customising the CMS

SilverStripe Forums » Customising the CMS » different tinyMCE content editors should have different typography styles

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

Page: 1
Go to End
Author Topic: 2763 Views
  • rsouthgate
    Avatar
    Community Member
    10 Posts

    different tinyMCE content editors should have different typography styles Link to this post

    I have multiple HTMLEditorFields on multiple tabs for one page. According to the documentation I should be able to style these differently:

    -- from http://doc.silverstripe.com/doku.php?id=typography

    If you would to include different styles for different sections of your site, you can use class names the same as the name of the data fields. This example sets up different paragraph styles for 2 HTML editor fieldsc alled Content and OtherContent:

    .Content.typography p {
    font-size: 12px;
    }

    .OtherContent.typography p {
    font-size: 10px;
    }

    ------

    The ability to use class names that are the same names as the data fields implies that that class name would be passed through to the body of the iframe that tinyMCE renders in the editable region. yet regardless of which HTMLEditorField I inspect the body is always the same:

    <body id="tinymce" class="mceContentBody typography" dir="ltr">

    So these HTMLEditorFields all inherit the same styles which seriously limits what I would like to do. It seems like, since it's in the documentation, that it should be possible to have separate styles for each region but I can't figure out how - can anyone help?

  • Nathan Cox
    Avatar
    Community Member
    99 Posts

    Re: different tinyMCE content editors should have different typography styles Link to this post

    I've had this same problem...the only classes that get set on the body inside TinyMCE are .mceContentBody and whatever you pass to TinyMCE in it's 'body_class' option (which is set to "typography" in LeftAndMain.php).
    You can apply classes to the textarea that TinyMCE is made from with something like

    $editorField->setCSSClass('sidebarContent');

    I had always thought that TinyMCE took any class names from the textarea and used them but apparently not. Has this changed in a recent version or was I just imagining it?

    Anyway I've found two ugly work-arounds for this so far:

    1) TinyMCE does support different styles for different values in the body_class parameter, so you can set it up manually:

    in Page.php:

    function getCMSFields() {
       $fields = parent::getCMSFields();
       
       // make an editor field for our sidebar content
       $sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
       $fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
       
       // regular content editor just uses the typography class, sidebar content uses the "sidebarContent" class as well
       // this needs to be here because it doesn't work from _config.php
       HtmlEditorConfig::get('cms')->setOption('body_class', 'Form_EditForm_Content=typography,Form_EditForm_SidebarContent=typography sidebarContent');

       return $fields;
    }

    2) You can use Javascript to find the name of the field and apply it to TinyMCE:

    in Page.php:

    function getCMSFields() {
       $fields = parent::getCMSFields();
       
       // make an editor field for our sidebar content
       $sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
       $fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
       
       // include the javascript
       Requirements::javascript('mysite/javascript/tinymceContentStyle.js');

       return $fields;
    }

    tinymceContentStyle.js:

    jQuery('.mceLayout iframe').livequery('load', function() {
       var cssClass = jQuery(this).parents('div.field').attr('id');
       jQuery(this).contents().find('body').addClass(cssClass);
    });

    2b) If you don't want to use the field name you can take advantage of HTMLEditorField's css class function with javascript:

    in Page::getCMSFields():

    $fields = parent::getCMSFields();
    // make an editor field for our sidebar content

    $sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
    $fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
          
    // regular content editor just uses the typography class, sidebar content uses the "sidebarContent" class as well
    // this needs to be here because it doesn't work from _config.php
    HtmlEditorConfig::get('cms')->setOption('body_class', 'Form_EditForm_Content=typography,Form_EditForm_SidebarContent=typography sidebarContent');

    return $fields;

    2) You can use Javascript to find the name of the field and apply it to TinyMCE:

    in Page.php:

    function getCMSFields() {
       $fields = parent::getCMSFields();
       
       // make an editor field for our sidebar content
       $sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
       $sidebarEditor->setCSSClass('stylesForSidebar');
       $fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
       
       // include the javascript
       Requirements::javascript('mysite/javascript/tinymceContentStyle.js');

       return $fields;
    }

    tinymceContentStyle.js:

    jQuery('.mceLayout iframe').livequery('load', function() {
       var classes = jQuery(this).parents('.middleColumn').find('textarea:first').attr('class');
       var cssClass = jQuery.trim(classes.replace('htmleditor', ''));
       jQuery(this).contents().find('body').addClass(cssClass);
    });

    So yes, messy and not thoroughly tested but do-able

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