Using TinyMce with textareas in meta boxes on custom post types

Question

I am trying to use the http://www.tinymce.com/ plugin to add a tinymce to my textareas in my meta boxes I have created. I've googled other ways and either I cant get it to work or didnt grasp the concept. SO this is what Im trying now --

I tried creating plugin to add the script to my admin dashboard --

add_action('admin_init', 'admin_load_scripts'); 
function admin_load_scripts() { 
    $js_file = plugins_url( '/tinymce/jquery.tinymce.min.js', __FILE__ );  
    wp_enqueue_script('jquery.tinymce.min', $js_file, array('jquery')); 
}

Then I need to call it like so --

<script>
        tinymce.init({selector:'textarea'});
</script>

But im not sure how to do this, being that this is for the backend and not the front end. How can I achieve this?

UPDATED

This is my code for the meta boxes. http://pastebin.com/WcC51uA9

I tried the following methods (placing it in functions.php of course), and for the most part they either just didnt work or would show up on the top of the page or on the bottom of the page. They didnt show up on the textarea at all. ---

http://pastebin.com/Ct0mF6q7

http://pastebin.com/R6t0ij6h

http://pastebin.com/dcczcVby

http://pastebin.com/yt1uRS5U

Answer 1

Here's a pastebin with your code included.

Get the old value of the tinyMCE

$meta_biography = get_post_meta( $post->ID, 'meta_biography', true );

Call the TinyMCE Editor

wp_editor( $meta_biography, 'biography', array(
    'wpautop'       => true,
    'media_buttons' => false,
    'textarea_name' => 'meta_biography',
    'textarea_rows' => 10,
    'teeny'         => true
) );

Save The Editor Value or if nothing is there - delete old values.

if( isset( $_POST['meta_biography'] ) && $_POST['meta_biography'] != '' ) {
    update_post_meta( $post_id, 'meta_biography', $_POST['meta_biography'] );
} else {
    delete_post_meta( $post_id, 'meta_biography' );
}

If you want to add more options to the editor - You can view the Codex or Check out this nice WPTuts Article. You want to use the tinymce and pass it an array of settings. You might have to remove the teeny => true in the wp_editor() since the Codex says that it will only use minimal editor configuration.

Answer 2

// for pages use 'edit_page_form' as the first parameter. And see my comment below.
add_action( 'edit_form_advanced', 'my_meta_editor' ); 

function my_meta_editor() {

    // set 'your_meta_key' to the actual key
    $content = get_post_meta($post->ID, 'your_meta_key', true);

    // only low case [a-z], no hyphens and underscores
    $editor = 'mymetaeditor';

    // See my comment below
    $editor_settings = array();

    wp_editor( $content, $editor, $editor_settings);

}

Search Administrative Actions for edit_form_after_title, edit_form_after_editor, edit_form_advanced if you want to change the location of the meta box.

Also see wp_editor for editor settings.

Answer 3

This function worked perfectly for me just add to your functions.php file and make your custom fields textareas and you are done:

//add tinymce editor to custom fields
function admin_add_wysiwyg_custom_field_textarea()
{ ?>
<script type="text/javascript">/* <![CDATA[ */
    jQuery(function($){
        var i=1;
        $('textarea').each(function(e)
        {
          var id = $(this).attr('id');
          if (!id)
          {
           id = 'customEditor-' + i++;
           $(this).attr('id',id);
          }
          tinyMCE.execCommand("mceAddEditor", false, id);
          tinyMCE.execCommand('mceAddControl', false, id);
        });
    });
/* ]]> */</script>
<?php }
add_action( 'admin_print_footer_scripts', 'admin_add_wysiwyg_custom_field_textarea', 99 );

Taken from here.