180 responses to “How to Use Multiple WordPress WYSIWYG Visual Editors”

  1. Dan

    Thanks for this. My problem is that when I try to add media to my main Post field (the default wordpress one), the media will end up getting added to the last textarea with tinyMCE enabled on the page and not the main wordpress one.

    Any idea why? You don’t know how much an answer to this would be appreciated. THANKS!

  2. Daniel King

    Great posts. however, I’m facing a bit of a problem: when adding tinyMCE instances, my custom content is being saved without any line break tag.
    I believe it’s related to wpautop() function, but I don’t have a clue where should I add this. Care to give some advice?

  3. Dan

    @Daniel king, don’t worry about it anymore. Look at 3.3. that came out yesterday:


  4. Daniel King

    @Dan, thanks for the tip! I was waiting for this for almost a year…

  5. kathy

    i’m not sure wp_editor() is the perfect solution for WPAlchemy metaboxes that we’ve been hoping for. I’ve been looking at this for 2 hours and not getting anywhere with it. there are several limitations.

    if you dig into the function in wp-includes/general-template.php you’ll see this comment:
    <blockquote cite="http://core.trac.wordpress.org/browser/tags/3.3/wp-includes/general-template.php&quot;
    * NOTE: Once initialized the TinyMCE editor cannot be safely moved in the DOM. For that reason
    * running wp_editor() inside of a metabox is not a good idea unless only Quicktags is used.

    so right there is still the problem w/ tinyMCE that we’ve already been running into. however, if you turn off tinymce and then reinitialize afterwards you actually can move tinyMCE around in the DOM, something i’ve been able to do in the past so not the biggest issue for me. the problem with WP’s function, is that you can’t dynamically adjust the ID attribute of the textarea (which is then used for all the corresponding tinymce iframe stuff).

    in your alchemy template to generate an editor the new wp way you have to use

    wp_editor( $content, $editor_id, $settings = array() )

    as such once you click your Add button a second time you get an editor that has the SAME id as the one that was originally hidden by the .tocopy class. the wp_editor() function isn’t run each time you click the copy button. it runs server-side on the page load. the copy event happens client-side and merely copies the code already created by wp_editor(). but for proper repeating fields to work all the tinyMCE editors need to have unique IDs. and you HAVE to pass an id value to wp_editor as i’ve tried passing null and a null string and both break the editor.

    there might be something doing with tinyMCEPreInit() but it isn’t well documented (like at all) so I haven’t figured it out just yet. we might be able to get around this with some complicated search and replace on all the IDs of ALL the child elements within the group, but that seems counterproductive and i’m not even sure that’d work. there might also be a way that involves the filter ‘the_editor’. i’m wondering if i can take the ID out of the markup and then dynamically add it in during the copy event. the copy already properly ‘counts’ for the input’s name à la name=”_custom_[textareas][0][content]” becomes name=”_custom_[textareas][1][content]” in the second instance and so on. just some ideas at this point.

    i hope someone will prove me wrong, but i think we’re still in the same place we’ve always been w/ interacting w/ the tinyMCE script more directly.

  6. Bercana

    No disrespect to the excellent WP_Alchemy… but seriously… if you’re having issues just try the “More Fields” plugin. I’ve used it on a bunch of sites now and is a breeze. No coding at all… aside from creating your template tie-ins and loops.

  7. Bill

    Kathy, I’m a little unclear. Does this apply only to copying text areas? Is it easier to have, say, 3 fixed, rich text areas with the new function?

  8. kathy

    @bill, yes i am referring to trying to get tinyMCE textareas in WPAlchemy repeating fields. static fields is very simple with the new function, but we’ve already been able to do that w/ the code in this post.

  9. Warren

    Works great, only problem I have is that it doesn’t give the Visual and HTML tabs, or the insert media buttons. Is there a way to make that happen?

  10. Joseph

    I had an issue with displaying output content from a textarea box, the line breaks show correctly in the textarea box after saving and shows correctly in the database as well but when display all breaks are remove.

    I solved this by using for the display
    echo nl2br($custom_mb->get_the_value(‘composer’));
    instead of

    I’m not sure why this solved the problem, but I thought that it could be useful for someone looking for a solution for a similar issue.

  11. Paul

    @kathy, i can verify the problem you’re having: the wp_editor() function introduced in WordPress 3.3 is amazing, but it’s a server-side function, and if we want to create TinyMCE-enabled textareas dynamically (i.e., via Javascript DOM manipulation, like the “Add” button in WPAlchemy), we are still out of luck.
    Dimas’ original code in this article doesn’t seem to work properly in WP3.3 anymore, so i’m still hunting for a solution.

  12. vidihook

    Thank you, a good script. I use this in animalswallpapers.us.
    But I am confused to display the results in single.php ..
    how it could work on the theme that I use.
    thank you

  13. Bob Jones

    This worked fine through a couple of upgrades but is no longer working with WordPress 3.3.

    I noticed as well that WP-Alchemy’s folder structure has changed. The paths in the tutorial are no longer accurate.

    Can you please update this tutorial so it works with the current versions of WordPress and Wp-Alchemy?


  14. Aris Blevins

    Any updates on adding WP Editors dynamically? From what I can tell the do-copy function is adding a hidden div with the same code as the displayed div. Thus, the tinymce is confused and doesn’t work.

    Ah well, my clients will have to wait a bit for a more elegant solution.

  15. helgatheviking

    @aris, i’m pretty sure i have this sorted. i have been meaning to write a blog post about it for a while.

  16. Paul

    @helgatheviking, that’s great! I’d love to see your writeup on the issue. I’ve got lots of .edu users that would benefit from a solution.

  17. helgatheviking

    @paul and everyone – i have posted my solution for repeatable and sortable wordpress visual editors at my site.

    there isn’t much in the way of ‘explanation’ yet, but i made a sample child theme where everything is fully integrated.

  18. Alastair

    Just tried @helgatheviking solution and it works really well. Very straight forward to easily drop into your theme and start testing it out.

  19. Paul

    Amazing work, @helgatheviking! I can verify your solution works with the latest wpalchemy and WordPress 3.3.1. It has a few caveats (HTML toolbar button instead of Visual/HTML WordPress toggle buttons, TinyMCE editors break when moving the metaboxes, and perhaps some TinyMCE-related formatting issues with line breaks), but is a very workable solution.

    The big thing that still makes me uncomfortable is that the official recommendation of the WordPress core team is to *not* use TinyMCE in metaboxes, since TinyMCE blows up when you try to move it around in the DOM: http://core.trac.wordpress.org/ticket/19173

    This makes me fear that we’ll be tweaking this code every time a new WordPress release comes out, until visual editors are officially supported in metaboxes. Hopefully by that time we’ll also have an official javascript API for creating TinyMCE editors, like we just got with wp_editor() in PHP in WordPress 3.3.

  20. helgatheviking

    @paul – like the fictional grail, i feel we’ll never actually get it all. as is, what i’ve posted is almost the result of a year of tinkering… outsourcing it… then tinkering some more.

    i feel that moving the metabox around is a real edge case… how often do you do that? i never do, or if i did, it’d only be once and i could refresh. basically the sorting works by disabling and then reenabling the editor, so if you can detect the metabox move you could do the same thing. sure it is imperfect, but seems a small concession.

    i tried really hard to get the html toolbar to toggle, but i couldn’t get the html editor toolbar to have any freaking buttons. so i had to give up and work on more important things. the html button is sort of a semi-acceptable compromise.

    feel free to take up the lance!

  21. Ruturaaj

    I tried using CKEditor and it works good. The only problem I see is some HTML P tags are getting added to the content when saved for the first time and then every single time I save (update) the content, the previous HTML gets converted into < kind of stuff with new BR tags getting added. I’m sure it’s WordPress doing the trick. I tried PS Disable AutoFormat plugin, but no luck. Anyone else has tried CKEditor for rich text editing? Please help me resolve this issue.

    – Ruturaaj.

  22. Ruturaaj

    @kathy: Contact form of your website is not working! :-( Please take a look at it… it lands on “we cannot find what you’re looking for” page after submitting the form. I know this is not the place to notify you, but I don’t have any other alternative with me either.

    – Ruturaaj.

  23. helgatheviking

    @raturaaj – thanks for the reminder. i’ve been meaning to fix that.

  24. damian

    From now on you can use to use the editor in your metabox.


    Thanks for this great class!

  25. Xeross

    This gave me a good starting point to implement custom TinyMCE editors, thanks

Leave a Reply