Comments on: Integrate tinyMCE into a WordPress widget

By: Dan Imbrogno

Dan Imbrogno — Sat, 07 Nov 2009 16:48:20 +0000

Hi all, I had lots of problems trying to get WordPress’ TinyMCE code to work with my plugin nicely. I kept running into problems trying to load the language translations. This resulted in having all these ugly titles in the link and image insert menus. I was including the javascript manually because using wp_enqueue_script(‘tinymce’) didn’t seem to work.

The solution was to simply call the following function in the template_redirect action (wp_head might work as well):

wp_tiny_mce();

Then I simply inserted my initialization code, and everything works, language translation and all!

/* */

Here’s my blog post on the subject: [ Link moved to main blog post. Thanks Dan. ]

By: Matty

Matty — Sat, 07 Nov 2009 08:08:27 +0000

Thanks for your comment, Simone. I’m glad you found what you were looking for.

By: simone

simone — Tue, 03 Nov 2009 15:14:10 +0000

Great, after a long trip I’ve found the answer to my needs!!!

Thanks.

By: Matty

Matty — Wed, 12 Aug 2009 07:11:43 +0000

Wow! Thanks for posting this, Michael.

By: Michael

Michael — Tue, 11 Aug 2009 20:48:44 +0000

Here it is cleaned up and fully functional … Please note you will need to place the TinyMCE libraries into the directory of the plug-in. Hope you enjoy =)

(Code snippet moved to main post content, for consistency.)

By: Matty

Matty — Tue, 11 Aug 2009 20:12:36 +0000

That’s really awesome, Michael, thanks for posting. Your explanation is really helpful as well.

By: Michael

Michael — Tue, 11 Aug 2009 19:48:33 +0000

Here’s a correction to my previous post: the live function wouldn’t work in this situation since it handles events such as click, mouseover etc.

I did however get tinyMCE to load into a widget in wordpress 2.8.3. For those of you having trouble getting the editor to save in the widget form, you must include this code into the tinyMCE.init function :

setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}

Now the main problem with this situation was that wordpress loads the form again after you save. Disabling the editor. What I did was in the update function of the widget I pass a variable to define that the content has been updated. Then in the form display code I check for this variable and recall the init function to get the editor back into the widget.

After I tidy up my code a bit I will post it and hopefully it will help a lot of you guys out. =)

By: Matty

Matty — Tue, 11 Aug 2009 18:33:23 +0000

Thanks, Michael.

The use of jQuery’s live() sounds like a pretty solid solution to me. This may prevent users using a pre-1.3 version of jQuery from using this feature as, if I understand correctly, live() has been included only since jQuery 1.3. This can, however, easily be resolved by including the jQuery library from Google Code instead of relying on the native WordPress jQuery library.

Thanks for posting, Michael. I look forward to reading your progress updates.

Cheers,
Matty.

By: Michael

Michael — Tue, 11 Aug 2009 17:39:29 +0000

It seems the issue to this problem is with how wordpress is handling the ajax requests. TinyMCE.init is called on load when the widgets page is loaded. In order to keep the editor intact it will require recalling the init function after the ajax request completes. Maybe using jquery’s live feature to bind to the textarea’s class? I will keep ya’ll updated on my progress if i get this feature to work without the AM.

By: Matty

Matty — Sat, 08 Aug 2009 06:44:47 +0000

Great.

So the next step is to get it working without AM.

I should have a bit of time today to do some research and testing into this.