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",