Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

up vote 7 down vote accepted

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 );
}
share|improve this answer
    
Thanks for the code. Would you mind explaining a little more "TinyMCE's location in the DOM is changed" and how I would go about "disabling TinyMCE and enabling quicktags". –  Travis Pflanz Apr 23 '12 at 3:30
    
No problem. Updated answer with non-Tiny version. Also, when you move a meta box using its drag and drop feeature, it is moved in the DOM. If the meta box contains an instance of TinyMCE, that instance's position in the DOM will have changed, which causes problems. Apparently it is possible to overcome these problems, but it would require a bunch of new functionality, so it was decided that wp_editor (at least when it's using TinyMCE) should not be used in a meta box. –  goto10 Apr 23 '12 at 3:59

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

share|improve this answer
    
I am looking for an example from scratch without a plugin. I will update the question. –  Travis Pflanz Apr 23 '12 at 2:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.