Reputation: 26321
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
Reputation: 5745
Use this logic:
//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
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