The new 3.3 version of TinyMCE has an even better jQuery support than before the jQuery plugin has been rewritten from scratch and we have added jQuery handling to the editor instances.

New $ object for editor instances

Previous versions of the jQuery build of TinyMCE only excluded Sizzle and used jQuery instead for finding elements that reduced the size of the TinyMCE core. The new version however takes the integration a step forwards by adding the jQuery object to the tinymce namespace and an augmented version for editor instances. The instance specific jQuery method will be scoped to the editors iframe document. Also notice that this is part of the jQuery build of TinyMCE so it will be available even if you don’t use the jQuery plugin. Here is some examples on how use jQuery with editor contents.

// Add color and append some contents to each paragraph inside the editor
tinymce.activeEditor.$('p').css('color', 'red').append('Hello world');

// Sets the HTML contents of the first editor instance on page
tinymce.get(0).$('body').html('Hello world');

Compressor support

The jQuery plugin can now lazy load TinyMCE using the compressor you just need to specify the path to the compressor script instead of the tiny_mce.js script. We recommend using the compressor since it reduces the size and loading time of TinyMCE but it still gives you the flexibility to have a dynamic plugins sets for different pages.

$().ready(function() {
    $('textarea.tinymce').tinymce({
        // Location of TinyMCE script using gzip
        script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php',
        ...
    });
});

Keeping clients up to date

A common problem is when updating the TinyMCE version the clients browser cache isn’t updated as well. We added a solution for this by adding support for query string suffixing. So adding a query string to the script_url in the jQuery plugin will also add it to all other resources loaded by TinyMCE and thereby update the browser cache since each url will now be version unique. Here is an example on how to add the current TinyMCE version as a query string parameter to update the cache.

$().ready(function() {
    $('textarea.tinymce').tinymce({
        // Location of TinyMCE script using gzip
        script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php?v=3.3b1',
        ...
    });
});

Direct access

The previous version of the jQuery plugin in case you missed it had support for direct manipulation of editor instances using the jQuery methods this makes it easier to for example add TinyMCE to a form with some jQuery form validation or Ajax posting since it will return the iframe value when you access the contents of the converted textarea. You can read more about these methods on the jQuery Plugin reference page in the wiki we will add more details on that page over time. Here is some examples of the direct access approach:

// Setting editor contents
$('#textareaid').html('<p>Hello world!</p>');

// Getting editor contents
var html = $('#textareaid').html();

// Accessing the TinyMCE editor instance and setting some contents at caret position
$('#textareaid').tinymce().selection.setContent('Hello world!');

Psuedo selector

The previous version of the jQuery plugin also added a tinymce pseudo selector that enables you to do operations on all tinymce instances of a page. Here is an example:

// Adds a hello world paragraph to all editor instances
$('textarea:tinymce').html('<p>Hello world!</p>');

Final words

The development of these enhancements where a collaboration between Todd Northrop aka Speednet and Moxiecode. Any feedback regarding the jQuery plugin is always welcome. I think there is still a lot more we can do here and we are also open to have official plugins for other popular JS frameworks however we have less experience with those so if you are an expert and want to help out feel free to drop us a message.