TinyMCE 2 Prevent Code Rewirtes

London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

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

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.