Comment puis-je inclure un éditeur TinyMCE dans le frontend?

Question

Je suis en train d'ajouter un éditeur TinyMCE dans mon frontend où les utilisateurs peuvent poster mais ont eu jusqu'à présent pas de chance. Voici le 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>

Problème: Texteditor ne pas ajouter à textarea. Bien que le dossier de TinyMCE charge.

Answer 1

Eh bien, Merci à wp 3.3 nous avons maintenant la fonction wp_editor() pour le faire:)

Answer 2

editor_selector est pour cibler les classes, et non ids.

En outre, lors de l'utilisation editor_selector, il est nécessaire de mode: "specific_textareas" ensemble pour que cela fonctionne.

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

Donc, votre JavaScript et HTML devrait ressembler à ceci:

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

Altough de réponse peut-être raison, je vais vous donner un autre conseil, assurez-vous qu'il n'y a qu'un seul élément dans votre page avec l'id = « éditeur », puis la configuration tinymce comme ceci:

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

Utilisez également au lieu de jQuery $ dans votre code javascript pour vous assurer que vous appelez des méthodes jQuery et sélecteurs.

Answer 4

editor_selector est pour les classes et non pour ids.

Vous devez utiliser la valeur de editor_selector comme nom de classe de la zone de texte.