Allow custom HTML attributes in TinyMCE in EPiServ

Question

EPiServer only:

Our clients are trying to add custom attributes to a div-tag in the TinyMCE editor - they switch to HTML mode, makes the changes and save the page. Then the attributes are removed. Washing HTML like this is standard behaviour of TinyMCE, and it is possible to configure it to allow custom tag attributes.

My question is how do I configure TinyMCE in EPiServer to allow custom HTML attributes? I don't see where I would be able to hook into the inititialization of TinyMCE. And adding div to the list of "safe" tags in episerver.config doesn't see to work either (see uiSafeHtmlTags).

Example:

<div class="fb-like" data-href="http://oursite" data-send="false"></div>

Becomes just

<div class="fb-like"></div>

From the TinyMCE documentation, on how to add custom attributes to tags: http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements

Answer 1

You have 2 options:

First

[TinyMCEPluginNonVisual(EditorInitConfigurationOptions = "{ extended_valid_elements: 'div[title|data-test]' }")]

will allow title and data-test in div tag.

div[*] will allow all attribute in div tag.

Second

• make your TinyMCE plugin inherits from IDynamicConfigurationOptions

• implement function like this:

  public IDictionary<string, object> GetConfigurationOptions(){
      var customSettings = new Dictionary<string, object>();
      customSettings.Add("extended_valid_elements", "div[*]");
      return customSettings;
  }
  

No need to configure anything in .config file (with EPiServer's default value, they are all fine).

Answer 2

I have this class

using EPiServer.Editor.TinyMCE;

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

and this in episerver.config:

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

in a recent project. It should work the same if you change the iframe part to div[data-href|data-send].

Answer 3

Here are some helpful links to this question

• http://www.kloojed.com/2010/05/customize-the-tiny-mce-editor-options-in-episerver-cms-6
• http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/
• http://world.episerver.com/Modules/Forum/Pages/thread.aspx?id=45795

Answer 4

The following worked for me:

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

No changes in config.