Geek asks and answers

Allow custom HTML attributes in TinyMCE in EPiServer

EPiServer only:

Our clients try to add custom attributes to the div tag in the TinyMCE editor - they switch to HTML mode, make changes and save the page. Then the attributes are deleted. Erasing HTML is a standard behavior of TinyMCE and can be configured to allow custom tag attributes.

My question is how to configure TinyMCE in EPiServer to allow custom HTML attributes? I do not see where I could connect to TinyMCE initialization. And adding a div to the list of "safe" tags in episerver.config also does not work (see UiSafeHtmlTags).

Example:

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

It's just getting

<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

+5
source share
4 answers

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 is 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].

+10
source

You have 2 options:

First

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

permit titleand data-testtag div.

div[*]will allow the use of the all attribute in the div tag.

Second

  • make your TinyMCE plugin inherit from IDynamicConfigurationOptions

  • implement the function as follows:

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

You do not need to configure anything in the .config file (using the default EPiServer, everything is fine).

+2

The following worked for me:

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

There are no changes to the configuration.

0
source

More articles:


All Articles