Come faccio a includere un editor TinyMCE nel frontend?

Question

Sto cercando di aggiungere un editor TinyMCE nel mio frontend da cui gli utenti possono inserire, ma non hanno avuto fortuna finora. Ecco il codice:

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>

Problema: Texteditor non aggiungendo al textarea. Anche se il file js TinyMCE è carico.

Answer 1

Bene, grazie a wp 3.3 ora abbiamo wp_editor() funzione per farlo:)

Answer 2

editor_selector è per il targeting classi, non id.

Inoltre, quando si utilizza editor_selector, si è tenuto a mode: "specific_textareas" impostato in modo per farlo funzionare.

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

Così il vostro JavaScript e HTML dovrebbe essere simile a questo:

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>

Answer 3

Benche @maryisdead risposta potrebbe essere di destra, io ti do un altro suggerimento, prima assicurarsi che non c'è un solo elemento nella tua pagina con id = "Editor", quindi l'installazione TinyMCE in questo modo:

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

Anche utilizzare jQuery invece di $ nel codice javascript per assicurarsi che si sta chiamando metodi e selettori di jQuery.

Answer 4

editor_selector è per le classi e non per gli ID.

Si consiglia di utilizzare il valore di editor_selector come il nome della classe del textarea.