Utilizzare TinyMCE con textarea nelle meta box su custom post types

Question

Utilizzare TinyMCE con textarea nelle meta box su custom post types

2 ott 2013, 06:48:29

Visualizzazioni: 15.5K

Voti: 7

Sto cercando di utilizzare il plugin http://www.tinymce.com/ per aggiungere TinyMCE alle textarea nelle meta box che ho creato. Ho cercato altre soluzioni online ma non riesco a farle funzionare o non ho capito il concetto. Quindi ecco cosa sto provando ora --

Ho provato a creare un plugin per aggiungere lo script alla dashboard di amministrazione --

add_action('admin_init', 'admin_load_scripts'); 
function admin_load_scripts() { 
    $js_file = plugins_url( '/tinymce/jquery.tinymce.min.js', __FILE__ );  
    wp_enqueue_script('jquery.tinymce.min', $js_file, array('jquery')); 
}

Poi devo chiamarlo così --

<script>
        tinymce.init({selector:'textarea'});
</script>

Ma non sono sicuro di come farlo, dato che questo è per il backend e non per il frontend. Come posso ottenere questo risultato?

AGGIORNATO

Questo è il mio codice per le meta box. http://pastebin.com/WcC51uA9

Ho provato i seguenti metodi (inserendoli ovviamente in functions.php), e per lo più o non funzionavano o apparivano in cima alla pagina o in fondo. Non apparivano affatto sulla textarea. ---

http://pastebin.com/Ct0mF6q7

http://pastebin.com/R6t0ij6h

http://pastebin.com/dcczcVby

http://pastebin.com/yt1uRS5U

730wavy

193

campo personalizzato metabox wp admin javascript tinymce

Commenti

Perché non utilizzare la funzione wp_editor()?

helgatheviking

9 ott 2013 17:01:12

Tutte le risposte alla domanda

Commenti

grazie. Un'ultima domanda che avevo era, ho visto l'articolo di wptuts e l'array delle impostazioni, ma non ho visto menzionare il passaggio di un array di impostazioni per il "kitchen sink". Hai qualche idea al riguardo? Volevo creare un editor per un altro campo che consenta solo di cambiare il colore del carattere.

730wavy

10 ott 2013 19:14:59

@mygm26 - nell'articolo WPTuts, viene passato theme_advanced_buttons1 - se vuoi una seconda riga puoi anche passare theme_advanced_buttons2 o quante righe desideri. Nell'articolo WPTuts c'è anche wp_adv alla fine di theme_advanced_buttons1 che ti serve per mostrare la tua seconda o terza riga di pulsanti. Se stai solo cercando di cambiare il colore - potrei suggerirti di dare un'occhiata al Color Picker che è già integrato in Wordpress.

Howdy_McGee

10 ott 2013 19:49:26

Ok ho capito, grazie. C'è un modo per nascondere il kitchen sink su istanze specifiche? Sto usando il codice wp editor per multiple textarea ma volevo nascondere il kitchen sink su una di queste @Howdy_McGee

730wavy

12 ott 2013 03:57:20

@mygm26 Non ne sono sicuro al 100% e stavo cercando di trovare la risposta - puoi fare riferimento a questa domanda ma se mai dovessi scoprirlo, fammi sapere come: http://wordpress.stackexchange.com/questions/117395/tinymce-show-advanced-options-2nd-row-by-default

Howdy_McGee

14 ott 2013 05:42:53

// per le pagine usa 'edit_page_form' come primo parametro. Vedi il mio commento sotto.
add_action( 'edit_form_advanced', 'my_meta_editor' );

function my_meta_editor() {

    // imposta 'your_meta_key' con la chiave effettiva
    $content = get_post_meta($post->ID, 'your_meta_key', true);

    // solo caratteri minuscoli [a-z], no trattini e underscore
    $editor = 'mymetaeditor';

    // Vedi il mio commento sotto
    $editor_settings = array();

    wp_editor( $content, $editor, $editor_settings);

}

Cerca le Azioni Amministrative per edit_form_after_title, edit_form_after_editor, edit_form_advanced se vuoi cambiare la posizione del meta box.

Vedi anche wp_editor per le impostazioni dell'editor.

Max Yudin

6.38K

2 ott 2013 09:46:29

Commenti

grazie per la risposta, non sono sicuro di come applicarla alla mia situazione. Aggiornerò la mia risposta con il codice che sto utilizzando per creare i miei metabox.

730wavy

2 ott 2013 20:07:49

Ovunque tu voglia il tinymce puoi semplicemente inserire qualcosa come: http://pastebin.com/6N5adFip -- Nella mia esperienza, è meglio inserirlo in una grande area di contenuto, come sotto il tuo editor principale degli articoli o simili.

Howdy_McGee

2 ott 2013 21:56:50

@Howdy_McGee ok quindi se inserisco il codice dal pastebin nel file functions del mio tema, e sostituisco l'id, verrà renderizzato l'editor per quella textarea?

730wavy

2 ott 2013 22:49:46

Teoricamente sì, tutto ciò che @MaxYudin ti ha fornito sono modi per mostrare wp_editor(); dovresti essere in grado di farlo funzionare da lì. È abbastanza semplice. Altrimenti una rapida ricerca dovrebbe fornire molti risultati. Fammi sapere se riesci a farlo funzionare!

Howdy_McGee

2 ott 2013 23:24:19

Non riesco a farlo funzionare. Ho provato a usare anche questo codice -- `// per le pagine usa 'edit_page_form' come primo parametro. E vedi il mio commento sotto. add_action( 'edit_form_advanced', 'my_meta_editor' );

function my_meta_editor() {

// imposta 'your_meta_key' con la chiave effettiva
$content = get_post_meta($post->ID, 'att_meta_bio', true);

// solo lettere minuscole [a-z], niente trattini e underscore
$editor = 'mymetaeditor';

// Vedi il mio commento sotto
$editor_settings = array();

wp_editor( $content, $editor, $editor_settings);

}` @Max Yudin @Howdy_McGee

730wavy

5 ott 2013 08:51:30

Mostra i restanti 7 commenti

Questa funzione ha funzionato perfettamente per me, basta aggiungerla al tuo file functions.php e trasformare i tuoi campi personalizzati in textarea e il gioco è fatto:

//aggiunge l'editor tinymce ai campi personalizzati di tipo textarea
function admin_add_wysiwyg_custom_field_textarea()
{ ?>
<script type="text/javascript">/* <![CDATA[ */
    jQuery(function($){
        var i=1;
        $('textarea').each(function(e)
        {
          var id = $(this).attr('id');
          if (!id)
          {
           id = 'customEditor-' + i++;
           $(this).attr('id',id);
          }
          tinyMCE.execCommand("mceAddEditor", false, id);
          tinyMCE.execCommand('mceAddControl', false, id);
        });
    });
/* ]]> */</script>
<?php }
add_action( 'admin_print_footer_scripts', 'admin_add_wysiwyg_custom_field_textarea', 99 );

Preso da qui.

Salam El-Banna

121

26 feb 2016 12:49:53

Howdy_McGee 20.8K · Accepted Answer · 2013-10-09T16:54:27Z

Ecco un pastebin con il tuo codice incluso.

Ottieni il vecchio valore di tinyMCE

$meta_biography = get_post_meta( $post->ID, 'meta_biography', true );

Chiama l'Editor TinyMCE

wp_editor( $meta_biography, 'biography', array(
    'wpautop'       => true,
    'media_buttons' => false,
    'textarea_name' => 'meta_biography',
    'textarea_rows' => 10,
    'teeny'         => true
) );

Salva il valore dell'Editor o se non c'è nulla - elimina i vecchi valori.

if( isset( $_POST['meta_biography'] ) && $_POST['meta_biography'] != '' ) {
    update_post_meta( $post_id, 'meta_biography', $_POST['meta_biography'] );
} else {
    delete_post_meta( $post_id, 'meta_biography' );
}

Se vuoi aggiungere più opzioni all'editor - Puoi consultare il Codex o dare un'occhiata a questo bel Articolo di WPTuts. Potresti voler usare tinymce e passargli un array di impostazioni. Potresti dover rimuovere teeny => true in wp_editor() poiché il Codex dice che utilizzerà solo una configurazione minima dell'editor.