Jump to:

5514 Posts in 1733 Topics by 1219 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Removing Excess Styles Generated by TinyMCE

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

Page: 1
Go to End
Author Topic: 5082 Views
  • redking
    Avatar
    43 Posts

    Removing Excess Styles Generated by TinyMCE Link to this post

    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!

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: Removing Excess Styles Generated by TinyMCE Link to this post

    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.

  • frowell
    Avatar
    Community Member
    1 Post

    Re: Removing Excess Styles Generated by TinyMCE Link to this 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.

  • klikhier
    Avatar
    Community Member
    150 Posts

    Re: Removing Excess Styles Generated by TinyMCE Link to this post

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

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