I'm writing a plugin for TinyMCE and I want to use jQuery to do some manipulation on the document being editted.
I'm not looking for a way to use TinyMCE with jQuery (e.g. an .tinymce() method on a selector), I know there are solutions for that.
Basically I need to include jQuery in the iframe generated by TinyMCE.
tinymce.dom.ScriptLoader seems to load in the parent window, not in the iframe, so that's not an option.
What I've tried so far:
Anyone using jQuery in TinyMCE plugins? How?
Update / solutution
Thanks to Thariama's suggestion I was able to get this to work. You can use either an explicit tinymce.get() to get the editor, or the 'ed' instance that's passed to your plugin's init() method. It turns out however that at the init stage itself you cannot (yet) access the parent this way. You can do this in a specific handler.
E.g.
(function($) {
tinymce.create('tinymce.plugins.SOSamplePlugin', {
init: function(ed, url) {
$ = ed.getWin().parent.jQuery; // <- WON'T WORK!
ed.addCommand('soCmd', function(ui, v) {
if(e = ed.selection.getNode()) {
$ = ed.getWin().parent.jQuery; // <- WORKS!
$(e).wrap('<div class="sample" />');
ed.execCommand("mceRepaint");
}
});
ed.addButton('SO', {
title: 'Title',
cmd: 'soCmd',
image: 'somebutton.png'
});
},
getInfo: function() {
return {
longname: 'Example Plugin',
author: 'Ivo',
authorurl: 'http://vanderwijk.info/',
infourl: 'http://vanderwijk.info',
version: '1.0'
};
}
});
tinymce.PluginManager.add('so', tinymce.plugins.SOSamplePlugin);
})($);
It is easy
var editor = tinymce.get('your_editor_id');
jQuery is acessible using
editor.getWin().parent.jQuery
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With