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

Question

我想在html编辑器（而不是导航栏）内添加可点击的按钮/图片/ div。但是，当我使用onBeforeSetContent.add函数过滤内容并添加一个标签时，该标签被剥离。

这是所有通过tinymce插件btw完成，因为我使用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",