What is the best way to target elements (say all images of a given class) in the TinyMCE 4 editor. I found some older solutions (i.e. Adding hover event to elements inside a tinymce editor), however, they apply to TinyMCE 3. Note that elements can be added to the editor after initial rendering, so it would need something like jQuery's on() functionality.

One option might be to to do something like $('#tinymce_id').contents()....

Or maybe when configuring TinyMCE, tinymce.init({'selector': '#tinymce_id','setup' : function(ed) {do something here?}});

What is the best way to target elements (say all images of a given class) in the TinyMCE 4 editor. I found some older solutions (i.e. Adding hover event to elements inside a tinymce editor), however, they apply to TinyMCE 3. Note that elements can be added to the editor after initial rendering, so it would need something like jQuery's on() functionality.

One option might be to to do something like $('#tinymce_id').contents()....

Or maybe when configuring TinyMCE, tinymce.init({'selector': '#tinymce_id','setup' : function(ed) {do something here?}});

• javascript
• jquery
• tinymce

Share Improve this question Follow edited May 23, 2017 at 10:31 CommunityBot 111 silver badge asked Sep 12, 2013 at 20:48 user1032531user1032531 26.3k7575 gold badges245245 silver badges416416 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The best way I found to do it.

tinymce.init({
    'selector': "#tinymce_id",
    'setup' : function(ed) { 
        ed.on('init', function(e) {
            $(ed.getBody()).on("click", "img", function() {alert('hello');});
        });
    }
});

Use this logic:

• Get TinyMCE text
• Convert it to a DOM (HTML) element
• Select anything using jquery
• Modify or do what you want with those elements selected
• Convert the html back to text
• set the content of the TinyMCE editor to the new html

//on click event
$("#test").click(function(){
    //get the text of the tinymce editor and convert it to an html element
    html = $.parseHTML(tinymce.activeEditor.getContent());

    //do anything with the content here
    $(html).find("img.editor-img").css("width", "100px");

    //convert it back to text
    text = $(html).html();
    //add it to the tinymce
    tinymce.activeEditor.setContent(text);
});

Example: http://jsfiddle/rqwVA/1/