Wordpress - Adding TinyMCE on Frontend into jQuery UI widget

Question

I'm creating a Wordpress App. It consists on using custom fields on custom type, for managing personal projects.

My issue: I want to add the admin editor (tinyMCE) on frontend. Considering that I can have many textareas that will begin TinyMCE editors. So, I used this code:

PHP (on theme functions.php):

// TINY-MCE EDITOR ON FRONTEND
add_filter('wp_head','add_tinymce_editor');

function add_tinymce_editor(){
    wp_admin_css('thickbox');
    wp_enqueue_script('wp-tinymce');
    wp_enqueue_script('tinymce');
    wp_enqueue_script('editor');
    add_thickbox();
}

JS (on theme single-projects.php):

jQuery(document).ready(function(){
    // EDITORS
    tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        editor_selector :"tinymce_enabled"
    });
 });

On JS I set the "editor_selector" with a Class for all textareas that will begin tinyMCE editors. I cannot assign a single ID for each textareas because these can be 4 or 5 or 6, or more!!!

HTML: (on theme single-projects.php):

<textarea name="new-task-description" id="new-task-description"
    class="tinymce_enabled required"></textarea>

Each textarea is present on Jquery UI Accordions.

Now, my problem is, on Firebug (or browser console) I get this error:

tinyMCE is not defined

What's wrong?

thanks in advance!!!

Tom Tom · Accepted Answer · 2012-12-05T09:31:46

With Wordpress 3.3 you can use wp_editor() which is a lot easier.

http://codex.wordpress.org/Function_Reference/wp_editor

The right way to include scripts is add_action('wp_enqueue_scripts', 'tinymce_editor');

Wordpress - Adding TinyMCE on Frontend into jQuery UI widget

2 Answers