« Ego interviewing
Multiple Tomcat instances on Ubuntu »

How to get JQuery and TinyMCE to work

I was just having a ton of issues getting JQuery and TinyMCE to work. Sometimes loading of TinyMCE would hang and never complete and other times I would lose my tinyMCE or jQuery objects for some reason. Well, I’m not sure what the error was, but I finally got it working. It seems that you first need to completely load and initialize TinyMCE before loading JQuery. Here’s my code:

<head>
<!-- Tiny MCE -->
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
  tinyMCE.init({ mode : "none"});
</script>

<!-- JQuery -->
<script type="text/javascript" src="/js/jquery/jquery-1.2.js"></script>
</head>

This seems to work and allow me to do everything AJAX style and use TinyMCE editors in my AJAX forms (i.e. forms that I download the HTML for and that I submit via AJAX). Here’s a simple form snippet that is downloaded via AJAX and placed into a div:

<form action="submit-ajax">
  <textarea id="editor" ...>
  ...
</form>
<script type="text/javascript">
  tinyMCE.addMCEControl(document.getElementById("editor"), "editor");
</script>

This entry was posted on Wednesday, September 12th, 2007 at 5:20 pm and is filed under AJAX. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “How to get JQuery and TinyMCE to work”

  1. tim wee Says:
    September 12th, 2007 at 7:53 pm

    Hi Brian,

    interesting. I used prototype and scriptaculous with tinymce and fckeditor before, and they worked for the most part except sometimes they swallow up and mess up the text that’s entered..
    i’m guessing it’s because jquery overrides a lot of stuff and that might conflict with some of tinymce’s initialization code somehow..
    there really needs to be a lot better “encapsulation” or namespacing (for lack of a better word) of frameworks.
    otherwise, they conflict with each other, or with other third party js stuff that don’t use their syntactic sugar.

  2. James Says:
    October 26th, 2007 at 11:24 pm

    JQuery has a noconflict() method you can use to override it’s use of $ if needed….. and set it to be $Jquery or $j or what ever you want instead, very helpful when mixing up with other frameworks.

  3. stef Says:
    November 7th, 2007 at 2:31 pm

    dude - after hours and hours of searching, trying to get this work you finally provided the solution. THANK YOU!!

  4. Brian Pontarelli Says:
    November 19th, 2007 at 12:21 pm

    Glad I could help!

  5. Matthias Kestenholz Says:
    January 30th, 2008 at 9:08 am

    Whew… many thanks from me too! Everything works perfectly now, after at least one day of wasted hours. Thanks again!

  6. Florin Says:
    March 23rd, 2008 at 7:25 am

    I’m trying to submit a for using ajax(ajaxSubmit) in jquery. In this form i have tinyMCE for a textarea field. It’s obvious the pb is caused by the tinyMCE editor, but don’t have any clue on why it’s not sending the contents of the tinyMCE textarea.

    Any ideeas, please?

    Thanks in advance

  7. Jerome Says:
    April 18th, 2008 at 6:17 pm

    To Florin:
    http://maestric.com/en/doc/javascript/tinymce_jquery_ajax_form

  8. DyadyaZed Says:
    August 22nd, 2008 at 8:33 am

    Thank you! You helped me a lot! I was having a problem with jquery form ajax plugin and tiny mce editor. Now all works perfect! You made my day.

  9. Brian D. Says:
    November 12th, 2008 at 10:43 am

    Kudos to you, mate. Saved me some headaches with this little tip. (addMCEControl is deprecated, I believe, but you can just re-init with the specific textareas and all is well.)

Leave a Reply