How to Add Valid Elements (like iframes) to TinyMCE in Episerver (Updated)

March 2022 Update: This post was originally written for EPiServer version 7. In 2021, Episerver (now known as Optimizely) released version 12. While some parts of this post are outdated, other parts are still relevant and may be helpful. If you run into any issues when configuring TinyMCE, you should refer to Optimizely's official documentation. No content in this post has been changed for the current version.

A couple of years ago, I wrote a post about how to add valid elements to the TinyMCE WYSIWYG editor in Episerver 7. While the same process generally remains for newer version of Episerver, there are some small updates to my previous post that makes it much easier and quicker. In this post, I'll show you the updated way to add valid elements to TinyMCE.

Add the class

To add valid elements to TinyMCE, you need to add a simple class to your project to register the extended valid elements. The name and location of the class does not matter, as long as it is compiled into your project.

There are two important pieces to this class. First, the class needs to be decorated with the TinyMCEPluginNonVisual attribute. Second, the attribute's ServerSideOnly parameter needs to be set to true. This will prevent TinyMCE from trying to load any external JavaScript files, which will cause console errors and likely the UI to break.

[TinyMCEPluginNonVisual(PlugInName = "TinyMceExtendedValidElements", ServerSideOnly = true, AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[src|frameborder=0|alt|title|width|height|align|name]' }")]
public class TinyMceExtendedValidElements
{
}

As you can see in above code, our example is pretty simple. We are just telling TinyMCE to allow the iframe tag and some attributes.

Add the configuration

Next, you need to update the <episerver> section of web.config...

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

And there we have it! Now TinyMCE will stop removing iframe tags from the saved content.

From here, you can simply update the parameter in the TinyMCEPluginNonVisual attribute on the class to allow any other tags and attributes that you need to support in your content.