How to Use Multiple WYSIWYG (TinyMCE) Visual Editors in Your WordPress Metaboxes

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.

Posted in

86 Comments

  1. Alastair on March 13, 2012 at 7:03 pm

    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.

  2. Gnome 8 on March 18, 2012 at 5:19 pm

    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.

  3. spencerthegnome on March 18, 2012 at 5:40 pm

    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

    • kathy on March 18, 2012 at 5:56 pm

      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!

      • spencerthegnome on March 18, 2012 at 7:55 pm

        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.

      • spencerthegnome on March 19, 2012 at 2:59 pm

        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.

        • kathy on March 19, 2012 at 3:02 pm

          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

  4. spencerthegnome on March 19, 2012 at 4:00 pm

    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 divider

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

    • kathy on March 19, 2012 at 4:21 pm

      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?

      • spencerthegnome on March 19, 2012 at 6:08 pm

        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.

  5. spencerthegnome on March 19, 2012 at 4:01 pm

    oops, those pre tags didn’t seem to work. Sorry

  6. Alastair on March 26, 2012 at 10:10 am

    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.

    • kathy on March 27, 2012 at 9:22 pm

      one more thing to look into i guess. if you find a solution.. post it at github.

      • Alastair on March 28, 2012 at 9:36 am

        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?

        • kathy on March 28, 2012 at 12:44 pm

          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.

  7. Bryan Hinkle on March 27, 2012 at 9:09 pm

    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

    • kathy on March 27, 2012 at 9:26 pm

      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!

      • Bryan Hinkle on March 27, 2012 at 9:42 pm

        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

  8. html5 templates on March 28, 2012 at 9:52 am

    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.

    • Alastair on March 28, 2012 at 12:28 pm

      Brilliant! That did the trick.
      Thanks.

    • kathy on March 28, 2012 at 12:42 pm

      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.

    • sam Merrill on April 10, 2013 at 12:45 am

      Yo you are awesome, thank you!

  9. Will Ayers on April 4, 2012 at 9:13 pm

    Has anyone figured out how to get the wp_editor() fully working when inserting into the DOM via javascript?

    • kathy on April 4, 2012 at 9:16 pm

      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.

      • Will Ayers on April 4, 2012 at 9:22 pm

        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.

        • kathy on April 4, 2012 at 9:30 pm

          well that’s quite clever. can you post your code somewhere? a gist? or pastebin?

          • Will Ayers on April 4, 2012 at 9:35 pm

            I will work on that. I have to extract it from the project a bit.



  10. paulvou on April 8, 2012 at 5:11 pm

    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!

  11. Nelson on May 9, 2012 at 1:45 pm

    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

    • kathy on May 9, 2012 at 2:15 pm

      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?

  12. Nelson on May 10, 2012 at 11:26 am

    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

    • kathy on June 1, 2012 at 1:06 am

      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?

      • Nelson on June 1, 2012 at 9:13 am

        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.

  13. Jay on June 7, 2012 at 1:05 pm

    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

    • kathy on June 8, 2012 at 12:49 pm

      Hi Jay – check your email.

  14. paulvou on June 9, 2012 at 7:55 pm

    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?

    • kathy on June 20, 2012 at 12:24 am

      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.

      • Barney on June 26, 2012 at 11:01 am

        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/

  15. Boy Wonder Shawn on August 22, 2012 at 11:36 am

    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!

    • kathy on August 22, 2012 at 1:27 pm

      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!

  16. John on October 4, 2012 at 9:50 pm

    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!

    • kathy on October 4, 2012 at 10:13 pm

      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.

  17. Klara on October 12, 2012 at 7:41 pm

    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.

    • kathy on October 12, 2012 at 8:05 pm

      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.

  18. Klara on October 13, 2012 at 9:04 am

    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.

    • kathy on October 13, 2012 at 2:59 pm

      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.

  19. Klara on October 14, 2012 at 5:21 pm

    That did the trick actually! Thanks!

  20. Christi Richards on November 7, 2012 at 6:10 pm

    This is amazing. Thank you so much for all of your hard work!

    • kathy on November 7, 2012 at 7:04 pm

      You’re welcome! Thanks for leaving a comment. It’s cool to know that people are still finding this useful.

  21. mi-ca on February 9, 2013 at 2:04 pm

    Thanks a lot for this code. It works perfectly.
    You made my day shiny ;)

    • kathy on February 9, 2013 at 3:00 pm

      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!

      • Rouven Hurling on February 18, 2013 at 5:17 pm

        The Media Uploader works for me in WP 3.5 and everything else works just great, thanks a lot! :)

        • kathy on February 18, 2013 at 5:25 pm

          You’re welcome! and thanks for the confirmation that it all still works with WP3.5.

  22. Php Programmer on February 11, 2014 at 4:33 am

    I have been reading the above article. It is explained very well.

    Thanks

  23. Bhavesh Vaghela on February 28, 2014 at 4:59 pm

    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

    • kathy on February 28, 2014 at 8:24 pm

      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!

  24. Angela on April 23, 2014 at 9:28 am

    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

    • kathy on April 23, 2014 at 11:47 am

      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.

  25. Angela on April 26, 2014 at 9:22 pm

    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

    • kathy on April 28, 2014 at 11:03 am

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

  26. Stavros Papadopoulos on May 17, 2014 at 4:31 am

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

    • kathy on May 17, 2014 at 2:54 pm

      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.

  27. Stavros Papadopoulos on May 17, 2014 at 8:50 pm

    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.

    • kathy on May 17, 2014 at 11:09 pm

      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.

  28. tatti vitorino on November 4, 2014 at 8:43 pm

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

    • kathy on November 7, 2014 at 11:25 am

      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?

  29. Kyle on November 15, 2014 at 2:26 pm

    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

    • kathy on November 16, 2014 at 6:19 pm

      Hi Kyle,

      I got your message on github too and hopefully the updated codes solves your problem.

      Cheers,
      -k

  30. Neil on November 17, 2014 at 6:36 pm

    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

    • kathy on November 17, 2014 at 8:25 pm

      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 with editor as a dependency.

      Make sure you are doing the same. If that doesn’t help, then I am at a loss. Good luck!

      • Neil on November 17, 2014 at 8:33 pm

        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

  31. Amy on November 22, 2014 at 1:46 am

    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!

    • kathy on November 22, 2014 at 11:02 am

      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.

      • Amy on November 23, 2014 at 3:38 pm

        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!

        • kathy on November 23, 2014 at 8:22 pm

          I’m glad you got it resolved and thanks for letting us know what the problem was.

  32. Joseph on July 1, 2015 at 2:23 pm

    Thank you so much!!!!!!!!!!!!! This was so helpful. Your stuff awesome as always.
    Shout out to Dimas as well.

    • kathy on July 22, 2015 at 3:41 pm

      You’re welcome! I’m glad this is still helpful so many years later.

  33. Chris on July 28, 2015 at 12:39 pm

    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?

    • kathy on July 28, 2015 at 1:37 pm

      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?

  34. Senhor Mr Troll on November 3, 2015 at 8:12 pm

    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?

    • kathy on November 3, 2015 at 8:53 pm

      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 types in this case.

  35. Javier on November 15, 2015 at 9:35 pm

    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!

    • kathy on November 16, 2015 at 1:46 am

      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

      • Javier on November 16, 2015 at 11:15 pm

        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!

        • kathy on November 18, 2015 at 7:48 am

          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.

Leave a Comment