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 · Accepted Answer · 2014-07-22 13:50:21Z

3

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.

answered Jul 22, 2014 at 13:50

Rik de Vos

3,5276 gold badges31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thariama · Accepted Answer · 2014-07-24 07:44:39Z

1

Either use your own solution or you will have to specify onclick as a valid attribute to prevent the stipping of this attribute using the tinymce valid_elements setting.

Example:

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

answered Jul 24, 2014 at 7:44

Thariama

50.9k13 gold badges146 silver badges175 bronze badges

Collectives™ on Stack Overflow

TinyMCE add clickable button/div inside editor

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related