Comment inclure un éditeur TinyMCE dans le frontend?

22

J'essaie d'ajouter un éditeur TinyMCE dans mon frontend à partir duquel les utilisateurs peuvent publier mais n'ont pas eu de chance jusqu'à présent. 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 n'ajoute pas à la zone de texte. Bien que le fichier js TinyMCE se charge.

tinymce front-end Sisir
la source
1
Vous trouverez peut-être de l'inspiration en consultant le code de l' éditeur
frontend

Réponses:

17

Eh bien, grâce à wp 3.3, nous avons maintenant une wp_editor()fonction pour le faire :)

Sisir
la source
1
Oui, sauf qu'il génère l'éditeur directement, au lieu de vous permettre de l'utiliser dans un shortcode ...
cale_b
4
Vous pouvez l'utiliser dans un shortcode en utilisant les fonctions php ob_content. Ces fonctions vous permettent de capturer la sortie dans une variable. Comme ça: ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); return $ template;
Tosh
2

editor_selector est pour le ciblage des classes, pas des identifiants.

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

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

Votre JavaScript et HTML devraient donc 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>
maryisdead
la source
0

Même si la réponse @maryisdead est peut-être juste, je vais vous donner un autre conseil, assurez-vous d'abord qu'il n'y a qu'un seul élément dans votre page avec l'id = "editor" puis configurez tinymce comme ceci:

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

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

adrian7
la source
0

editor_selector est destiné aux classes et non aux identifiants.

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

Franklin Inbaraj
la source