I’ve gotten a few requests on how to add multiple visual editors in WordPress. So here is a quick way to add multiple WordPress Visual Editors to your meta boxes.
I’ll make this post short and sweet; This article is kind of a follow up to: How to Move and Position The WordPress WYSIWYG Visual Editor.
I’ve gotten a few requests on how to add multiple visual editors in WordPress. Here is a quick screenshot to wet your appetite:
Lets Get It On
These examples will use WPAlchemy MetaBox to create the meta boxes that the visual editors will live in. So, lets get started; the following will go into your functions.php file:
<?php
// lets use the WPAlchemy helper
include_once TEMPLATEPATH . '/WPAlchemy/MetaBox.php';
// custom constant (opposite of TEMPLATEPATH)
define('_TEMPLATEURL',WP_CONTENT_URL . '/themes/' . basename(TEMPLATEPATH));
// custom css for our meta boxes
if (is_admin()) wp_enqueue_style('custom_meta_css',_TEMPLATEURL . '/custom/meta.css');
// create the meta box
$custom_metabox = new WPAlchemy_MetaBox(array
(
'id' => '_custom_meta',
'title' => 'My Custom Meta',
'template' => TEMPLATEPATH . '/custom/meta.php'
));
// important: note the priority of 99, the js needs to be placed after tinymce loads
add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
function my_admin_print_footer_scripts()
{
?><script type="text/javascript">/* <![CDATA[ */
jQuery(function($)
{
var i=1;
$('.customEditor textarea').each(function(e)
{
var id = $(this).attr('id');
if (!id)
{
id = 'customEditor-' + i++;
$(this).attr('id',id);
}
tinyMCE.execCommand('mceAddControl', false, id);
});
});
/* ]]> */</script><?php
}
The Magic
The magic is in lines 20 through 43, above. This piece of javascript code will look for DIV tags with a css class of customEditor. It will then initialize the standard WordPress TinyMCE settings on an inner TEXTAREA tag. Lets take a look at the markup below:
<div class="my_meta_control">
<?php $mb->the_field('extra_content'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
<?php $mb->the_field('extra_content2'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
<?php $mb->the_field('extra_content3'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
Making it Pretty
Finally I added a little bit of CSS adjustments/corrections to make it look good:
/* custom editor styles */
.my_meta_control .customEditor
{ margin:15px 6px; border:1px solid #ccc; }
.my_meta_control .customEditor textarea
{ border:0; }
#post-body .my_meta_control .customEditor .mceStatusbar a.mceResize
{ top:-2px; }
/* extra styles used in other WPAlchemy meta boxes */
.my_meta_control .description
{ display:none; }
.my_meta_control label
{ display:block; font-weight:bold; margin:6px; margin-bottom:0; margin-top:12px; }
.my_meta_control label span
{ display:inline; font-weight:normal; }
.my_meta_control span
{ color:#999; }
.my_meta_control textarea, .my_meta_control input[type='text']
{ margin-bottom:3px; width:99%; }
.my_meta_control h4
{ color:#999; font-size:1em; margin:15px 6px; text-transform:uppercase; }
The Nitty Gritty
The above is very controlled, but expectable usage. The hard core developers amongst you maybe thinking … what if I want to theme the editor differently, like in some of the TinyMCE examples?
Well, I tried several different setups to no avail. Do I think its possible, sure, you’ll need a little bit more time and you can definitely find a definitive answer on whether or not you can do it.
Another solution may be to use a different editor for your custom WYSIWYG needs, I’ve had great success with CKEditor on other projects, I would recommend you give it a try.
I hope the above helps you in some way … let me know how your using it and good luck!
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!
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?
Thanks!
@Daniel king, don’t worry about it anymore. Look at 3.3. that came out yesterday:
http://codex.wordpress.org/Function_Reference/wp_editor
@Dan, thanks for the tip! I was waiting for this for almost a year…
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"
* 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.
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.
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?
@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.
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?
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
$custom_mb->the_value(‘composer’);
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.
@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.
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
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?
Thanks!
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.
@aris, i’m pretty sure i have this sorted. i have been meaning to write a blog post about it for a while.
@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.
@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.
Just tried @helgatheviking solution and it works really well. Very straight forward to easily drop into your theme and start testing it out.
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.
@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!
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.
@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.
@raturaaj – thanks for the reminder. i’ve been meaning to fix that.
From now on you can use to use the editor in your metabox.
http://codex.wordpress.org/Function_Reference/wp_editor
Thanks for this great class!
This gave me a good starting point to implement custom TinyMCE editors, thanks