TinyMCE add clickable button/div inside editor

Question

I would like to add a clickable button/image/div inside the html editor (not the navigation bar). But when I use the onBeforeSetContent.add function to filter content and add an element with an onclick tag, this tag gets stripped.

This is all done via a tinymce plugin btw since I'm using 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" />';
    });
},

Rik de Vos Rik de Vos · Accepted Answer · 2014-07-22T13:50:21

Instead of using the onclick attribute, click events should be detected in general:

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

Now you can detect the element that was clicked and determine if it's your button/div.

TinyMCE add clickable button/div inside editor

2 Answers