Removing inline styling and width attribute after modifying the t

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

Aud Marie Hauge

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

Paul

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

Aud Marie Hauge

Vote:

Thank you very much, that works!! :)

#249726

Mar 08, 2021 12:57

Drew Null

Vote:

This is what I was looking for:

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

👍

#267578

Nov 30, 2021 2:41

Try our conversational search powered by Generative AI!

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