CODEWITHSUNDEEP
javascriptjquerytinymce
user1032531
user1032531

Reputation: 26321

Target elements in TinyMCE editor

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

Upvotes: 3

Views: 5090

Answers (2)

Sam Battat
Sam Battat

Reputation: 5745

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/

Upvotes: 2

user1032531
user1032531

Reputation: 26321

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

Upvotes: 5

Related Questions