26

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.

Improve this question
1
  • 1
    Perhaps you'll find some inspiration by looking at the code of the Frontend Editor
    – mike23
    Jun 15, 2011 at 7:57

4 Answers 4

Reset to default
21

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

Improve this answer
2
  • 1
    Yes, except it outputs the editor directly, as opposed to allowing you to use it in a shortcode...
    – random_user_name
    Dec 5, 2012 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, 2014 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>
Improve this answer
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.

Improve this answer
0

editor_selector is for classes and not for ids.

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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