WordPress – Adding TinyMCE on Frontend into jQuery UI widget

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:

Read More

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!!!

Related posts

Leave a Reply

2 comments

  1. If tinymce is not defined the file tiny_mce.js has not been loaded on the page. Make sure the file gets loaded eigther directly or with the means wordpress offers.