How do i use TinyMCE jQuery package and what is the difference with TinyMCE jQuery plugin

Question

I've seen this post What is the TinyMCE jQuery Package? which explains what the v4 TinyMCE jQuery package is but the post and the tinymce site only contain examples of v3.

When I download the v4 TinyMCE jQuery package there is no tiny_mce.js; there seems to be two files jquery.tinymce.min.js and tinymce.min.js. I've read that if I include both files then I am using full TinyMCE and not the jQuery version, but if I only include the jQuery file, my call to tinyMCE.init fails with "tinyMCE is not defined".

I'd really rather be figuring this out from the documentation, but I've tried to search it and can't find anything about the jQuery version.

On a related point can anyone explain what the TinyMCE jQuery plugin is and how it relates to the above? I think that may be the gap in my understanding.

Thanks very much in advance

Answer 1

I ran into the same issue a few weeks back. You don't need to use tinymce as a jQuery plugin but the option is there if you would like to. The vast majority of the tinymce source code is in the tinymce.min.js file and the jQuery.tinymce.min file just contains the code that wraps the tinymce functionality into a jQuery plugin. Anyways, if you want to use it you'll need to require both.

<script src="/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/js/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="/js/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>

The only main difference as far as I know in terms of TinyMCE is the way the editor is initialised. If you're not using jQuery you'd initialise it something like this:

tinymce.init({
    selector: 'textarea',
    theme: "modern"
    ...
}) 

Whereas when you're using it as a jQuery plugin you can use jQuery to initialise it and you get the added benefit of being able to chain additional jQuery goodness onto your initialisation method. As in:

$('textarea').html('<p>some dynamic content</p>').tinymce({
   theme: "modern",
   ...
})

Other than that they're basically the same I think.

Answer 2

The tinymce jQuery version enables a developer to use jQuery commands concerning the tinymce editor. I strongly advise anyone who listens not to use the jQuery build of tinymce and stick with the regular tinymce version. The reason for this is easy: the overhead of creating additional objects and elements using the jQuery version does not weight out the benefits. In case of using own tinymce plugins with several keyevent handlers i found out that the jQuery tinymce version took a long time to process many fast keyboard strokes (resulting in a delay of the appearance of letters in the editor). The way to go here is to use the regular tinymce build and load the regular jQuery on the main document as well. Accessing tinymce and adressing html elements using jQuery is then possible.

Answer 3

Given the confusion over the jQuery "version" vs. jQuery "plugin", I though I would investigate as I am adding TinyMCE to an MVC jQuery project at the moment.

I installed the raw TinyMCE NuGet package from Exphox (raw JS version) in one project and the TinyMCE.jQuery NuGet package in another project.

I then compared folders, files, size etc with Araxis Merge, and then "prettified" the minified source code to examine the contents.

Here are the NuGet results:

The NuGet packages are identical with the exception of the single jquery.tinymce.min.js file, which was added to the TinyMCE.jQuery NuGet package.

The jQuery file is just a straight-forward plugin to apply the MCE to jQuery elements!

So, as far as the NuGet packages go, the jQuery version is nothing but a plugin implementing TinyMCE on jQuery elements. Nothing else!

This goes against the comments found here http://www.tinymce.com/tryit/3_x/jquery_version.php that state:

This example loads a specific jQuery version of TinyMCE this version is a bit smaller since it doesn't include some redundant logic such as the Sizzle engine.