SaaS CMS has officially launched! Learn more now.

Removing inline styling and width attribute after modifying the table in TinyMCE v2


I was able to remove initial inline styling and width when creating a table in TinyMCE, see 

Now the problem is to remove, or not allow the editor to add attributes even when the editor tries to change the width or hight of the table by draging the tables borders. I tried using extended styles; 

and invalid styles:

invalid_styles: { 
    'table': 'width height', 
    'tr' : 'width height',
    'th' : 'width height',
    'td' : 'width height'

But none of them fixed my problem. 

The the result I want to avoid are these inline styles and the width attribute:

<table style="height: 141px;" width="279">
<td style="width: 144px;">kfjg kldfgj</td>
<td style="width: 247px;">kdfgj dklfgj</td>
<td style="width: 162px;">døfklg jdfølkgj</td>
<td style="width: 144px;">sdfløgk jdføkl</td>
<td style="width: 247px;">døflkg jdfklgj lkøgjdfølkgjd følgkj dfgølkdfjgølkdf gjødflkgj dfølkg jdføkgl dfjgøl</td>
<td style="width: 162px;">lkdøfg jd</td>
<td style="width: 144px;">løkdf gjdløfkgjdøfl kgjdfølgjkdf ølfdk gjølgkgjø</td>
<td style="width: 247px;">dølfk gjdfølkgj dfølgk jdføglkj</td>
<td style="width: 162px;">dflkøj dføgkjdfkøgldfj øglkdfjgødlkf gjdøflkgdfjø lkg</td>

Edited, Dec 15, 2020 14:31

Hi Aud,

I was able to acheive this by adding to "settings", the editor can still move the cells, but it won't be saved.

I've pasted the entire tinymce editor init because it's such a fiddly area in the hope it helps someone in the future. This includes external plugins, body class, custom site based css and additional style menu items. 

           public void ConfigureContainer(ServiceConfigurationContext context)

                context.Services.Configure<TinyMceConfiguration>(config =>
                         .AddSettingsTransform("default-content-css-transform", (settings, content, propertyName) =>
                             var contentCss = $"/sitecss/tinymce-{SiteDefinition.Current.Name.Replace(' ','-')}.css";

                             settings.AddSetting("body_id", "main-content");
                             settings.AddSetting("invalid_styles", "table:width height,th: width height,td:width height,tr: width height");
                        .AddPlugin($"{DefaultValues.EpiserverPlugins} template table")
                        .AddPlugin("anchor table code")

                        .AddSetting("style_formats_merge", true)

                        .Toolbar("epi-link anchor | image epi-image-editor | bold italic | alignleft aligncenter alignright | " +
                                 "styleselect | table | cut copy pastetext paste removeformat fullscreen | bullist numlist | " +
                                 "subscript superscript | undo redo find code telephoneNumber "
                                title = "Link to button",
                                selector = "a",
                                classes = "buttonClass"

                        ); ;

Hope that helps

Dec 22, 2020 0:22

Thank you very much, that works!! :)

Mar 08, 2021 12:57

This is what I was looking for:

settings.AddSetting("invalid_styles", "th: width height, td: width height");


Nov 30, 2021 2:41
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.