Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

How to add a Wordpress WYSIWYG editor to a meta box.

View wysiwyg-meta-box.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
<?php
define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important for CSS that this is different
define('WYSIWYG_META_KEY', 'extra-content');
add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
add_meta_box(WYSIWYG_META_BOX_ID, __('WYSIWYG Meta Box', 'wysiwyg'), 'wysiwyg_render_meta_box', 'post');
}
function wysiwyg_render_meta_box(){
global $post;
$meta_box_id = WYSIWYG_META_BOX_ID;
$editor_id = WYSIWYG_EDITOR_ID;
//Add CSS & jQuery goodness to make this work like the original WYSIWYG
echo "
<style type='text/css'>
#$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
#$editor_id{width:100%;}
#$meta_box_id #editorcontainer{background:#fff !important;}
#$meta_box_id #$editor_id_fullscreen{display:none;}
</style>
<script type='text/javascript'>
jQuery(function($){
$('#$meta_box_id #editor-toolbar > a').click(function(){
$('#$meta_box_id #editor-toolbar > a').removeClass('active');
$(this).addClass('active');
});
if($('#$meta_box_id #edButtonPreview').hasClass('active')){
$('#$meta_box_id #ed_toolbar').hide();
}
$('#$meta_box_id #edButtonPreview').click(function(){
$('#$meta_box_id #ed_toolbar').hide();
});
$('#$meta_box_id #edButtonHTML').click(function(){
$('#$meta_box_id #ed_toolbar').show();
});
//Tell the uploader to insert content into the correct WYSIWYG editor
$('#media-buttons a').bind('click', function(){
var customEditor = $(this).parents('#$meta_box_id');
if(customEditor.length > 0){
edCanvas = document.getElementById('$editor_id');
}
else{
edCanvas = document.getElementById('content');
}
});
});
</script>
";
//Create The Editor
$content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
the_editor($content, $editor_id);
//Clear The Room!
echo "<div style='clear:both; display:block;'></div>";
}
add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){
$editor_id = WYSIWYG_EDITOR_ID;
$meta_key = WYSIWYG_META_KEY;
if(isset($_REQUEST[$editor_id]))
update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);
}
Warkman commented

Thanks, very handy and simple.

jlambe commented

Hi, the function you use "the_editor" is deprecated since WP version 3.3.
In order to render a WYSIWYG editor, only make a call to the php function "wp_editor()"

You can take a look in the codex here : http://codex.wordpress.org/Function_Reference/wp_editor

Dang that's a convenient bit of code.

Awesome..., thank you so much..

Qix- commented

Holy crap it worked.

Thanks !!!!

Hi Inspector,
I noticed there's no nonce in your metabox, as is recommended.
Does wp_editor automatically check the post nonce when saving? I can't see that it's adding its own either.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.