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

Solution 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.

Solution 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.

Solution 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.

Comments

[2potatocakes]

I agree with @Thariama's response also, there's not a lot of added benefit really

[Andy]

Thanks for the answers - this is a lot clearer than anything in the documentation and now I'm happy that I'm not missing out by using the standard version. I'm still not entirely sure on the difference between "jQuery version" and "jQuery plugin" though - are those terms basically synonymous?

[Gone Coding]

The main selling point was that the jQuery "build" (not wrapper) was supposed to be smaller than the raw JS version as it uses jQuery and jQuery's Sizzle instead of duplicating functionality from both. Obviously using jQuery may add a runtime overhead if it was not implemented optimally.

[Gone Coding]

@Andy: Based on your comment, I investigated the "differences" and found that a jQuery "version" does not seem to exist. Just a simple jQuery "plugin" to wrap the JS control. Details added in new answer. Will update it as I find out more.

[Andy]

Thanks, that's good to know - It always scares me to have 2 variants of the same thing. I guess it's possible that when I wrote the original question 18 months ago there might have been 2 variants.

[Gone Coding]

@Andy: Either that or there are a lot of "wishful thinking" comments on the TinyMCE website :)

[Ebru Güngör]

Thanks including the jquery brigding file solved my problem too.