Allow custom HTML attributes in TinyMCE in EPiServer

问题

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

回答1:

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

回答2:

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).

回答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

回答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.

来源：https://stackoverflow.com/questions/11390552/allow-custom-html-attributes-in-tinymce-in-episerver

标签

ASP.NET

tinymce

episerver