Post custom metabox textarea using wp_editor

Question

I'm a novice and looking to add the wp_editor to a custom metabox textarea field. I've looked seemingly everywhere for an complete example for writing a metabox with a textarea that uses the wp_editor. I am looking for a complete beginning to end example.

I do not want to use a plugin.

Anyone have a link to a complete example?

Thanks

Answer 1

There is at least 1 issue with using wp_editor in a meta box, as discussed in ticket #19173(Good read on the subject of wp_editor and meta boxes). TinyMCE gets all messed up if you move the meta box that contains it (specifically, if TinyMCE's location in the DOM is changed). You can, however, use the Quicktags version (non tinyMCE). Another alternative is to just not move the box (lame) or add your editors using the edit_page_form or edit_form_advanced hooks instead of using add_meta_box().

I wrote a quick plugin to demonstrate the issue. It's a fully working example of using wp_editor in a meta box though. You can configure wp_editor to make it more meta box friendly by disabling TinyMCE and enabling quicktags using the appropriate args.

<?php
/**
 * Plugin Name: WP Editor in a Meta Box
 * Plugin URI: 
 * Description: Demonstration of WP Editor in a meta box.
 * Version: 1.0
 * Author: goto10
 * Author URI: 
 * License: 
 */

// file name: wp_editor-in-meta-box-test.php 

/* Meta box code based on http://codex.wordpress.org/Function_Reference/add_meta_box */

/* Define the custom box */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );

/* Do something with the data entered */
add_action( 'save_post', 'myplugin_save_postdata' );

/* Adds a box to the main column on the Post and Page edit screens */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'WP Editor Test #1 Box', 'wp_editor_meta_box' );
}

/* Prints the box content */
function wp_editor_meta_box( $post ) {

  // Use nonce for verification
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );
  wp_editor( $field_value[0], '_wp_editor_test_1' );
}

/* When the post is saved, saves our custom data */
function myplugin_save_postdata( $post_id ) {

  // verify if this is an auto save routine. 
  // If it is our form has not been submitted, so we dont want to do anything
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // verify this came from the our screen and with proper authorization,
  // because save_post can be triggered at other times
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) ) )
      return;

  // Check permissions
  if ( ( isset ( $_POST['post_type'] ) ) && ( 'page' == $_POST['post_type'] )  ) {
    if ( ! current_user_can( 'edit_page', $post_id ) ) {
      return;
    }    
  }
  else {
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
      return;
    }
  }

  // OK, we're authenticated: we need to find and save the data
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );
  }

}

Edit: This version of the wp_editor_meta_box() function from the example above, will have TMCE disabled, and Quicktags enabled:

/* Prints the box content */
function wp_editor_meta_box( $post ) {

  // Use nonce for verification
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );

  // Settings that we'll pass to wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  );
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
}

Answer 2

Are you looking for a code example from scratch, or would you consider integrating a custom metabox plugin which supports a WYSIWYG editor in a metabox? If the latter, might I suggest https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress