The correct way of adding TinyMCE editor to custom meta box textarea?

Question

Since Wp 3.2 a lot of changed to TinyMCE and Wordpress and ow I can not find out how to add the Tiny MCE to meta box in Page.

This is how it looks when I am not firing up the MCE http://screencast.com/t/ECQeyvJYC

And this is when I fire up the Tiny MCE

if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
tinyMCE.execCommand("mceAddControl", false, "templatetext");
}

http://screencast.com/t/muvuD0esJW

So everything is messed up somewhow.

Do you know the solution?

Answer 1

Not sure if this helps but 3.3 introduced wp_editor() for displaying editors.

Answer 2

To add TinyMCE editor please follow below given steps:

 1. Add following function to your plugins file or the functions.php of your theme:

    function addtinymce() {
    echo '<script language="javascript" type="text/javascript" src="'.site_url().'/wp-includes/js/tinymce/tiny_mce.js"></script>';
    echo '<script language="javascript" type="text/javascript">';
    echo 'tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "advanced",
            plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

            // Theme options
            theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

            // Skin options
            skin : "o2k7",
            skin_variant : "silver",

            // Example content CSS (should be your site CSS)
            content_css : "'.site_url().'/wp-content/themes/astoria/style.css",

            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "js/template_list.js",
            external_link_list_url : "js/link_list.js",
            external_image_list_url : "js/image_list.js",
            media_external_list_url : "js/media_list.js"
        });';
    echo '</script>';
    }

 2. Now at the page where you want to use TinyMCE editor, simply call the function as:

    addtinymce();

It will automatically convert your textarea to the editor.
Hope it works for you:)