How do I include a TinyMCE editor in the frontend?

1 Views

I am trying to add a TinyMCE editor in my frontend from where users can post but have had no luck so far. Here is the code:

PHP:

Read More
add_action('wp_print_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {      
        wp_enqueue_script( 'tiny_mce' );
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
}

Javascript: 

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"editor"
    });
});

HTML: 

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

Problem: Texteditor not adding to textarea. Although the TinyMCE js file is loading.

Post Views: 1

Related posts

Leave a Reply

4 comments

  2. editor_selector is for targeting classes, not ids.

    Also, when using editor_selector, it is required to set mode: "specific_textareas" in order for it to work.

    See http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector

    So your JavaScript and HTML should look like this:

    jQuery(document).ready(function(){
tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"tinymce-enabled"
    });
});


    <textarea rows="8" cols="40" name="description" id="editor" class="tinymce-enabled required"><?php echo $description;?></textarea>

  3. Altough @maryisdead answer might be right, i’ll give you another tip, first make sure there’s only one element in your page with the id=”editor” then setup tinymce like so:

    tinyMCE.init({
    ...
    mode : "exact",
    elements : "editor"
});

    Also use jQuery instead of $ in your javascript code to make sure you are calling jQuery methods and selectors.