Come includere l'editor TinyMCE nel frontend?

Question

Come includere l'editor TinyMCE nel frontend?

20 mag 2011, 13:26:11

Visualizzazioni: 36.8K

Voti: 27

Sto cercando di aggiungere un editor TinyMCE nel mio frontend dove gli utenti possono pubblicare, ma finora non ho avuto successo. 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", 
        /*plugin : "autolink, liste, correttore ortografico, stile, layer, tabella, advhr, advimage, advlink, emozioni, iespell, inlinepopups, insertdatetime, anteprima, media, cercasostituisci, stampa, menucontestuale, incolla, direzionalità, schermo intero, nonmodificabile, caratterivisuali, nonseparabile, xhtmlxtras, modello",*/
        editor_selector :"editor"
    });
});

HTML:

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

Problema: L'editor di testo non si aggiunge alla textarea. Nonostante il file js di TinyMCE venga caricato.

Sisir

7.82K

tinymce front end

Commenti

Forse troverai qualche ispirazione guardando il codice del Frontend Editor

mike23

15 giu 2011 10:57:24

Tutte le risposte alla domanda

Commenti

Sì, tranne che restituisce direttamente l'editor, invece di permetterti di usarlo in uno shortcode...

random_user_name

5 dic 2012 05:35:37

Puoi usarlo in uno shortcode utilizzando le funzioni ob_content di PHP. Queste funzioni ti permettono di catturare 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 apr 2014 17:33:27

editor_selector è utilizzato per puntare alle classi, non agli id.

Inoltre, quando si utilizza editor_selector, è necessario impostare mode: "specific_textareas" per farlo funzionare.

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

Quindi il tuo JavaScript e HTML dovrebbero essere 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

823

26 giu 2011 00:15:58

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

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

Inoltre, usa jQuery invece di $ nel tuo codice JavaScript per essere sicuro di chiamare i metodi e i selettori di jQuery.

adrian7

316

5 ago 2011 23:00:59

editor_selector è per le classi e non per gli ID.

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

Franklin Inbaraj

1

29 mar 2016 08:53:34

Sisir 7.82K · Accepted Answer · 2011-12-12T15:06:00Z

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

Sisir

7.82K

12 dic 2011 15:06:00