No se puede agregar el botón "código" a la barra de herramientas de TinyMCE

Pregunta:

Esto me está volviendo loca. Usando el código del códice WP, puedo agregar ALGUNOS botones a la barra TinyMCE, pero NO otros. Por ejemplo este código:

function my_mce_buttons_2($buttons) {   
    /**
     * Add in a core button that's disabled by default
     */
    $buttons[] = 'sup';
    $buttons[] = 'code';     
    $buttons[] = 'hr';
    $buttons[] = 'fullscreen';

    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Agregará los botones hr y de pantalla completa al editor, pero NO agregará el código ni el botón de superíndice al editor. ¡¿Lo que da?!

¿Algunas ideas? Estoy usando WP 3.9.1

Respuesta:

Esa es una muy buena pregunta. Acabo de probar su código localmente y veo el mismo resultado. Un poco de excavación revela un problema de dos partes.

wp-includes/class-wp-editor.php es una buena lectura para las personalizaciones de TinyMCE

WordPress 3.9 se actualizó a TinyMCE 4.0 y los documentos de TinyMCE implican que el botón de superíndice ahora se llama "superíndice" y no solo "sup". Lo mismo para "subíndice" versus "sub".

Ese cambio por sí solo hace que funcione el botón de superíndice.

function my_mce_buttons_2($buttons) {   
    /**
     * Add in a core button that's disabled by default
     */
    $buttons[] = 'superscript';
    $buttons[] = 'code';     
    $buttons[] = 'hr';
    $buttons[] = 'fullscreen';

    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Sin embargo, el botón de "código" requiere el complemento de "código" de TinyMCE que no se envía con WordPress de forma predeterminada. Por lo tanto, tendrás que descargarlo e indicarle a TinyMCE dónde encontrarlo. Extrañamente, no puedes descargar un complemento específico, así que tuve que descargar toda la biblioteca TinyMCE y buscar en los archivos extraídos para encontrar el archivo /plugins/code/plugin.min.js .

Complementos externos de TinyMCE

Para activar el botón de código, necesitaremos decirle a TinyMCE dónde encontrar este archivo. Voy a ponerlo en la carpeta raíz de mi tema porque fue lo más fácil para mí de probar para responder a su pregunta, pero no creo que sea una funcionalidad del tema y probablemente deba moverse a un complemento o un sitio específico. mu-plugin.

Dado que no está incluido en el núcleo de WordPress, el complemento de código es técnicamente un complemento externo. El filtro mce_external_plugins acepta una matriz. Hay una buena explicación de docbloc en el archivo class-wp-editor.php :

/**
 * Filter the list of TinyMCE external plugins.
 *
 * The filter takes an associative array of external plugins for
 * TinyMCE in the form 'plugin_name' => 'url'.
 *
 * The url should be absolute, and should include the js filename
 * to be loaded. For example:
 * 'myplugin' => 'http://mysite.com/wp-content/plugins/myfolder/mce_plugin.js'.
 *
 * If the external plugin adds a button, it should be added with
 * one of the 'mce_buttons' filters.
 *
 * @since 2.5.0
 *
 * @param array $external_plugins An array of external TinyMCE plugins.
 */

Ahora que sabemos a qué filtro apuntar y qué información enviar, podemos enviar a TinyMCE la información sobre nuestro archivo de complemento descargado.

/*
 * The TinyMCE "Code" button is not included with WP by default
 */
function my_mce_external_plugins($plugins) {   

    $plugins['code'] = get_stylesheet_directory_uri() . '/code/plugin.min.js';
    return $plugins;
}
add_filter('mce_external_plugins', 'my_mce_external_plugins');

Con ambas funciones ejecutándose, sé que veo los 4 botones en mi editor visual TinyMCE.

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım