In this tutorial, you will learn how to prevent the rich text editor (powered by TinyMCE)from stripping off attributes within the HTML markup when an Episerver page is saved within the editor. Episerver, like the majority of CMS solutions on the market, uses the TinyMCE WYSIWYG editor as the component to power the rich text property. TinyMCE has lots of options and configurations. By default, the out-of-the-box Episerver TinyMCE configuration only allows basic text editing. In a lot of companies this is OK, however, if you need to embed iFrames, SVGs or even inline Javascript within your pages then you will notice very quickly that when you try to save your page, Episerver automatically strips out certain HTML attributes. There is a fix to this situation... you need to configure Episerver to enable the source code view. In today's post, I'm going to explain how to configure Episerver so you can enable and disable any TinyMCE attribute that you want 😊
Configuring TinyMCE in Code
In order to configure TinyMCE you will need to use the Episerver [TinyMCEPluginNonVisualAttribute] attribute, like so:
The code above will allow any attribute to be added to an iFrame within the content editor. I'll briefly discuss what each line is doing:
PlugInName & class name: This value can be anything you want
* AlwaysEnabled*: This should be obvious, add true
* ServerSideOnly*: Not enabling this will result in a javascript error. Episerver will attempt to find a physical file called CustomValidElement.
* EditorInitConfigurationOptions*: This is where you define which attributes are enabled. In the example above, I'm showing you the lazy way. This rule will allow everything. If you want to be really anal and lock everything down, I suggest using a rule structured like this instead:
Configuring TinyMCE in Config
After you have created the TinyMCE configuration, you need to tell Episerver to use it. Add this line into your web.config (or episerver.config for legacy projects):
If you want more information on exactly how this step works, I suggest reading the Episerver guide on TinyMCE here. One thing to note is that Episerver will always strip out the name attribute, regardless if you enable it. Try it yourself if you don't believe me:
No matter what I've tried I can't prevent the name attribute from being stripped out. You can use the id property as a workaround (which does work). That is all you need to allow for extra HTML to be added into the rich-text property. Happy Coding 🤘
