November Happy Hour will be moved to Thursday December 5th.

TinyMCE 2 Prevent Code Rewirtes

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
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
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
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
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.
* 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.