Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to add tinymce editor in my frontend from where users can post. But 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.

share|improve this question
1  
Perhaps you'll find some inspiration by looking at the code of the Frontend Editor –  mike23 Jun 15 '11 at 7:57

4 Answers 4

up vote 5 down vote accepted

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

share|improve this answer
    
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
    
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 at 14:33

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>
share|improve this answer

Have a look Here

http://blog.murawski.ch/2011/10/wordpress-backend-editor-tinymce-im-frontend-einbinden/

I made a plugin class where you can add Wordpress editor in the frontend.

Easy to do and working fine.

share|improve this answer
    
I wish i could get a english version of the post.. I will try it when i get some time. Thanks! –  Sisir Oct 24 '11 at 18:04

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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