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.
Comments
Hi Jonathan,
was trying out this input helper, followed the steps described here (am running WP2.9.2, Pods CMS Version 1.8.4, Pods UI Version 0.6.8.2 (no update notifications), but still got an error.
“Fatal error: Call to undefined function wp_tiny_mce() in /var/web/fn0639/highlifeplus.com/wp-highlife/wp-content/plugins/pods/core/input_fields.php(40) : eval()’d code on line 6”
What am I missing ?
That’s strange — I ran into that issue as well but upgrading Pods solved it for me. Did you copy and paste from this article or snag the Helper from the Pods site?
I snagged the helper from Pods-site, tried to replace the tinymce_simple-input helper code with the code from above via copy-paste. Problem stays.
Thanks for the feedback, Tom. I will do my best to reproduce the issue and more importantly squash it ASAP.
Hey Tom quick follow up — do you get the error using both the simple and advanced helper?
Additionally would you mind providing a bit of detail surrounding the Pod you’re working with? Have you made it a Top Level item? Is it using Pods UI? Neither?
Jonathan, I mailed you all answers and some more. T.
Thanks for following up Tom. I’ll amend the article but wanted to let everyone know that it seems at this stage the Helper only works when your Pod is a Top Level Pod or used via Pods UI.
Great work with this one!
What I do miss is the possibility to upload media directly when editing. Ideally, I would like the “Add media” links that are available when editing WordPress pages, to appear above the TinyMCE. Do you reckon this is possible?
I’ve been trying to add some code to your helper, but can’t get the upload window to open in an iframe and save the url back to the TinyMCE-window.
Jonathan, & others,
I found the ‘problem’.
You do have to set the pod as Top Level Menu, but when editing an existing Pod with the TinyMCE Helper assigned to a field, you also have to go via the Pod in the lefthand sidebar (because it is a Top Level Menu) and not via Browse Contents.
Then the TinyMCE Input Helper works just fine. If you go via Browse Contents, the error still displays.
ToM.
Jonathan, & others,
Huge fan of both pods and MondayByNoon! Sadly, much as I would REALLY LIKE TO REPLACE nicedt, I can’t get this to work even WITH the pod set as a Top Level Menu item?
I ‘ve put a good deal of effort into developing a plugin for an e commerce catalog manager project, specifically to provide a more robust alternative to the default (add/edit) options provided by Pods Top Level Menu selection.
Said plugin returns sub-menus options “GalleryView(includes filtering), List View(with bulk actions), Add New(borrows from pods/core/manage_content.php), and finally Import!@”
Apparently some of you have gotten it to work (provided your end user holds his or her mouth just right), but what would be really nice (those of you who’ve gotten it “working”) is to actually pin down the cause of the on-again-off-again — maybe it’ll work — sort of — behavior?
There is IMHO a huge difference between saying “I found the problem”
and saying, well… if you stand facing due south, on one foot, with your finger in the opposite ear… a wad of tinfoil clenched in your teeth…
This is definitely my fix, and for all intensive purposes I use Pods UI for everything which allows this Helper to work. It’s not endorsed by the Pods devs and although I’m trying to collaborate on a fix with them, the root problem lies within WordPress itself (as noted in the article). The simple solution here is to use Pods UI (and therefore use the Pods UI menus you create) to edit and manage your Pods using this Helper.
If you can provide some detail regarding the actual problem you’re having (is it the same error Tom outlined above?) I can try to help you out further.
Thanks Jonathan!
Yes, same error. My specific hope in posting, was to discuss the nature of said fatal error itself, in the context of a NON TOP MENU ITEM POD in the further hope of discovering/evolving a work around.
Otherwise, there is not much detail to provide.
It’s a pretty straightforward products pod employing ColType desc to generate … you guessed it… “product description”s .
Finding scarce evidence of any overview describing what Pods UI is and what it is intended to do, I have not troubled to attempt employing it.
(Same goes with Public Forms. What is it?)
That said, have I gone way-out-of-my-way evolving alternative Products Pod
List, Gallery, Add New, and Import menu items and pages, simply to facilitate
Gallery and List Views with user friendly Error State Indicators, Filtering and Bulk Action updates/deletes?
Pods UI to the rescue?
The desired functionality which brought me here, is the addition of an error class (via helper) to the individual pod column fields should there be an error state (e.g. duplicate product_name or product_id resulting from csv import, OR in this case MISSING PRODUCT DESCRIPTIONS) .
(though the description field is set to required, an error class would be helpful for editing existing pod items added via import resulting in an error state where required fields are NULL).
The problem I’m having with nicedit, is getting a jq.click (or better still jq.change) event to register from without (remote.js) to unset the error.css (works in IE6 but not moz).
I was hoping that a move to WP’s native TinyMCE might render this possible.
Understood — it seems like you’ve very much customized how you’re using Pods and unfortunately without intimate knowledge of what you’ve implemented thus far I can’t offer much guidance as of now. That said, the only current workaround is to implement the Helper as described above. I would suggest hopping in the Pods forums and seeing what assistance can be obtained from there. Again though, without others knowing what you’ve implemented this far I’d imagine you’re in the same boat as the rest of us waiting for the core WP bug to be resolved.
The problem has absolutely NOTHING to do with my ‘customizations.’
I have not altered pods core (nor wp core) in any way, shape or form, but simply added an abstraction layer via an additional (self contained) plugin.
Removing the plugin has no effect. From the unaltered top level pods menu, the error persists. Academically, it would be interesting to know (as a starting point) — and with some degree of specificity — why the error occurs (for those of you for whom the package works at all) if and when the pod is not top level. As the pods guru responsible for developing this package, I had hoped you might have some insight on that count.
Keep up the good work, and thanks just the same!
I didn’t suggest that you altered Pods or WP. My entire point is this abstraction layer you’ve built. The error occurs on non Top Level pages because the form itself is pulled in via Ajax, therefore leaving out a number of includes. One of which includes the definition of wp_tiny_mce().
Have been trying to deduce the code some more but with no luck. Would love a reply as to whether you’ve thought about or even tried to get the “Add media” links that are available when editing WordPress pages to appear above the TinyMCE.
Thanks again for your great plugin!
Hi Daniel. Until the core WP bug is fixed I wouldn’t imagine exploring that enhancement, unfortunately. Perhaps down the line once some other issues are ironed out.
when pods is trying to validate the helper i’m getting the following error:
Fatal error: Cannot use object of type stdClass as array in wp-content/plugins/pods/ajax/package.php on line 263
This happens for both pods 1.8.4 and 1.8.5.
Hi again. I managed to get this working after a little more digging in the code. Have posted my solution on the pods Website. Just wanted to say thanks for your input helper here as well, since I worked from that one with the additions.
Hi Jonathan,
First I want to thank you for the clear explaination of using Pods within a WP site. It helped me a lot.
For all the people who are still having trouble to get this TinyMCE helper to work with pods. Pods UI isn’t the user interface of the Pods plugin but it’s a seperate plugin wich can be downloaded at: http://wordpress.org/extend/plugins/pods-ui/
But maybe I’m the only one who overlooked this… 😀
hmm… I can only get the simple TinyMCE to work.
When I choose the advanced TinyMCE I only see a text-field with no buttons above it.
I’m using Pods 1.8.7, Pods UI 0.6.8.2, WP 2.9 and TinyMCE 3.2.7 on XAMPP.
When I use the simple TinyMCE to input some text in a top-level POD it hangs when I save the content. Firebug says:
nicEditor is not defined
new nicEditor(config).panelInstance(elements[i].id);\n
purl is not defined
I will try to replicate the issue as soon as possible.
Hey,
Is there any way to get the add media dialog working in here? I’ve played around but couldn’t get it working…
Cheers,
Craig
Is there already an update on this issue?
Not quite yet, I’m sorry to say. Projects have pretty much preoccupied me for the past few weeks but I hope to revisit the issue soon. I know a few other Pods devs are going to give it a whirl as well. The official Pods forums will be a good place to keep an eye on for the time being.
Hey Craig, I actually haven’t gotten to the level of attempting that quite yet I’m sorry to say.
Ok thank you!
Also getting Fatal error: Cannot use object of type stdClass as array in wp-content/plugins/pods/ajax/package.php on line 263, but only on one server, worked on the other.
This happens for both pods 1.8.1 and 1.8.8.
This is the only place that actually tells you how to import those helpers on the packages page as packages. That minor detail should be aded to the top of the packages page on the pods cms website.
excellent work – I’m too stupid to work this out myself – thanks a lot Jonathan
Worked very well for me, Pods 1.9.1
Thanks a loooot, Jonathan!
Okay, either I did something wrong or it’s not working as I expected.
In the WordPress page content area if you hit enter once you get a if you hit enter twice you get a new paragraph.
I only get break tags and was hoping not to have to create a paragraph field for each possible time my client would want a new paragraph.
Please advise. I’m running WordPress 3.0.1, Pods CMS 1.9.4, Pods UI 0.6.8.14, and Tiny MCE 1.1.
Thanks!
Hi,
The link http://podscms.org/packages/tinymce-for-paragraph-text/ does not work. It just re-directs to http://podscms.org/packages/.
Any idea why?
Thanks for your help.
Hi everyone, very sorry for the lack of updates to this article. The package has since been rewritten (mostly) from the ground up and works much better now. Please check out the new package and give that a shot.
I’m afraid it doesn’t work here with me using your new package. I’ve set up my first Pod and any Paragraph Text Column Types that have the input helper applied to it disappear from the Pod’s Add New/Edit page, so does everything else after it infact, all the other Column Types etc.
Any ideas? I would really love to get this working properly.
Thanks for any help.
My package has actually been succeeded by http://podscms.org/packages/tinymce-for-pods/
Thanks! Got it working after some frustration tnx to your post 🙂
Just curious what your issues are with NicEdit? We are having lots of trouble with TinyMCE (not related to Pods but within our own plugin) and are looking to replace it with something, and NicEdit has caught our eye.
So may I ask, what issues have you had with NicEdit; I’m wondering if they would be relevant to us or not?
The output was the major issue for me, very often divs and paragraphs would be undesirably inserted, and basic editing often overran itself and was very difficult for clients to use. Perhaps they’ve updated quite a bit since I last used it though, definitely worth a look to see if it works for your use!