Question

我想在html编辑器（而不是导航栏）中添加一个可点击的按钮/ image / div。但是当我使用onBeforeSetContent.add函数来过滤内容并添加带有 onclick 标记的元素时，此标记会被剥离。

这一切都是通过一个tinymce插件完成的，因为我使用的是Wordpress。

//replace shortcode before editor content set
ed.onBeforeSetContent.add(function(ed, o) {
    o.content = t.filter_content(o.content);
});

...

filter_content : function(co) {
    return co.replace(/\[icitspot([^\]]*)\]/g, function(a,b){
        return '<img src="#" onclick="alert(\'abc\')" class="wpSpot mceItem" title="clickme" />';
    });
},

Answer 1

不是使用onclick属性，而是应该检测点击事件：

ed.onClick.add(function(ed, e) {
    console.log(e.target);
});

现在您可以检测单击的元素并确定它是否是您的按钮/ div。

Answer 2

使用您自己的解决方案，或者您必须指定onclick作为有效属性，以防止使用tinymce valid_elements设置来限制此属性。

示例：

valid_elements: "@[id|class|title|style|onmouseover|onclick]," +
"a[name|href|target|title|alt]," +
"#p,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span[data-mce-type],hr",

TinyMCE在编辑器中添加可点击的按钮/ div

2 个答案: