Updated: 14/02/2012 6:03pm
SilverStripe 2.4 uses a somewhat older version of the TinyMCE WYSIWYG editor, and so some of the more recent settings will not work. Settings that do work need to be administered 'the SilverStripe way', using the HTMLEditorConfig class (sapphire/Forms/HTMLEditorConfig.php). This is fairly straightforward coding and most of it you can already see in action in /cms/_config.php, where 'cms' is the default editor.
By default, TinyMCE will place all styles in the tinyMCE styles dropdown, that are defined as class selectors in the editor.css stylesheet. In Blackcandy at least, that would include the Typography styles. The theme_advanced_styles setting allows for customization of the Styles dropdown. Now you can define human-readable names for your styles, define which will and which won't appear in the dropdown. It also gets rid of the annoying issue that new styles from your css never appear in the dropdown due to browser caching *)
// add a series of styles to the styles dropdown HtmlEditorConfig::get('cms')->setOption( 'theme_advanced_styles', 'Red text=red;Blue text=blue;Green text=green;No style=default;' );
When a style is applied, the associated class is added to the selected tag, or, if only part of a given tag is selected, it is surrounded by a <span> with the proper class. Selecting a new class for the same bit of text will toggle the classname.
*) OK: the new styles will immediately show in the dropdown, but that unfortunately doesn't mean you'll see them reflected in the content area of the editor right away - especially in FireFox. Caching again...
Getting rid of a style that was applied earlier is a bit tricky. Basically there are three ways of doing that:
Use the 'Edit HTML' popup to remove all instances of the given style class, and associated spans. Never a great option, but often a last resort
Install the 'Remove format' button
This button will get rid of unwanted formatting - meaning tags - in your code. It will remove the <span class="mystyle"> tags, but as far as I got it to work, it won't remove just the class setting from, say, a <p class="mystyle"> tag. In /cms/_config.php:
// add a button to remove formatting HtmlEditorConfig::get('cms')->insertButtonsBefore( 'styleselect', 'removeformat' ); // tel the button which tags it may remove HtmlEditorConfig::get('cms')->setOption( 'removeformat_selector', 'b,strong,em,i,span,ins' );
Use a Default class 'No style'
Since selecting a new style for a block of text will effectively remove the earlier one - at least in the version of SilversStripe 2.4 uses - a default style class, with no properties, will do the trick. Of course it might leave you with lots of unnecessary class="default" attributes in your HTML, but at least it works...
More info can be found in this article about installing Syntax Highlighter...