How To Prevent TinyMCE / The Richtext Editor Stripping Attributes Off Your HTML Elements in Episerver

Episerver, like the majority of CMS solutions on the market, uses the TinyMCE WYSIWYG editor to provide content editors the ability to add and edit content within the CMS. By default, Episerver locks TinyMCE down to only allow basic text editing. In a lot of companies this is OK, but, if you need to use iFrames, SVGs or even inline Javascript then you’ll probably notice very quickly that when you try to save your page, Episerver strips out certain attributes from your HTML elements. There is a fix to this… you need to tell Episerver which extra attributes that you want to allow. In today’s post I’m going to explain how to configure Episerver to allow any attribute that you want on an iFrame.

Configuring TinyMCE in Code

In order to configure TinyMCE you will need to use the Episerver [TinyMCEPluginNonVisualAttribute] attribute, like so:

[TinyMCEPluginNonVisual(
PlugInName = "CustomValidElement",
AlwaysEnabled = true,
ServerSideOnly = true,
EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*]' }")]
public class CustomValidElement
{
}

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: Can be anything you want
  • AlwaysEnabled: Should be obvious
  • ServerSideOnly: Not enabling this will result in a javascript error. Episerver will attempt to find a physical gile called CustomValidElement.
    tiny_mce_serversideonly
  • EditorInitConfigurationOptions: Your rules. IN my example I’m being lazy and allowing everything. If you want to be really anal and lock everything down, then I suggest using this rule instead:
    extended_valid_elements: 'iframe[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|id]'
    
  • Configuring TinyMCE in Config

    After you have created the TinyMCE configuration, you need to tell Episerver to use it. If you want more information about this step, I suggest reading the Epi guide on TinyMCE here. Add this line into your web.config (or episerver.config for legacy projects):

    <episerver>
    <tinyMCE mergedConfigurationProperties="valid_elements, extended_valid_elements, invalid_elements, valid_child_elements" />
    </episerver>
    

    One thing to note is that Episerver will always strip out the ‘name’ attribute, regardless if you add it as a rule, try it yourself if you don’t believe me:

    iframe[name]
    

    No matter what I’ve tried I can’t prevent the ‘name’ attribute from being stripped out. You can use the ‘id’ so there is a workaraound.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *