How to add wysiwyg editor in Wordpress meta box

Question

I'm creating a meta box for my custom post type. There are multiple fields where I would like to use wysiwyg editor rather than <textarea>. Is is possible to add multiple editors to a meta box?

I would really appreciate your help!

Many thanks. Dasha

Solution 1

Here is full code example:

add_action( 'add_meta_boxes',  function() { 
    add_meta_box('html_myid_61_section', 'TITLEEEEE', 'my_output_function');
});

function my_output_function( $post ) {
    $text= get_post_meta($post, 'SMTH_METANAME' , true );
    wp_editor( htmlspecialchars($text), 'mettaabox_ID', $settings = array('textarea_name'=>'MyInputNAME') );
}

add_action( 'save_post', function($post_id) {
    if (!empty($_POST['MyInputNAME'])) {
        $datta=sanitize_text_field($_POST['MyInputNAME']);
        update_post_meta($post_id, 'SMTH_METANAME', $datta );
    }
}); 

P.S. MUST-Recommendation from my experience:

Forget adding custom codes, use Advanced Custom Fields, it's excellent and simplify your life.

Solution 2

http://codex.wordpress.org/Function_Reference/wp_editor was by far the easiest method I found, built into Wordpress since 3.3 (so upgrade ;-) )

Solution 3

// for custom post type

function wo_second_editor($post) {

  echo "<h3>Write here your text for the blue box on the right:</h3>";
  $content = get_post_meta($post->ID, 'wo_blue_box' , true ) ;
  wp_editor( htmlspecialchars_decode($content), 'wo_blue_box', array("media_buttons" => false) );
}

add_action('edit_form_advanced', 'wo_second_editor');


function wo_save_postdata($post_id, $post, $update) {

  //...

  if (!empty($_POST['wo_blue_box'])) {
    $data=htmlspecialchars($_POST['wo_blue_box']);
    update_post_meta($post_id, 'wo_blue_box', $data );
  }
}

add_action('save_post', 'wo_save_postdata');


// Theme:

<div class="blue">
  <?php
  $content = get_post_meta(get_the_ID(), 'wo_blue_box' , true );
    $content = htmlspecialchars_decode($content);
    $content = wpautop( $content );
    echo $content;
  ?>
</div>

Solution 4

But you need to replace presentation with nl2br() function as textarea in custom templates have the toogle JS issue, that removes all your <P> and <br/> tags and therefore all line breaks.

Solution 5

You can use the wordpress default text editor in the metabox using

add_action( 'edit_page_form', 'my_second_editor' );
function my_second_editor() {
    // get and set $content somehow...
    wp_editor( $content, 'mysecondeditor' );
}

View more solutions

Comments

[Waiting for Dev...]

Don't forget to set the id argument to something different than the empty string or it won't work...

[Matthew]

But for Advanced Custom Fields, you have to pay like $30.00 for a repeater field. I'd rather make my own.

[Danny Coulombe]

@Matthew You rather code your own than paying $30.00? How long do you think it's going to take you to implement this?

[Matthew]

@DannyCoulombe It didn't take too long. It was a great learning experience, too! If you're curious, you can check it out here

[Danny Coulombe]

@Matthew for the sake of learning then you have my blessings! :-)

[nektobit]

'get_post_meta($post' must be 'get_post_meta($post->ID'

[Fanky]

Are you sure you have to save the content encoded in htmlspecialchars()? What exactly are you trying to prevent? Looking at the source of the edit page shows < and > in the textarea, though I haven't used the function