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

  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

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

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s