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!

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.

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.

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');