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!
I found a solution to fix waky ul’s and paragraphs. It works.
I added a javascript file I borrowed from TinyMCE Advanced…
I’ve posted it here…. paste it right after the javascript that Dimas posted above. That’s what I did.
Here’s the linke: https://gist.github.com/1190684
Thanks for the code. I am having problems when adding additional meta box groups. I have tried a few different javascript resources from these comments but can’t get any to work.
When I add a new meta group I can’t edit the TinyMCE until I save the page and go back into it. Have anyone got the same problem/solution. Thanks.
I’ve used this several times on many websites and it’s worked awesomely, but I just grabbed your latest version (which now places the WPAlchemy folder inside wp-content and inclue a setup.php from the metaboxes folder, the old versions I used relate to this post more accurately with the WPalchemy folder inside the theme) but when I tried using the latest version, any WYSIWYG textareas would replace their data with the HTML but in the “Visual” view, so that when the page would update it would replace all of the syntax with & code. I switched everything over to old files that I had laying around from previous websites and it worked perfectly.
Also I just noticed another issue, it doesn’t accurately portray WordPress’ image caption shortcode.
Nevermind, I figured that last bit out by surrounding it with apply_filters. Sorry to waste your time on that haha
and i’m back to having the issue w/ the textareas. using wp_richedit_pre the html markup gets turned into ampersands, and not using it loses the linebreaks.
ok, so i just rolled back to 1.4.9 and this issue of html tags being converted into special characters is resolved, so it must be something that has been added to the class between 1.4.9 and the current 1.4.15
i think line 1675 might be at fault:
return htmlentities($value, ENT_QUOTES, ‘UTF-8′);
use this:
esc_html( wp_richedit_pre ( $mb->get_the_value() ) )
using both Armand’s code and Jon’s, all the problems i was having where fixed. namely, the outputted escaped html and the non outputted linebreaks.
thanks !
Ok, everything is working for me except one small but annoying problem. If my metbox is shown as “CLOSED” the when I open it, tinymce area is shortened and the formatting is off. Now if I click in the area it springs into place to look normal.
Like I said, everything works, it’s just this small annoying problem on a closed metabox and then opening it.
Anyone else experience this problem?
I´m using TinyMCE and checking the option to not remove p and br tags when saving. That works for me.
I´m having another issue though, I can´t style the tinymce area. It has a grey background for some reason and it should be white. I am importing my own editor-style.css from the TinyMCE Advanced plugin but it doesnt apply. I also tried doing it through functions.php but that didnt work either. Strange thing is that if I check the css in firefox then it firebug say´s it´s using my editor-style.css. But the actual styles are not from that file, thats easy to see. So, where do the styles come from and how do I overwrite them?
@Kathy
Any chance you can share your code for adding the media buttons to the TinyMCE fields? Are they work with repeatable fields?
I´m having trouble with pictures/media beeing inserted into the default editor ending up in my wysisyg-editor created by wpalchey instead of where they should. I saw someone else had the same trouble back in the comments, but trying out the code they suggested disables my wysiwyg-editor completly.
This is how I set up my editor in functions.php :
http://pastebin.com/KLVqFpvH
What can I do to fix this?
I just noticed I can avoid the problem by setting the default editor to WYSISYG-mode instead of html-mode. That will insert the media into the default editor. That aint optimal but it´s totally ok anyway!
Anyone knows how to add media buttons for a TinyMCE custom field?
@Dimas Please, could you help? I need to add media rows for repeatable WYSIWYG fields..
+1 to the above comment! I need this too!
Upload buttons instructions would be nice
Thanks!
Hello,
is this really needed??
// 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');
I copied the css parte in the already present /metaboxes/meta.css and removed the include metabox.php and works fine.
??
Thanks
How to show the editor if the textarea is added via Ajax? Currently MCE doesn’t display until the post is saved.
Hi,
Have used this and all is well except that the outputted text in the site template is stripped of HTMl and so is negating the whole thing.
I’m guessing that I’m missing something pretty simple but just trying to output the content of the meta box in the normal way.
The content is there but stripped of HTML. Any ideas….?
Thanks
Ok, ignore my last message – just went through the comments. Poor form on my part to have missed the work arounds on this…
Awesome work on WPAlchemy though Dimas, fantastic. Have a great weekend.
The new wp_editor() function in WordPress 3.3 is going to make this much easier.
p.s. If you need more than just WYSIWYG editors (i.e. radios and such) then the More Fields plugin is a dream. Very hassle-free compared to rolling your own or using WPAlchemy.
hello,
I made this working but when in the normal content editor of the post, I cchange to “html” mode all the breaklines are removed and i cannot see the paragraphs, etc…
do you have the same problme??
I used the code for armand also but its not working
thanks