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

wysiwyg-meta-box.php

<?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]);
                
}

Thanks, very handy and simple.

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..

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.

How to display metabox content on post?

thank you.!

How to automatically create paragraphs?

it works!

the_editor is deprecated; use wp_editor instead!

Thank you so much! One question/comment: according to the docs (scroll to the bottom under "Notes"), content saved from the editor should use wp_kses_post - making line 74-75:

if(isset($_REQUEST[$editor_id]))
                update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, wp_kses_post($_REQUEST[$editor_id]));

Is that necessary in this case?

Do you really need part after this:

//Add CSS & jQuery goodness to make this work like the original WYSIWYG

Isn't this enough: ?

$content = get_post_meta( $post->ID, WYSIWYG_META_KEY, true );
wp_editor( $content, $editor_id);

Hi
Thank you so much.
pleas how can i display the content? i use this WYSIWYG as a 2 Text.

Thank you
Hassan

As of now this is enough to add a WYSIWYG editor as a meta box and save its value.

// add the meta box
add_action('add_meta_boxes', function () {
    add_meta_box('additional_meta', 'Product Info', 'additional_meta_cb', ['post'], 'normal');
});

// The function to show the editor and its content if available.
function addition_meta_cb($post) {
    // get the content
    $text = get_post_meta($post, 'additional_meta', true);
    // add wp_editor the the screen
    wp_editor(htmlspecialchars($text), additional_meta_ID', $settings = array('textarea_name' => 'additional_meta', 'media_buttons' => true, 'tinymce' => true, 'teeny' => false, 'wpautop' => true));
}

// save the metabox
add_action('save_post', function ($post_id) {
    if (!empty($_POST['additional_meta'])) {
        $data = sanitize_text_field($_POST['additional_meta']);
        update_post_meta($post_id, 'additional_meta', $data);
    }
});

Thank you.