How to add support for iframes (and other elements) to TinyMCE in EPiServer CMS
Posted on October 18, 2010 by Frederik Vig in EPiServerOne of my clients had some problems adding an iframe inside the TinyMCE editor that ships with EPiServer CMS. After looking a little at the documentation I saw that the default was not to allow iframes.
Here’s a list of the default valid elements of TinyMCE: TinyMCE:Configuration/valid elements.
The fix turned out to be fairly simple. All I needed to do was add the iframe element to the valid elements of the TinyMCE editor (along with the attributes).
using EPiServer.Editor.TinyMCE; namespace Customer.Web.Templates.Plugins.TinyMCE { [TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[src|frameborder=0|alt|title|width|height|align|name]' }")] public class ExtendedValidElements { } } |
And in my episerver.config file.
... <tinyMCE mergedConfigurationProperties="valid_elements, extended_valid_elements, invalid_elements, valid_child_elements" /> </episerver> |
More on EPiServer CMS and TinyMCE: TinyMCE Developers Guide.
Kjetil Simensen says:
Post Author October 20, 2010 at 14:52Just added the code to our project and it worked perfectly. Thanks!
Kjetil Simensen says:
Post Author October 21, 2010 at 08:06PS: you can get a iframe plugin here: http://sourceforge.net/tracker/?func=detail&aid=2705883&group_id=103281&atid=738747
Martin Andersson says:
Post Author May 17, 2011 at 15:47This is broken in atleast CMS6 R2 for Chrome and Firefox. I got this http://tedgustaf.com/en/blog/2011/4/upgrading-to-episerver-cms-6-r2/ from Ted.
The solution is as he does, create an empty handler and reg the path http://domain/util/Editor/tinymce/plugins//editor_plugin.js in my case http://gt.local/util/Editor/tinymce/plugins/ExtendedValidElements/editor_plugin.js to the empty handler.
OR just create an empty file in your project matching above path (or create a virtual path) so it can get the bloody file and everything will be tip top.
Frederik Vig says:
Post Author May 18, 2011 at 10:07Hi Martin
I’ve updated the post with a solution that also works with EPiServer CMS 6 R2. Thanks for the heads-up.
Frederik
Ben says:
Post Author September 19, 2012 at 15:50how do you add this code to your project, just create an empty class? What if you don’t have the original project files, is there another place we can add the code snippet in?
Frederik Vig says:
Post Author September 22, 2012 at 17:34Just create an empty class and add the TinyMCEPluginNonVisual attribute. You can add it to a new project, just make sure to place the dll file in the bin folder of your main web project.