Need some TinyMCE jQuery help

Question

I'm trying to get some textarea formatting going on my site using TinyMCE... I'm a little new to integrating this kind of thing and could use some help.

I'm using their jQuery plugin 3.4.x found here.

I can't seem to get any kind of effect on my textareas! They still look like the regular textareas from before integrating this code. I'm following this tutorial.

Here is the script I use which is in my header (the script_url is correct):

<script src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('textarea.tinymce').tinymce({
       theme : "simple"
    });
  });
</script>

And my textarea:

<textarea name="text" class="tinymce"></textarea>

Thanks in advance.

Answer 1

Since you are using jQuery, make sure you're implementing jQuery's $(document).ready() function:

<script type="text/javascript">
     $(document).ready(function() {
        $('textarea.tinymce').tinymce({
           script_url : 'tiny_mce/tiny_mce.js',
           theme : "simple"
        });
      });
</script>

Edit #1

Try loading TinyMCE directly to be assured that there are no issues with loading the file:

<script src="tiny_mce/tiny_mce.js"></script>

Make sure this is loaded BEFORE $(document).ready() but after loading jQuery. Then, omit the script_url parameter for $.tinymce().

Edit #2

There is also a possibility that there is an error with jQuery, or another script on the page. If in Safari or Chrome, right click and select Inspect Element to check out the JS console for errors.

Edit #3

Double-check that you have not mistyped the URL of the tiny_mce script, and that it is loading correctly (clear your cache!) in the browser. Also, if you are using another Javascript framework simultaneously, make sure you run jQuery.noConflict() to see if that is the issue.

Edit #4! I think I found the issue!

Someone who runs a blog evidently had the exact issue as you did. His solution was to completely load and initialize tiny_mce.js before loading jQuery. Here's a link to the post, so you can see how he did it.