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