How to Use Multiple WordPress WYSIWYG Visual Editors

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!