Optimizely CMS12中通过TinyMCE插件添加VueJS指令失败求助

背景 #

我们基于Optimizely CMS 12的网站正在从AngularJS迁移到VueJS 3，最后一个卡点是：无法通过TinyMCE插件向生成的HTML中添加VueJS指令。

已尝试的解决方案 #

1. 后端配置TinyMceConfiguration添加属性 #

我在后端通过TinyMceCustomizations的attributes字典，给样式格式添加Vue指令：

public static IServiceCollection AddTinyMceCustomizations(this IServiceCollection services)
{
    services.Configure<TinyMceConfiguration>(config =>
    {
        // 添加高级列表、表格、代码插件
        // 工具栏追加插入/编辑表格、查看源代码按钮
        config.Default()
            .AddPlugin("xxx")
            .Toolbar("xxxxe")
            .StyleFormats(
                new { 
                    title = "Accordion heading", 
                    block = "h2", 
                    attributes = new Dictionary<string,string> { {"v-accordion",""}}, 
                    classes = "accordion-header" 
                }
            );
    });
    return services;
} 

试过自定义指令v-accordion，也试过v-show="false"、v_show="false"，均无效。

2. 自定义TinyMCE插件 #

我还编写了一个自定义TinyMCE插件，试图给元素绑定Vue指令：

/**
 * 自定义插件：用<mark>标签包裹文本实现高亮，适用于博客等场景
 */
tinymce.PluginManager.add("markButton", function (editor, url) {
    editor.on('init', function () {
        // 注册自定义格式化规则，给选中内容包裹<mark>标签并添加v-show属性
        editor.formatter.register('mark', {
            inline: 'mark',
            attributes: { v_show:'false' }
        });
    });

    editor.addButton('markButton', {
        icon: 'backcolor',
        tooltip: "Highlight text",
        onclick: function (e) {
            // 给选中内容切换<mark>标签
            tinymce.activeEditor.formatter.toggle('mark');
        },
        onPostRender: function () {
            // 选中节点变化时，若当前是<mark>元素则高亮工具栏按钮
            editor.on('NodeChange', function (e) {
                this.active(e.element.tagName === "MARK");
            }.bind(this));
        }
    });

    return {
        getMetadata: function () {
            return {
                name: 'Mark button',
                url: 'https://xx.dk'
            };
        }
    }
});

这个方案同样没有达到预期效果。

期望与实际输出 #

• 期望生成的HTML：

<h1 v-accordion>Test</h1>

（h1为示例，实际目标元素可以是h2）

• 当前实际渲染结果：

<h2 class="accordion-header">XXX</h2>

内容的提问来源于stack exchange，提问作者Z.IT