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.