TinyMCE for jQuery

August 17th, 2009 by Spocke

Before the summer we added a new jQuery plugin and a special jQuery build for TinyMCE but we haven’t displayed or documented until now. The new jQuery plugin enables you to more easily interact with TinyMCE using the standard jQuery functions. This improves compatibility with other jQuery plugins such as validators and we think this is a must have if you use jQuery and TinyMCE together.

The jQuery plugin also adds a special tinymce function that enables you to initialize editors and get the editor instance by using selectors. This function will also enable you to lazy load the core script when it’s needed this is useful where you have a global script in a CMS or site and you want to load and apply TinyMCE only to specific pages and textareas. The plugin also adds a tinymce pseudo selector so that you can select only the textareas that got converted.

Here is an example of lazy loading TinyMCE only for textareas with a specific tinymce class.

// Initializes all textareas with the tinymce class
$().ready(function() {
   $('textarea.tinymce').tinymce({
      script_urlĀ : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js',
      themeĀ : "advanced",
      ...
   });
});

We also made a special jQuery build of TinyMCE this build excludes the Sizzle engine since it’s already in jQuery so it was redundant to have the same logic added twice it also uses the jQuery versions of some functions but currently only some of the basic ones. Stefan Petre contributed some logic for this jQuery adapter however these patches wasn’t introduced in this first release due to some compatibility issues. Also we don’t want to replace to much logic since it isn’t a major gain in size and it doubles the testing time and possible bugs.

It’s also important to say that we have plans for similar adapters and packages for other common libraries but our time and also our knowledge of these are limited so if someone is willing to help out please let us know. We would also be interested in your feedback regarding the jQuery plugin might be things we should improve.

Another thing that’s important is that TinyMCE will remain library independent so even if we release this special jQuery version the main build still works without jQuery and can be used with any library out there.

You can read more about the specifics of the jQuery plugin at the jQuery plugin reference page in the Wiki. The jQuery version and it’s plugin can be found at the download page.

Posted in Development, Software, Work

9 Responses

  1. Nyro Says:

    Thanks for this great enhancement.

    But how does it work with the gzip compressor?

  2. Bram.us » TinyMCE for jQuery Says:

    [...] internal functions and adding a new tinymce function and tinymce pseudo selector. ” — announcement — download — wiki Spread the [...]

  3. Spocke Says:

    Good point. The compressors needs to be updated to support this plugin. They should have been updated anyway since there is a few issues with them that I’ve been meaning to resolve.

  4. Nyro Says:

    In the mean time, I remember created 2 issues for moxiecompressor a while agoe: http://code.google.com/p/moxiecompressor/issues/list

  5. kmcb Says:

    I was actually interested in JQUERY being used as a plugin for TinyMCE, not the other way around. Sorry for any confusion, that I caused.

  6. Spocke Says:

    What should that plugin do? You can use jQuery with TinyMCE all ready.

  7. Bojan Zivanovic Says:

    Are there any updates to the compressor code planned?

    Since tinyMCE is not really on the small side, the compressor is essential.

  8. Spocke Says:

    Is there any issues with the compressor? The only thing it doesn’t support right now is compression when used with jQuery.

  9. Rulatir Says:

    I am in a dire need of a good documentation site dedicated specifically to the tinyMCE jQuery plugin, not to tinyMCE in general.

    The link to the “jQuery plugin reference page” given in the article is outdated, and it redirects to the main page of the tinyMCE wiki. I cannot find a section in the wiki dedicated to the jQuery plugin.

    I am at my wit’s end, having problems with things as simple as getting the actual Editor instance that I have just created with $(element).tinymce(initData). The method itself obviously returns the jQuery object, not the editor instance. It would seem that the API should be simply $(element).tinymce(), but this errors out on me (Undefined variable: tinyMCE), even though the editor is actually created and works.