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
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].
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
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With