Some TinyMCE Editor settings

Some simple TinyMCE editor settings

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.

Customize the Styles dropdown

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

In /cms/_config.php

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

Remove a style that was applied earlier

Getting rid of a style that was applied earlier is a bit tricky. Basically there are three ways of doing that:

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

Enable a plugin

More info can be found in this article about installing Syntax Highlighter...  

Comments

  • I'll have a try :-)

    Verstuurd door Martine, 20/02/2012 2:44pm (6 jaar geleden)

  • My ultimate HTMLEditorConfig:


    // TinyMCE set valid elements
    HtmlEditorConfig::get('cms')->setOptions(array(
    'valid_elements' => "@[id|class|style|title],#a[id|rel|rev|dir|tabindex|accesskey|type|name|href|target|title|class],-strong/-b[class],-em/-i[class],-strike[class],-u[class],#p[id|dir|class|align|style],-ol[class],-ul[class],-li[class],br,img[id|dir|longdesc|usemap|class|src|border|alt=|title|width|height|align],-sub[class],-sup[class],-blockquote[dir|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|dir|id|style],-tr[id|dir|class|rowspan|width|height|align|valign|bgcolor|background|bordercolor|style],tbody[id|class|style],thead[id|class|style],tfoot[id|class|style],#td[id|dir|class|colspan|rowspan|width|height|align|valign|scope|style],-th[id|dir|class|colspan|rowspan|width|height|align|valign|scope|style],caption[id|dir|class],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|dir|class|align|style],hr[class],dd[id|class|title|dir],dl[id|class|title|dir],dt[id|class|title|dir],@[id,style,class],small",
    'extended_valid_elements' => "img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|usemap],#iframe[src|name|width|height|align|frameborder|marginwidth|marginheight|scrolling],object[width|height|data|type],param[name|value],map[class|name|id],area[shape|coords|href|target|alt]"
    ));

    // TinyMCE cleanup on paste
    HtmlEditorConfig::get('cms')->setOption('paste_auto_cleanup_on_paste','true');
    HtmlEditorConfig::get('cms')->setOption('paste_remove_styles','true');
    HtmlEditorConfig::get('cms')->setOption('paste_remove_styles_if_webkit','true');
    HtmlEditorConfig::get('cms')->setOption('paste_strip_class_attributes','true');

    Verstuurd door Menno, 17/02/2012 7:48pm (6 jaar geleden)

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina