Ever since WordPress invented the metabox, people have been trying to put the rich text editor (in WP this is provided by TinyMCE) into their metaboxes. And it makes sense. Sure us uber-geeks know the HTML tags required to make some text bold, but most of the world does not. But they do know how to click on the “B” button. So if we’re building a theme that requires multiple blocks of content it’s nice to reuse the visual editor.
I’ve been using the WP Alchemy Class by Dimas Begunoff to build my metaboxes for a while now. It gives a *lot *of power to build really complicated field sets, especially repeating ones. For a long time using the visual editor in the metaboxes was elusive. Dimas wrote an article on How to Use Multiple WordPress WYSIWYG Visual Editors and it worked, up to a point. Because TinyMCE is fickle (and despite their tagline being “Easy to Integrate”) this code didn’t work for repeating groups, which in my mind is the strength of Alchemy.
As of WordPress 3.3 you can finally use the built-in wp_editor() function for multiple editors in your metaboxes, but again these must be defined in advance. You can’t use this function with WPA’s dynamically generated fields. So, repeatable, sortable WYSIWYG (TinyMCE) rich-text editors has been the elusive, ultimate dream of WP Alchemists. The <cough>Holy Grail</cough> of WP Alchemy. But after a lot of head-banging effort, I think I have it!
I have create a Twenty Eleven child theme that shows WP Alchemy-powered metaboxes with repeatable, sortable, WYSIWYG (tinyMCE-enabled) text editors complete with media buttons. And as a bonus, it shows a single field using wp_editor() because that also needed a little twist to work with WPA. Upload and activate the theme, then add a new post to see the boxes in action. For the curious, and come on you know you are, the real magic is in the kia-metabox.js script. Download the sample theme from for an idea of how it works.
Fork me on github! Perhaps we can figure out how to use the quicktags editor when the visual editor is disabled. Full tutorial to come… maybe.
Comments
86 responses to “How to Use Multiple WYSIWYG (TinyMCE) Visual Editors in Your WordPress Metaboxes”
Great work.
I’ve just tested this out and it works a treat!
Still messing around but so far it does the business without a hiccup.
OH YEAH!! This is really amazing. I’d just stumbled onto WPAlchemy (which is also really awesome) and have been sinking tons of hours trying to get these visual editors to work with the media upload button. Found this a few hours ago but was avoiding actually cracking it open — too lazy to install and switch themes. Finally did and at first the images weren’t finding the field to load into, then I realized I still had the Custom Field Template Plugin installed and that javascript must have been competing somehow. Deleted CFT Plugin — won’t be needing it anymore. It works amazing now.
Thanks for all the hard work and diligent documentation and sharing.
Now all I really need to do is figure out how to get each editor to pick up the tinyMCE customization i’ve created in my functions file. I’ll let you know how it goes. Thanks again!
– sry for the multiple personalities, just got my gravatar squared away for this email
in theory, it should be using the same tinyMCE editor parameters as the main editor (unless you put a minimal class on the customEditor div)… i haven’t had any problems with the repeating boxes showing custom buttons. is this not working for you?
glad you finally got over the reluctance to switch themes. i made it this way so that it’d be easy to see the proof of concept and because it should be relatively easy to merge my “theme” on to yours. cheers!
Oh derf – you’re right. That customization is in my other theme’s functions file. Once I’ve merged it all together its working great. Very, very impressed. This is such a useful add on to using WordPress as a CMS. Thanks again.
I was having trouble with elements that had custom classes applied from my customized tinyMCE. They would always somehow generate an extra empty p tag or line break as they loaded into the textareas on my edit screen. They were saving to the database fine, though, but only the first time since the second save would have thoseptags and line breaks in the form field. I fixed it by changing the order of the functions applied to $mb->get_the_value() as its loaded into the textarea.
echo esc_html( wp_richedit_pre($mb->get_the_value()) );
became:
echo wp_richedit_pre(esc_html( $mb->get_the_value()) );
– Hope the code above displays correctly, if not sry.
spencer, do you have an example of the type of classes that you are using? just so i can experiment and see the difference between the two… i think you can put code between some pre tags? i should fix my damned blog at some point
Well, the plot thickens. I’ll have to delete or edit the previous comment because though it seems to work for the following example text:
Quote Title 1″A paragraph that is also a quote. And has a class name that applies a border-bottom”Quote Title 2″Another paragraph that is a quote.”
It also removes important breaks and ptags in the following:
A Person Job TitleDegree, school Degree, School dividerSo far, it seems that applying the wp_richedit_pre function to text from the database as it is fed to the textarea on the edit screen does great stuff for keeping wanted ptags and breaks, except when there’s a defined class in the element. Then it seems to generate an empty p tag.
I’ll keep investigating and check back here in case you have any thoughts.
curious. i don’t have time to check into this today, but will try to look at it soon. do keep me posted. i think i named this aptly as the complete solution might never be found. is there some reason you aren’t using repeating groups of text inputs if each group (Assuming) follows the person/job/title/degree/ format?
Sadly the edit panel I’m using this for is much more complicated than one repeating field. Overall, there are three my_meta_control divs, one for each section of the layout on the viewer side. Each my_meta_control has a field group that is repeatable and sortable — thanks to your wonderful work here.
It all works like a charm now, except for that one snag with classes applied to paragraphs in the tinyMCE textareas. I needed to figure this out to allow the user the most amount of flexibility with the type of content they can place in each field.
Good news is I have a very, very dirty but seemingly effective fix. Instead of:
echo esc_html( wp_richedit_pre($mb->get_the_value()) );
to populate my textareas on the edit screen, I’m using:
echo str_replace(‘><br />’, ‘>’, esc_html( wp_richedit_pre($mb->get_the_value()) ));
This is grabbing all the break tags that occur just after any other element’s close and removing them. These are what seem to get converted into empty ptags by javascript in the textarea, which then get saved to the database. I know its probably overkill and an inappropriate place to address the actual issue I’m having, but it’s seeming to work well so far.
Again thanks for all your help and work and I’ll keep you posted if I find a better fix.
oops, those pre tags didn’t seem to work. Sorry
Has anyone else noticed issues with characters & symbols? I’ve found that the £ symbol doesn’t work correctly when saved and is output as a broken character. Had to switch to html view and manually type £ instead.
one more thing to look into i guess. if you find a solution.. post it at github.
I’ve just tested the issue with the holy grail theme and I still get the issue, but not on the repeating text box. What is the difference between the two?
i really wish i could say what the difference is. i can only guess that something in the way alchemy saves data is different? but there does seem to be a difference. for instance, in displaying the value of the textarea the wp_editor takes the value straight from the DB, but the repeating fields need to be decoded.
Hey Kathy –
Thank you so much for working this out. It’s fan-freakin’-tastic. Quick question though; how would you go about utilizing the_excerpt() for the multiple fields? For now I just enabled support for excerpts in the post type, however I’d like it to act more intuitively (hence the want for meta boxes, right?). I’d appreciate your input. Thanks!
Bryan
hi bryan! you’re very welcome. it isn’t perfect, but it is a pretty workable solution i think for most. you want to create excerpts for the meta fields? the_excerpt and get_the_excerpt are specific to the post’s main excerpt, but if you want to shorten the text in the metaboxes then you could try outputting it
wp_trim_excerpt($text)see: http://codex.wordpress.org/Function_Reference/wp_trim_excerpt
but excerpts will strip all the html that we just worked so hard to add with the tinyMCE boxes so i’m confused as to why you’d want to. thanks for stopping by! cheers!
Who’s looking for perfect? ;)
I wasn’t aware of the excerpt stripping out HTML; I will keep that in mind. What I needed it for what just a little “teaser” text that would be placed in a sidebar and lead the website visitor to the main content—which would be nicely formatted but the HTML. :)
Thanks again!
B
If you have charset problems please change.
metaboxes/single-texarea.php and metaboxes/repeating-texarea.php
$val = html_entity_decode($mb->get_the_value());to this
$val = html_entity_decode($mb->get_the_value(), ENT_QUOTES, 'UTF-8');it will solve your problem.
Brilliant! That did the trick.
Thanks.
great! thanks for that. i will have to add it to the “grail”. i also took another crack at the quicktags html editor, which seems to work on one hook, but not on the later hook that we need to ‘borrow’ the tinymce settings.
Yo you are awesome, thank you!
Has anyone figured out how to get the wp_editor() fully working when inserting into the DOM via javascript?
afaik, no. and i’ve tried too. the thing is that wp_editor() is a server-side function that needs to have an ID passed to it to function. the repeating boxes created w/ alchemy don’t exist yet, and their IDs are created client-side using javascript.
I am using wp_editor() via WordPress’s ajax call tho. So it creates the id from the server side instead of javascript side. Javascript is just inserting the html produced. It loads the editor but you can not switched between visual and html tab.
well that’s quite clever. can you post your code somewhere? a gist? or pastebin?
I will work on that. I have to extract it from the project a bit.
This is all such great stuff! Great work, and thanks so much for all of the time that has been put into this. It’s changed how I look at the WP dashboard for sure.
Quick question, and to understand you all correctly (I know enough of this stuff to be dangerous, but some of the technical aspects are still a little over my head!)
I also have had trouble when switching between the visual and html editors if i make ‘hide-editor’ -> false
It occurred to me that this is probably why you have it set to ‘true’ in the example files, as switching back and forth does add the extra tags as noted in the comments.
Do you think it’s best (ie. most stable) to simply just be keep it as ‘false’, and not incorporate the default editor panel, or am I just missing one of the above posted workarounds.
Thanks!
Hi Kathy,
Thank you for sharing your work!
Found one issue though. When sorting the text areas, it removes any p tags from the content of the dragged text area.
Don’t know if this is related to your changes or to the wpalchemy class or even wordpress itself.
Does this happens to you?
Thanks,
Nelson
i’ll have to look into that, though i can’t promise when since i am busy with another project at the moment. wordpress doesn’t actually save save p tags in the database. tinymce pretends to use them and then the wp_autop automatically adds them on the front end (including to the meta content if you are using my code which has a wp_autop added to the meta_content filter. are you manually adding extra p tags?
Hi Kathy,
It seems it’s known a bug related to TinyMCE which cannot be moved around in the DOM or it will break.
The solution to this is to not allow drag n’ drop at all.
Cheers,
Nelson
Yes that is a known bug. In my mind, the end solution will be to dump tinyMCE for good and use a different editor, but that is a long ways away. But for now, I mostly got around this by turning tinyMCE off on drag, and then re-initializing it when the drop was complete. this works within the metabox, but could well (and probably does) break if you move the entire metabox. But how often does that happen?
In my case I was developing a custom post type with repeatable fields that have no defined order and it could be useful to move them around instead of deleting and creating it all over again.
Hi Kathy,
I need help on how to display the values on multiple fields.
Here is my code. It only shows blank on the template….
https://gist.github.com/21d0e399e686479a7441
You can see the screenshot here http://screencast.com/t/8LSbfsLjCcFO
Please help me I’ve been figuring this out for a week and I can’t get it to display the values.
Thanks!
Jay
Hi Jay – check your email.
Ran into a potential problem .
Changing the WP and Site address seemed to make all of the entered data go away…
I installed and set up content and the fields on a WP installation in a directory (and a temporary IP) … when it was all set, I made it live by changing switched that to the proper domain name, and made the site address the root folder.
All of the data moved over just fine EXCEPT the stuff that was done with this. Not a huge deal, since I only used it on one page… but perhaps something simple got messed up. Any thoughts? or is this a known issue to be aware of?
wow, this is not something that i have seen, but then, i haven’t really tried it. like everything else with Alchemy, all your data should be stored in the postmeta table and be associated with the post, by it’s post ID. so i know it doesn’t answer your question, but i really can’t think of a reason why the data wouldn’t migrate.
Had same problem (with heavy usage of WPAlchemy). It’s apparently caused by serialized data using the hosts url’s character length. So where a find and and replace in the SQL might ordinarily work when migrating, a url with a different char length seems to effect the pulling in of the serialized data. Tried few solutions but this was most reliable: http://wordpress.org/extend/plugins/wp-migrate-db/
Kathy, I’ve followed your work since I first began using Dimas’ WP Alchemy a year ago. And I have a secret, whenever I find myself in a fix, I comb through the comments to see what “Kathy said/did”.
Anyways, I was stuck on what I thought was the impossible, and I thought to myself WWKD?
Wing and prayer I googled and guess what – Kathy did the impossible!
You’re pretty awesome, but I think the word the kids are using these days is “fresh”.
KATHY IS FRESH FOLKS!!!
Thanks for your hard work, but most importantly your sharing.
I’ll show you what I’ve made after I make it!
Wow, what a nice comment to wake up to! Thank you for your kind words! Though fresh is totally what my grandmother called me when I was being snotty. ;) I look forward to seeing what you make w/ Alchemy. If you’ve read the comment on this post then you’ll know that there is still an issue or 2… I’m not actively working on this at the moment, so if you solve those send me a pull request at git or just a note or whatever. Thanks for stopping by!
It’s true people…. Kathy IS awesome. Thank you for working out all the big problems on this before I knew they existed. I had been visualizing repeating WYSIWYG editors for a while but when I sat down to make it actually happen, you made it much easier and added the media upload for each as a bonus. Well played!
Thanks for the compliment John! I’m glad you found it helpful. There are still a few bugs, but it is a lot closer than anything else I was able to find.
I tried the #8 solution for the character-problem but I couldnt get it working. I could only find that string of text in the single-textarea.php not in the repeating.
The first save went smooth, if I update I get questionmarks all over.. I would be very grateful for some input.
Hi Klara, thanks for stopping by. I don’t really understand your question… what exactly is happening? Credit this to my ignorance of not needing to use any special characters in English. Also, I am not actively developing this so I can’t promise I will come up with a solution.
Hi Kathy!
Thankyou for your quick respons!
If I save the metabox first I get this.
http://thesubjectiveguide.com/screen1.png
All nice and clean.
Though it looks like this in the admin:
http://thesubjectiveguide.com/screen2.png
If I later update the post it will look like this.
http://thesubjectiveguide.com/screen3.png
This didnt happen when I didnt have the edit-bar above, just using plain simple-meta from WPAlchemy.
Klara, Ok I see what you are saying now. Are you having issues with a single textarea? Or the repeating textareas? I just tried the character-encoding solution from comment #8 and it seems to work for single textareas, can you try it again now that I have edited the apostrophe style of the posted code? I cannot duplicate a problem with multiple textareas.
That did the trick actually! Thanks!
This is amazing. Thank you so much for all of your hard work!
You’re welcome! Thanks for leaving a comment. It’s cool to know that people are still finding this useful.
Thanks a lot for this code. It works perfectly.
You made my day shiny ;)
Does this still work with the new media uploader in WP 3.5? I probably need to update things but just don’t have the time. Also, I hope that shiny days means you are a Firefly fan!
The Media Uploader works for me in WP 3.5 and everything else works just great, thanks a lot! :)
You’re welcome! and thanks for the confirmation that it all still works with WP3.5.
I have been reading the above article. It is explained very well.
Thanks
WordPress 3.9 is going to upgrade tinymce to 4.x.
and javascript code breaks in it.
I have modified your javascript so it works with tinymce 4.x in wp 3.9
tinymce 4.x in wordpress 3.9
Hope It will be helpful to others.
http://wp-lovers.com/wpquestions/testplugin-new.zip
You wouldn’t maybe want to submit a pull request on Github would you? That’s be extra cool. ;) I will check it out when I can. Thanks!
Hi Kathy…well done with getting this working so well…I could do with a little pointer in the right direction…i’ve copied your code from the content-single template into my own and added the core alchemy class and the functions in the functions.php..within admin everything looks great…i can enter into the editors and they save..but I can’t see anything on the actual viewable page…i know i must be missing something really simple here…i would really appreciate any advice…thanks Ang
Thanks Angela. It is really hard to say what could be going wrong for you. Double-check that you are editing the correct theme, are globally declaring the metabox variable:
global $simple_textarea, $repeating_textareas;And try turning on WP_DEBUG. Good luck.
Hi Kathy, im still struggling with this…i am getting an error Call to a member function the_meta() on a non-object…and i noticed you had posted a similar error find a while back on github…do u remember how u fixed it…sorry can u help it would be very much appreciated as i seem to be going around in circles…thanks Ang
@Angela – If you’d like to buy me a cocktail I can probably figure this out for you (use the contact page). It should work as I have provided, so the problem must be in your customization. According to me 2 years ago I had to ensure that
$repeating_textareas = new new WPAlchemy_MetaBox( $args );
Is defined in functions.php (or possibly any file includes/required from functions.php) and not loaded via
locate_template(). It has something to do with global variable scope, but I don’t fully understand why.If anyone still wonders why quicktags don’t show up,
put :
QTags._buttonsInit();after
quicktags( qt_settings );in KIA_metabox.runTinyMCE function. Just my 2 cents :)
Thanks Stavros. I haven’t updated the article, but if you check my code at Github I’ve actually updated it to work with quicktags…. and to successfully toggle back and forth.
I know but somehow on my installation it needed the extra
QTags._buttonsInit();to generate the tags. i really don’t know why, but maybe someone else is having the same issue.I have to say though that I’m not using the Twenty Fourteen theme.
You tried with the new code? You aren’t obligated to use Twenty Fourteen, the code is portable to any theme. It was just easier for me to create a child theme of Twenty Fourteen to serve as a sample.
kathy,
first of all, thank you so much for your work with this.. it is really great!
I am quite new to WP and still getting my way around. I used for a long time the CKEditor which I think is far easier to integrate than TinyMCE, but as I am using WP, TinyMCE it is.
There is one thing I am missing and cant figure out.. it is probably something related to TinyMCE that I cant find.
I am using WP 4.0 and got the metabox and the editor working perfectly using the wp_editor func.
After saving in the DB (in the DB the code is right) if I use html_entity_decode to retrieve the value the editor does not render anything and if I dont it renders plain text.
BTW I am using WPALCHEMY_MODE_EXTRACT as the storage mode. Do you think it has anything to do with it?
I am feeling so useless as I imagine it must be something quite simple that I am missing..
thank you so much
:)
Hi Tatti. Thanks for stopping by. I am finding I actually prefer markdown to TinyMCE, but this still remains one of my most popular posts. Don’t feel useless, as if there is anything is anything in WordPress that is extra complicated, it is TinyMCE! Anyway, I haven’t used this in a while, I don’t really know what the issue could be. Could you try using the other WPALCHEMY mode? What do you get if you
var_dump()the contents of the meta field?Thanks for your work on this project. It something that I have been seeking for quite some time.
I have been able to implement this however, when a new editor instance is created using the “Add Text Area” button, the “text” tab shows no quick tags. If content is placed in the editor and then updated, the quick tags become viewable but for some reason after being created dynamically, they do not appear.
Using the 2014 theme and and the code from git.
I noticed a discussion at https://core.trac.wordpress.org/attachment/ticket/26183/dynamic-quicktags.26183.diff but am unable to determine whether this has been resolved.
Anyone have any ideas on this?
Thanks,
Kyle
Hi Kyle,
I got your message on github too and hopefully the updated codes solves your problem.
Cheers,
-k
Hi Kathy,
Thanks for the hard work putting this together.
I’ve managed to integrate your “Holy Grail” WPAlchemy class into a new plugin I’m building.
I am however having trouble using the repeating WYSIWYG editor on a custom post type that doesn’t utilise the editor. I’ve worked out that you’re relying on the tinyMCE scripts and styles being loaded already. So on my CPT which doesn’t use the editor the required js is not there.
Have you any idea how to load the tinymce and it dependants on a CPT admin page without using the editor? If that makes sense??
N
Hi Neil. Yes, I am using on the existing editor settings… that way I can have the same settings as the default editor, but I don’t think I am relying on them. If you look carefully, things like
check for the presence of the TinyMCE object and fall back to a pre-defined default. You can probably delete these and just go with the defaults. And for
var tmc_settings = $.extend( {}, KIA_metabox.tmc_settings, { selector : "#" + id } );you can skip the.extend(). But I am loading the metabox script witheditoras a dependency.Make sure you are doing the same. If that doesn’t help, then I am at a loss. Good luck!
Hey Kathy, Thanks for the quick response. I have actually just got it working in the last couple of mins using the following.
I’m sure i could do it cleaner using the proper handles for them but for now this works. I’ll check out what you’ve mentioned now. Thanks again. N
You might be able to find the core handle names in script-loader.php or the Codex
Hi Kathy- this has been a lifesaver for me today! Thanks so much for your hard work. My code is working nicely on my local build, but when I push it up to my dev site, I keep getting the error “tinymce is not defined”, coming from the kia-meta js file. Have you run into this before?
I also uploaded your theme without modification, and get the same error. I think it’s something external to your code, but specific to the dev server. I just can’t seem to figure it out. I’ve disabled all plugins, tried changing the encoding in the wp-config file. Not really sure where to go from here.
Any ideas are greatly appreciated!
Hi Amy. No, I have never encountered that before. I thought I had configured the code to test for the existence of tinymce before doing anything to avoid fatal errors, but I must be wrong. I would view source to see if the tinymce scripts are being loaded or not. Maybe re-upload all WP files and talk to your host about why certain files aren’t being loaded. Verify that the regular post editor works? Or are you using these on a post type that doesn’t have the editor enabled? Other than that, I don’t really know what to tell you. Sorry and good luck.
I did a fresh wp install and all is fine! BTW for anyone experiencing this..we’re on Bluehost and used their auto-intall feature. That was the install with the tinymce problem. Re-installing manually fixed the issue!
I’m glad you got it resolved and thanks for letting us know what the problem was.
Thank you so much!!!!!!!!!!!!! This was so helpful. Your stuff awesome as always.
Shout out to Dimas as well.
You’re welcome! I’m glad this is still helpful so many years later.
Hey Kathy, thanks much for this. I do have a problem though. I can’t interact with the repeatable editor. In Chrome dev tools, there’s an error printed in the console that reads “Uncaught SyntaxError: Unexpected Token < (index):1” I’m using the latest version of WordPress. Is there anything you can think of to resolve this?
Not particularly. That code probably means there is an error in the code/file just prior to the location referenced. I would apply my debug protocol: disable any other plugins, revert to default theme, and selectively enable/disable sections of the plugin/code in question. Are you using my code from github?
Hi Kathy, the second editor does not work on custom posts.
Help me, what should I do to make it work on a custom post?
Right it doesn’t because of this code which is registering the WP Alchemy metabox. You need to modify this to suit you using the WP Alchemy options… specifically
typesin this case.I can have repeating and a single instance of wp_editor working thanks to you. But what about MULTIPLE instances (not repeating) wp_editors ??
This is driving me crazy!
Hi Javier,
You just have to add multiple
wp_editor()calls in your metabox… each with a unique ID parameter. If that isn’t enough to guide you then, you might be best served by opening a question at the WordPress Stack Exchange.cheers!
-k
Many thanks Kathy for your answer. But of course that was the first thing i tried, with no results. I mean I got the fields, but without toolbar, also what i write in the fields is “invisible”.
So that didn’t help me.
Thanks anyway!
Without a toolbar implies a javascript error in my mind. I would check your browser console for javascript errors. Try building it as a child theme for a default theme like twenty fourteen, and try disabling all other plugins… and sometimes even browser extensions. It does work, so good luck tracking down the issue.