Upgrading Pods to use TinyMCE instead of NicEdit

Update:My package is now deprecated in favor of a rewrite. Please use that package instead of the one discussed below.

I’ve had my share of troubles with WYSIWYG editors. I’ve had even more trouble with NicEdit. Due to a nasty little bug in WordPress, Pods hasn’t been able to use TinyMCE as WordPress itself does.

NicEdit was frustrating clients left and right, but TinyMCE wasn’t. Some time ago I wrote a plugin that is in dire need of an upgrade called Post Notes that appended any number of WYSIWYG editors for any Post or Page and let you reference them as you wished. I was hoping I could use the same passive method of including TinyMCE in Pods that I had used for Post Notes.

WordPress has come along nicely since I first wrote that plugin, and I’m happy to say that I’ve come up with a working solution to upgrading your NicEdit WYSIWYG columns in Pods to use TinyMCE by adding an Input Helper. Here she is:

Input Helper explained

As a really brief walkthrough what the Input Helper does is modify the markup used to dump out the base textarea that holds our actual data. That’s the standard part. The exiting bit is contained in the conditional at the top of the Helper. The conditional basically checks to make sure that it’s not executed repeatedly for each Paragraph Text column used.

When the time is right the helper will fire wp_tiny_mce() which is a nearly undocumented WordPress function that resembles wp_enqueue_script() on steroids. It will pull in all the necessary scripts for TinyMCE as well as properly initialize them.

The first parameter dictates the TinyMCE theme to use. If set to true the full (advanced) theme will be used, setting it to false results in a stripped down (simple) theme which I prefer to use in this case. The array passed as the second parameter tells wp_tiny_mce() which class to hook, you do not need to edit it. The Package available for download includes both a simple and an advanced TinyMCE Input Helper.

The JavaScript segment of this helper actually hijacks Pods’ saveForm() function call as we need to force TinyMCE to fire triggerSave() which forces the TinyMCE content to be applied to our original textarea which is super important.

Installation

You can snag the TinyMCE Upgrade Input Helper Package from the Pods website. Once downloaded, go ahead and log into the WordPress admin and hit the Package Manager link under the Pods heading:

Then you can hit the Import tab since we’re not Exporting anything:

Just paste the Helper in the provided text box and click Proceed to Confirmation

After Pods validates the Helper you can go ahead and Finalize:

Pods will let you know it’s All done! Your Input Helper is ready to go. Now you can browse to the Paragraph Text Column you’d like to edit which used to look like this:

and update the Input Helper field for the applicable column by first clicking the Edit icon next to your column and then defining the Input Helper by choosing tinymce from the select. Be sure to click Save to ensure the Input Helper is properly defined:

When you go back to edit your Pod, you’ll see a brandy new instance of TinyMCE instead of NicEdit:

Please make sure you’re running the latest versions of both Pods and Pods UI before working with this Input Helper.

Known Issues

I’m currently trying to work with Scott Kingsley Clark on a few details but there may be some problems with using this Input Helper along with a publicForm. Please avoid using this Input Helper on any Pod you plan on using in conjunction with publicForm until it can be better tested. More info coming as soon as possible!

Update: As of March 31, 2010 I can confirm that there is a problem with the Helper if your Pod has not been made Top Level and you’re not using Pods UI for the Pod. If at all possible, making it either Top Level or using Pods UI should achieve the desired results. We’ll keep working away at a fix ASAP!

Update: Version 1.0.2 forces each editor instance to be of a certain height and also disables the resize handle due to it acting up in certain circumstances.