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>

16 thoughts on “How to get JQuery and TinyMCE to work”

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

  9. 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.)

    Like

    Reply

  13. Thank you so much.

    I have a deadline to tomorow for the project, and this type of issues are very troubled.

    I never imagined it was about jQuery.

    Like

    Reply

  14. That really helped
    i was working
    that really helped as i’m working on newsletter creation module using another jquery plugin for displaying other controls

    thanks anyway

    Like

    Reply

Leave a comment