TinyMCE 2 Prevent Code Rewirtes

Valina Eckley

Vote:

I'm having a probelem with the TinyMCE editor rewriting code when I go to the code view, and it is breaking things.

For example I'm trying to add a span tag inside an a tag for a font awesome icon.

I have this

<a class="btn btn-primary"><span class="fa fa-search">&nbsp;</span></a>

But when I add an ID to the a class it rewrites the HTML to this

<a id="test" class="btn btn-primary"></a><span class="fa fa-search">&nbsp;</span>

There is absolutly no reason for it to re-write this code. So I need a way to prevent TinyMCE to prevent code rewrites

The ony thing I have discoved in the TinyMCE documentation was a "Verify HTML" for version 3. But since EPi now uses version 4, this seems to no longer work. I've added these settings in my TinyMCE config, and I can't get it to stop rewriting html from the code view.

.AddSetting("verify_html ", "false")
.AddSetting("cleanup", "false")

Any Suggestions?

#200402

Jan 10, 2019 20:14

Jake Jones

Vote:

Hi Valina,

As far as I can see cleanup would have done the trick, but was removed in 3.4.

However, checkout allow_html_in_named_anchor, seems like it will do exactly what you want!

#200436

Jan 11, 2019 16:53

Valina Eckley

Vote:

Hi Jake,

Thanks for the suggestion, but i can't seem to get this, nor any of the settings to work.

I've added the .AddSettings throughout the config and I can't seems to get this, or the keep_styles = false to apply

Here is what I have, and for some reason the "addSettings" are not applying.

 config.Default()
                .AddEpiserverSupport()
                .ContentCss("/static/css/Editor.min.css")
               
                .AddPlugin("lists epi-link image charmap print preview anchor  code searchreplace  fullscreen  media table help  epi-image-editor  epi-dnd-processor epi-personalized-content spellchecker")
                .Toolbar("formatselect styleselect removeformat | bold italic charmap | anchor epi-link  epi-dnd-processor epi-personalized-content  | image epi-image-editor media  | table  bullist numlist | searchreplace  | undo redo |  code ")

                .BlockFormats("Paragraph=p;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6")
                .StyleFormats(
                    new { title = "Screen Reader text", inline = "span", classes = "sr-only" },
                    new { title = "Red", inline = "span", classes = "red" },
                    new { title = "Center", selector = "*", classes = "text-center" },
                    new { title = "Indent", selector = "*", classes = "indent" },

                    new { title = "Clear Fix", selector = "*", classes = "clearFix" }
                    )
                    
                    .AddSetting("keep_styles", "false")
                    .AddSetting("allow_html_in_named_anchor ", "true")
                    .AddSetting("allow_conditional_comments", "true")

                    ;

I've even trieds adding .AddSetting("selector", "textarea") above the keep_styles and nothing is working.

#200521

Jan 14, 2019 18:57

Jake Jones

Vote:

Hi,

Somehow managed to delete both my posts. Anyway, I copied and pasted your configuration into Alloy and removed the extra space in allow_html_in_named_anchor:

.AddSetting("allow_html_in_named_anchor ", "true")

...and it worked!

After checking what keep_styles does, I also think it worked — although haven't tested thoroughly.

#200524

Jan 14, 2019 19:42

Valina Eckley

Vote:

I took off the space and I was still having some funky problems.

I added valid_childen and that seemed to work. It isn't the best soultion, but I think it might be working for now...

.AddSetting("valid_children", "a[div|p|h1|h2|h3|h4|h5|h6|ul|ol|li|strong|em|i|img|span]")

#200525

Jan 14, 2019 20:30

rizwansegana - Apr 20, 2021 10:47

Hai Valina,
Where should i add this ?!, myself also having same issue.

Faisal - Apr 20, 2021 10:48

i need also

Jake Jones - Apr 20, 2021 10:52

Documentation:
https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/configuration-api/

Example:
https://github.com/episerver/alloy-mvc-template/blob/master/src/Alloy.Mvc.Template/Business/Initialization/ExtendedTinyMceInitialization.cs