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.

Customising the CMS

Removing Excess Styles Generated by TinyMCE


Reply

4 Posts   5356 Views

Avatar
redking

21 March 2009 at 10:48am 43 Posts

Hi,

I am trying to find a way to remove the excess styling that is often generated by the TinyMCE editor.
An example of this is how TinyMCE applies <span style="font-size: 11px;"></span> to <li> elements in an unordered list.
This also occurs with other elements such as p, h1, h2, h3 etc. Is there way to keep TinyMCE from adding these extra styles so that it generates only the basic typographic HTML elements? I've looked in sapphire/forms/HTMLEditorField.php but can't seem to find it. Any help on the matter is greatly appreciated.

Thanks!

Avatar
theAlien

21 March 2009 at 2:23pm Community Member, 131 Posts

Hi,

I guess this is mostly a TinyMCE-question that should be asked on their site.

With regard to the other part of your question:
With a quick forum-search I found some info on the locations of TinyMCE-files here:
http://silverstripe.org/general-questions/show/251721?start=0#post251747
and here (read all messages below this one):
http://silverstripe.org/archive/show/53844?start=0#post83082
and according to this post, there is a lot of TinyMCE-stuff in the jsparty-folder:
http://silverstripe.org/archive/show/3904#post3904

I wonder though why TinyMCE appears to be all over the place and not nicely collected in it's own Tiny little MCE-folder ;)
But that's a question for the devs.

Avatar
frowell

11 April 2009 at 7:22am (Last edited: 11 April 2009 7:23am), Community Member, 1 Post

redking,

This same issue became excessively irritating to me, too. I found the answer here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/convert_fonts_to_spans

In a nutshell, if you open cms/javascript/tinymce.template.js and add this line the problem will be solved.

convert_fonts_to_spans: false,

I added it at line 21 and all's good.

Avatar
klikhier

22 July 2011 at 8:58pm Community Member, 150 Posts

Looked into this today and have set it up as follows:

//mysite/_config.php

// TinyMCE set buttons
HtmlEditorConfig::get('cms')->setOption('theme_advanced_blockformats','p,h1,h2,h3');
HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles','Button=convert-to-button');
HtmlEditorConfig::get('cms')->setButtonsForLine(1,'bold, italic, bullist, numlist, separator, cut, copy, pastetext, separator, sslink, unlink, separator, advcode, fullscreen, styleselect, formatselect');
HtmlEditorConfig::get('cms')->setButtonsForLine(2);
HtmlEditorConfig::get('cms')->setButtonsForLine(3);

// TinyMCE set valid elements (have removed div and span from this list, may be problem with ssimage alignment)
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]",
   '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');