Creando una instancia de wp_editor con botones personalizados de tinyMCE
¿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,
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).

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?

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?

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?

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

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

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

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.

$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 );
