Creando una instancia de wp_editor con botones personalizados de tinyMCE

9 abr 2012, 01:24:49
Vistas: 38.7K
Votos: 21

¿Hay alguna manera de definir wp_editor() con botones personalizados de tinyMCE?

He notado que la referencia de la función wp_editor menciona que uno de los argumentos de $settings puede ser tinymce (array) (opcional) Carga TinyMCE, puede usarse para pasar configuraciones directamente a TinyMCE usando un array().

Mi página usa varias instancias diferentes y me gustaría agregar ciertos botones a ciertas instancias.

Por ejemplo,

Instancia #1 : Botones estándar
Instancia #2 : negrita, cursiva, ul + (personalizado) pH, temp
Instancia #3 : negrita, cursiva, ul + (personalizado) min_size, max_size

¿Alguien sabe cómo podría hacer esto si ya he registrado los botones como plugins de tinyMCE según este tutorial?


EDICIÓN

Aquí está el código que estoy usando en mi archivo de plugin para hacer que esto funcione:

function add_SF_buttons() {
    // Si el usuario no puede editar posts y páginas, retornar
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
        return;
    if ( get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'add_SF_buttons_plugins');
    }
}

function add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = $this->plugin_url . '/js/tinymce_buttons/pH.js';
    $plugin_array['pH_min'] = $this->plugin_url . '/js/tinymce_buttons/pH_min.js';
    $plugin_array['pH_max'] = $this->plugin_url . '/js/tinymce_buttons/pH_max.js';
    return $plugin_array;
}

-

if (isset($SpeciesProfile)) {
    add_action( 'init' , array (&$SpeciesProfile, 'register_species' ));
    add_action( 'init' , array( &$SpeciesProfile, 'register_species_taxonomies' ));

    add_action( 'init', array (&$SpeciesProfile, 'add_SF_buttons' ));
}

-

<?php wp_editor( $distribution, 'distribution', array( 'theme_advanced_buttons1' => 'bold, italic, ul, pH, pH_min', "media_buttons" => false, "textarea_rows" => 8, "tabindex" => 4 ) ); ?>

Desafortunadamente, esto no funciona - el editor anterior simplemente muestra los mismos botones que cualquier otra instancia en la página.


Gracias de antemano,

0
Todas las respuestas a la pregunta 4
7
15

Básicamente lo tenías, según la descripción.

Aquí está lo que podrías estar buscando para las instancias 2 y 3 (para la instancia 1 puedes dejar la configuración vacía para obtener el conjunto predeterminado de botones):

Instancia 2:

wp_editor(
    $distribution,
    'distribution',
    array(
      'media_buttons' => false,
      'textarea_rows' => 8,
      'tabindex' => 4,
      'tinymce' => array(
        'theme_advanced_buttons1' => 'bold, italic, ul, pH, temp',
      ),
    )
);

Instancia 3 (mostrando cada una de las 4 filas que puedes configurar para TinyMCE):

wp_editor(
    $distribution,
    'distribution',
    array(
      'media_buttons' => false,
      'textarea_rows' => 8,
      'tabindex' => 4,
      'tinymce' => array(
        'theme_advanced_buttons1' => 'bold, italic, ul, min_size, max_size',
        'theme_advanced_buttons2' => '',
        'theme_advanced_buttons3' => '',
        'theme_advanced_buttons4' => '',
      ),
    )
);

Te recomiendo que revises el archivo wp-includes/class-wp-editor.php (específicamente la función editor_settings en la línea 126) para entender cómo WordPress procesa los ajustes que usas dentro de la función wp_editor(). También revisa esta página para entender más sobre la funcionalidad de TinyMCE y sus opciones de inicialización (las cuales no creo que WordPress soporte completamente).

12 abr 2012 03:01:42
Comentarios

Hola colega. Gracias por la respuesta. He añadido algo de código a mi publicación original que, según tu respuesta, debería funcionar, pero no lo hace. ¿Podrías echarle un vistazo?

turbonerd turbonerd
12 abr 2012 11:52:32

Olvidé envolver los parámetros específicos de TinyMCE en su propio array. He editado la respuesta y añadido los otros parámetros que mencionas en tu pregunta. ¿Me dices cómo te va?

Tomas Buteler Tomas Buteler
12 abr 2012 13:29:28

También ten en cuenta que otros (¡como yo!) querríamos saber cómo hacer esto nosotros mismos, así que intenta no limitarte a una respuesta específica solo para dunc. ¿Podrías añadir enlaces a la documentación relevante de WP/TinyMCE?

Tom J Nowell Tom J Nowell
12 abr 2012 13:38:03

Genial, parece que esto funciona. Lamentablemente mis botones no lo hacen, pero esa es una pregunta aparte :) Gracias tbuteler.

turbonerd turbonerd
12 abr 2012 16:50:46

¡De nada! @TomJNowell, he añadido un último párrafo con lecturas recomendadas, ¡gracias por la sugerencia!

Tomas Buteler Tomas Buteler
12 abr 2012 17:30:33

Casi olvido concederte la recompensa :) La nueva pregunta está aquí por si tienes alguna idea: http://wordpress.stackexchange.com/questions/48782/registering-custom-tinymce-buttons-for-admin-area-to-work-with-custom-instance

turbonerd turbonerd
13 abr 2012 22:04:55

Los nombres de las barras de herramientas han cambiado: ahora debes usar toolbar1, 2, 3 y 4 :-)

Erenor Paz Erenor Paz
5 nov 2020 19:09:32
Mostrar los 2 comentarios restantes
0
10

Puedes configurar los parámetros mediante un array en la función wp_editor(); un ejemplo:

$settings = array(
    'tinymce'       => array(
        'setup' => 'function (ed) {
            tinymce.documentBaseURL = "' . get_admin_url() . '";
        }',
    ),
    'quicktags'     => TRUE,
    'editor_class'  => 'frontend-article-editor',
    'textarea_rows' => 25,
    'media_buttons' => TRUE,
);
wp_editor( $content, 'article_content', $settings ); 

Puedes establecer los valores mediante un array en el parámetro 'tinymce', 'tinymce' => true, // cargar TinyMCE, puede usarse para pasar configuraciones directamente a TinyMCE usando un array() También es posible obtener los parámetros de los botones: theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3, theme_advanced_buttons4

array( 'theme_advanced_buttons1' => 'bold, italic, ul, pH, temp' )

también puedes usar un filtro para crear botones personalizados, aquí otro ejemplo:

function fb_change_mce_options($initArray) {
    // Cadena separada por comas de etiquetas extendidas
    // Cadena separada por comas de elementos extendidos
    $ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';
    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $initArray['extended_valid_elements'] .= ',' . $ext;
    } else {
        $initArray['extended_valid_elements'] = $ext;
    }
    // opcional: establecer el parámetro verify_html de TinyMCE
    //$initArray['verify_html'] = false;
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );

también puedes filtrar los botones directamente; cada línea tiene su propio filtro: mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4

los siguientes parámetros son los valores por defecto para el ejemplo del hook: tiny_mce_before_init

'mode' => 'specific_textareas'
'editor_selector' => 'theEditor'
'width' => '100%'
'theme' => 'advanced'
'skin' => 'wp_theme'
'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
'theme_advanced_buttons3' => ''
'theme_advanced_buttons4' => ''
'language' => 'de'
'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
'theme_advanced_toolbar_location' => 'top'
'theme_advanced_toolbar_align' => 'left'
'theme_advanced_statusbar_location' => 'bottom'
'theme_advanced_resizing' => true
'theme_advanced_resize_horizontal' => false
'dialog_type' => 'modal'
'relative_urls' => false
'remove_script_host' => false
'convert_urls' => false
'apply_source_formatting' => false
'remove_linebreaks' => true
'gecko_spellcheck' => true
'entities' => '38,amp,60,lt,62,gt'
'accessibility_focus' => true
'tabfocus_elements' => 'major-publishing-actions'
'media_strict' => false
'paste_remove_styles' => true
'paste_remove_spans' => true
'paste_strip_class_attributes' => 'all'
'wpeditimage_disable_captions' => false
'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'

Consulta este enlace para más información sobre este filtro.

12 abr 2012 14:10:17
0

Solo para actualizar esto ya que tuve que revisar los archivos fuente de WordPress

$settings = array(
    'tinymce' => array(
        'toolbar1' => 'negrita, cursiva',
        'toolbar2' => '',
    ),
    'wpautop' => false,
    'media_buttons' => false,
);

Creo que esto cambió con TinyMCE 4.

30 ene 2017 10:03:01
0
$args = array(
    'tinymce'       => array(
        'toolbar1'      => 'negrita,cursiva,subrayado,separador,alinearizquierda,alinearcentro,alinearderecha,separador,enlace,quilarenlace,deshacer,rehacer',
        'toolbar2'      => '',
        'toolbar3'      => '',
    ),
);
wp_editor( $content, $editor_id, $args );
14 feb 2018 09:15:07