TinyMCE编辑器中的目标元素

Question

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 (ie 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?}});

Answer 1

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');});
        });
    }
});

Answer 2

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.net/rqwVA/1/