Come posso includere un editor TinyMCE nel frontend?

22

Sto cercando di aggiungere un editor TinyMCE nel mio frontend da cui gli utenti possono pubblicare, ma finora non hanno avuto fortuna. 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 si aggiunge a textarea. Anche se si sta caricando il file js TinyMCE.

tinymce front-end

— Sisir
fonte

1

Forse troverai un po 'di ispirazione guardando il codice del Frontend Editor

— mike23,

17

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

— Sisir
fonte

1

Sì, tranne per il fatto che genera direttamente l'editor, invece di permetterti di usarlo in un shortcode ...

— cale_b

4

Puoi usarlo in un shortcode usando le funzioni php ob_content. Queste funzioni consentono di acquisire l'output in una variabile. In questo modo: ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); return $ template;

— Tosh

2

editor_selector è destinato alle classi di targeting, non agli ID.

Inoltre, durante l'utilizzo editor_selector, è necessario impostare mode: "specific_textareas"affinché funzioni.

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

Quindi JavaScript e HTML dovrebbero apparire così:

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
fonte

0

Anche se la risposta di @maryisdead potrebbe essere corretta, ti darò un altro suggerimento, prima assicurati che ci sia un solo elemento nella tua pagina con l'id = "editor", quindi imposta in questo modo:

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

Usa anche jQuery invece di $ nel tuo codice javascript per assicurarti di chiamare i metodi e i selettori jQuery.

— adrian7
fonte

0

editor_selector è per le classi e non per gli id.

Dovresti usare il valore di editor_selector come nome della classe della textarea.

— Franklin Inbaraj
fonte