22

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:

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.

  • 1
    Perhaps you'll find some inspiration by looking at the code of the Frontend Editor – mike23 Jun 15 '11 at 7:57
16

Well, Thanks to wp 3.3 now we have wp_editor() function to do that :)

  • 1
    Yes, except it outputs the editor directly, as opposed to allowing you to use it in a shortcode... – cale_b Dec 5 '12 at 3:35
  • 4
    You can use this in a shortcode by using the php ob_content functions. These functions allow you to capture the output in a variable. Like so: ob_start(); include( static::getTemplatePath() . '/' . $templatePath . '.php'); $template = ob_get_contents(); ob_end_clean(); return $template; – Tosh Apr 2 '14 at 14:33
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>
0

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.

0

editor_selector is for classes and not for ids.

You should use editor_selector's value as the class name of the textarea.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.