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

Vote:
 

I was able to remove initial inline styling and width when creating a table in TinyMCE, see https://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2020/10/remove-attribute-border-in-tinymce-v2/ 

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; https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@extended_valid_elements/ 

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">
<tbody>
<tr>
<td style="width: 144px;">kfjg kldfgj</td>
<td style="width: 247px;">kdfgj dklfgj</td>
<td style="width: 162px;">døfklg jdfølkgj</td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>

#245590
Edited, Dec 15, 2020 14:31
Vote:
 

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 =>
                {
                    config.Default()
                        
                        .BodyClass("main-content")
                        
                                        
                         .AddSettingsTransform("default-content-css-transform", (settings, content, propertyName) =>
                         {
                             var contentCss = $"/sitecss/tinymce-{SiteDefinition.Current.Name.Replace(' ','-')}.css";

                             settings.ContentCss(contentCss);
                             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")

                        .AddExternalPlugin("telephoneNumber",
                            "/TinyMce/plugins/telephoneNumber/telephoneNumber.js")
                        
                        .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 "
                                          ).StyleFormats(
                             new
                            {
                                title = "Link to button",
                                selector = "a",
                                classes = "buttonClass"

                             
                             }
                        ); ;
                });
            }

Hope that helps

#245931
Dec 22, 2020 0:22
Vote:
 

Thank you very much, that works!! :)

#249726
Mar 08, 2021 12:57
* 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.