tinymce generated ugly styling output

Question

I've used tinymce for quite a while now (simple setup) and it has been doing quite a nice job getting things styled nicely with the basic styling options - bold, italic, lists and so on. Sometimes though, I guess when users copy-paste their texts to tinymce textbox from word or something styling gets completely ugly, like in this example below. Is there a way to limit the styling to basic ones that refer to the buttons in simple setup?

 <p>df</p>
    <p><!--[if gte mso 9]><xml> <w:WordDocument> 
    <w:View>Normal</w:View> <w:Zoom>0</w:Zoom>
<w:TrackMoves />
    <w:TrackFormatting /> <w:PunctuationKerning /> 
    <w:ValidateAgainstSchemas /> 
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> 
    <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> 
    <w:DoNotPromoteQF /> <w:LidThemeOther>RU</w:LidThemeOther> 
    <w:LidThemeAsian>X-NONE</w:LidThemeAsian> 
    <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript> <w:Compatibility> <w:BreakWrappedTables /> <w:SnapToGridInCell /> 
    <w:WrapTextWithPunct /> <w:UseAsianBreakRules /> <w:DontGrowAutofit /> <w:SplitPgBreakAndParaMark /> <w:DontVertAlignCellWithSp /> <w:DontBreakConstrainedForcedTables /> <w:DontVertAlignInTxbx /> 
    <w:Word11KerningPairs /> <w:CachedColBalance /> 
    </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> <m:mathPr> <m:mathFont m:val="Cambria Math" /> <m:brkBin m:val="before" /> 

...

 <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List" /> 
<w:LsdException Locked="false" Priority="71" SemiHidden="false"  
  UnhideWhenUsed="false" Name="Colorful Shading" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List" />

msigman msigman · Accepted Answer · 2012-03-31T22:05:12

It's a very common problem. Typically when you are trying to copy text from Word into TinyMCE it will carry over the formatting as well. It can happen from other applications as well besides Word. In order to get rid of all those unwanted tags you need to use the paste plugin. Use these settings for your init function:

tinyMCE.init({
    // ...
    plugins : "paste",
    paste_text_sticky : true,
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            ed.pasteAsPlainText = true;
        });
    }
    // ...
});

You may also use paste_preprocess and/or paste_postprocess setting to perform javascript action on the pasted code.

Here are some more advanced settings you can use to tailor the functionality:

plugins : "paste,...",
paste_use_dialog : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : true,
paste_remove_styles : true,
paste_retain_style_properties : "",

How to make tinymce paste in plain text by default

tinymce generated ugly styling output

1 Answers