允许在 EPiServer 中的 TinyMCE 中自定义 HTML 属性答案

【问题标题】：Allow custom HTML attributes in TinyMCE in EPiServer允许在 EPiServer 中的 TinyMCE 中自定义 HTML 属性
【发布时间】：2012-07-09 07:17:58
【问题描述】：

仅EPiServer：

我们的客户正在尝试将自定义属性添加到 TinyMCE 编辑器中的 div-tag - 他们切换到 HTML 模式，进行更改并保存页面。然后删除属性。像这样清洗 HTML 是 TinyMCE 的标准行为，可以将其配置为允许自定义标签属性。

我的问题是如何在 EPiServer 中配置 TinyMCE 以允许自定义 HTML 属性？我不知道在哪里可以挂钩 TinyMCE 的初始化。并且将 div 添加到 episerver.config 中的“安全”标签列表中也不起作用（请参阅 uiSafeHtmlTags）。

例子：

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

变成了

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

来自 TinyMCE 文档，关于如何向标签添加自定义属性：http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements

【问题讨论】：

标签： asp.net tinymce episerver

【解决方案1】：

我有这门课

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 { }
}

这在 episerver.config 中：

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

在最近的一个项目中。如果将 iframe 部分更改为 div[data-href|data-send]，它应该会起作用。

【讨论】：

【解决方案2】：

你有两个选择：

第一

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

将允许 title 和 data-test 在 div 标签中。

div[*] 将允许 div 标签中的 all 属性。

第二

让你的 TinyMCE 插件继承自 IDynamicConfigurationOptions

这样实现函数：

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

.config 文件中不需要配置任何东西（使用 EPiServer 的默认值，它们都可以）。

【讨论】：

【解决方案3】：

这里有一些有用的链接到这个问题

【讨论】：

【解决方案4】：

以下内容对我有用：

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

配置没有变化。

【讨论】：