Ajustes de TinyMCE 4 de WordPress 3.9+: Agregar estilos, botones, fuentes, menús desplegables y ventanas emergentes

Una de mis actualizaciones favoritas en WordPress 3.9 fue hacer el núcleo de TinyMCE versión 4.0. El nuevo TinyMCE tiene un aspecto más limpio (realmente coincide con el panel de WP) y tiene una funcionalidad añadida realmente agradable. Muchos de mis viejos temas y complementos tuvieron que actualizarse para trabajar con el nuevo TinyMCE, así que pasé un tiempo investigando la API y descubrir algunas cosas geniales. A continuación, le daré algunos ejemplos sobre cómo puede ampliar la funcionalidad de TinyMCE. No voy a guiarlo a través de todos los pasos o lo que el código significa exactamente (esto está destinado a los desarrolladores), pero le proporcionaré el código exacto que puede copiar / pegar en su tema o complemento y luego ajustar en consecuencia.


Agregar tamaño de fuente y selecciones de familia de fuentes

Por defecto, las fuentes personalizadas y los tamaños de fuente no se agregan al editor TinyMCE. La siguiente función agregará estos dos menús desplegables en el extremo izquierdo del editor en la segunda fila. Simplemente cambie donde dice “mce_buttons_2” si lo desea en una fila diferente (por ejemplo: use “mce_buttons_3” para la tercera fila).

// Habilita el tamaño de fuente y las selecciones de familia de fuentes en el editor
if (! function_exists ('wpex_mce_buttons')) {
función wpex_mce_buttons ($ botones) {
array_unshift ($ botones, 'fontselect'); // Añadir selección de fuente
array_unshift ($ botones, 'fontsizeselect'); // Agregar tamaño de fuente Seleccionar
volver $ botones;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Agregar tamaños de fuente personalizados

De forma predeterminada, los tamaños de fuente se establecen en valores pt, lo que no siempre es ideal. Prefiero usar valores de píxeles (12px, 13px, 14px, 16px..etc) y proporcionar más opciones para una mayor flexibilidad. La siguiente función alterará las opciones de tamaño de fuente predeterminadas en el selector desplegable.

// Personaliza los tamaños de fuente del editor mce
if (! function_exists ('wpex_mce_text_sizes')) {
función wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
devolver $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Agregar fuentes personalizadas

Las opciones de fuente predeterminadas en el selector de familia de fuentes son todas fuentes “seguras para la web” de manera predeterminada, pero ¿qué sucede si desea agregar más fuentes al selector? Tal vez algunas fuentes de Google? Vamos a que sea realmente fácil echar un vistazo al siguiente ejemplo.

// Añadir fuentes personalizadas a la lista de fuentes
if (! function_exists ('wpex_mce_google_fonts_array')) {
función wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = book antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = courier new, courier; Georgia = georgia, palatino; Helvetica = helvetica; Impact = impact, chicago; Symbol = symbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, mónaco; Times New Roman = times new roman, times; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
devolver $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

¿Te das cuenta de cómo agregué “Lato” a la lista en el código anterior? ¡Es así de simple! En mi tema Total WordPress, en realidad recorro cualquier fuente personalizada utilizada en el sitio como se define en el panel de temas y la agrego al cuadro de selección para que también estén disponibles mientras edito sus publicaciones / páginas (dulce). Pero el código SOLO publicita la familia de fuentes en el menú desplegable, no cargará mágicamente el script para que cuando cambie su texto en el editor pueda ver esa fuente personalizada aplicada … Eso es lo que hace el código a continuación!

// Agrega Google Scripts para usar con el editor
if (! function_exists ('wpex_mce_google_fonts_styles')) {
función wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

Habilite el menú desplegable Formatos (estilos) y agregue nuevos estilos

¿Recuerdas el menú desplegable “Estilos” en WP 3.8? ¡Eso fue genial! Puede usarlo para agregar algunas clases geniales para usar dentro del editor de publicaciones (lo uso en WPExplorer en realidad para botones, tramos de colores, cuadros, etc.). En WP 3.9 todavía puede agregar estilos, sin embargo, se ha renombrado en el nuevo TinyMCE 4.0 a “Formatos”, por lo que funciona un poco diferente. A continuación se muestra un ejemplo de cómo habilitar el menú desplegable Formatos y también agregarle algunos elementos nuevos..

Menú desplegable de formatos de WordPress TInyMCE

Habilite el menú desplegable de formatos

En realidad, esto se hace de la misma manera antes de WP 3.9, pero lo comparto en caso de que no supiera cómo hacerlo.

// Agregar menú desplegable de formatos a MCE
if (! function_exists ('wpex_style_select')) {
función wpex_style_select ($ botones) {
array_push ($ botones, 'styleselect');
volver $ botones;
}
}
add_filter ('botones_mce', 'wpex_style_select');

Agregar nuevos elementos a los formatos

Agregar nuevos elementos es súper fácil. Observe cómo agregué “$ settings [‘ style_formats_merge ’] = true;” con el código a continuación, esto asegura que sus ediciones se agreguen al menú desplegable de formatos junto con cualquier otra; no sobrescriba todo (tal vez otros complementos también quieran usarlo).

// Agregue nuevos estilos al menú desplegable de "formatos" de TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
función wpex_styles_dropdown ($ configuración) {

// Crea una matriz de nuevos estilos
$ new_styles = array (
formación(
'title' => __ ('Estilos personalizados', 'wpex'),
'items' => array (
formación(
'title' => __ ('Botón de tema', 'wpex'),
'selector' => 'a',
'classes' => 'theme-button'
),
formación(
'title' => __ ('Highlight', 'wpex'),
'inline' => 'span',
'classes' => 'text-highlight',
),
),
),
);

// Combina estilos antiguos y nuevos
$ settings ['style_formats_merge'] = verdadero;

// Añadir nuevos estilos
$ settings ['style_formats'] = json_encode ($ new_styles);

// Devolver nueva configuración
devolver $ settings;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Agregar un botón MCE simple

Agregar un nuevo botón al editor TinyMCE es especialmente útil para los códigos cortos, ya que como usuario no tiene que recordar ningún código corto, simplemente puede hacer clic en un botón y lo inserta. No estoy diciendo que agregue cientos de botones al TinyMCE para todos sus códigos cortos (odio cuando los desarrolladores hacen esto, es una mala práctica y se ve horrible) pero si agrega 1 o unos pocos, lo dejaré pasar �� Si desea agregar un grupo, entonces debe crear un submenú como se explica en la sección que sigue.

WordPress MCE Nuevo botón

Código PHP: declara el nuevo complemento MCE en WP

Este código declarará su nuevo complemento MCE, asegúrese de cambiar la ubicación del archivo javascript “mce-button.js” para que coincida con la ubicación de su archivo (para lo cual también le daré el código en la siguiente subsección) como obviamente renombra el prefijo “my” a algo más único!

// Engancha tus funciones en los filtros correctos
función my_add_mce_button () {
// verifica los permisos de usuario
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
regreso;
}
// verifica si WYSIWYG está habilitado
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// Declarar script para nuevo botón
función my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Registrar nuevo botón en el editor
function my_register_mce_button ($ botones) {
array_push ($ botones, 'my_mce_button');
volver $ botones;
}

Código JS: agregue el botón al MCE

Este código js va en el archivo js registrado en el fragmento anterior en la función “symple_shortcodes_add_tinymce_plugin”. Esto debería agregar un nuevo botón de texto que dice “Nuevo botón” en su editor y cuando se hace clic se insertará el texto “¡WPExplorer.com es increíble!” (por supuesto).

(función () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
texto: 'Nuevo botón',
icono: falso,
onclick: function () {
editor.insertContent ('¡WPExplorer.com es increíble!');
}
});
});
}) ();

Agregue un icono personalizado a su nuevo botón MCE

Arriba te mostré cómo agregar un nuevo botón que se mostrará como “Nuevo botón” en el editor, esto es un poco aburrido … Entonces, el código alterado te mostrará cómo agregar tu propio icono personalizado.

Cargue una hoja de estilo con su CSS

Use esta función para cargar una nueva hoja de estilo para usar en su panel de administración; algunos complementos / temas ya podrían estar agregando una hoja de estilo, por lo que si su tema / complemento está haciendo eso, omita esto y solo agregue su CSS personalizado y modifique el js (que se muestra a continuación).

function my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

Tu CSS personalizado

Este es el CSS para agregar la hoja de estilo cargada previamente.

i.my-mce-icon {
background-image: url ('SU ICONO URL');
}

Ajusta tu Javascript

Ahora simplemente modifique el javascript que agregó anteriormente para eliminar el parámetro de texto y, en lugar de configurar el icono en falso, asígnele un nombre de clase personalizado.

(función () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
icono: 'my-mce-icon',
onclick: function () {
editor.insertContent ('¡WPExplorer.com es increíble!');
}
});
});
}) ();

Agregar un botón con submenú

Submenú del botón MCE

Anteriormente mencioné que agregar una tonelada de nuevos íconos a la barra de TinyMCE es una mala idea (y lo es), así que revise el código a continuación para ver cómo puede editar el javascript para mostrar un submenú para su botón personalizado. Si quieres verlo en acción, mira mi Symple Shortcodes Video.

(función () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
texto: 'Muestra desplegable',
icono: falso,
tipo: 'menubutton',
menú: [
{
texto: 'Elemento 1',
menú: [
{
texto: 'Sub Item 1',
onclick: function () {
editor.insertContent ('¡WPExplorer.com es increíble!');
}
},
{
texto: 'Sub Item 2',
onclick: function () {
editor.insertContent ('¡WPExplorer.com es increíble!');
}
}
]
},
{
texto: 'Artículo 2',
menú: [
{
texto: 'Sub Item 1',
onclick: function () {
editor.insertContent ('¡WPExplorer.com es increíble!');
}
},
{
texto: 'Sub Item 2',
onclick: function () {
editor.insertContent ('¡WPExplorer.com es increíble!');
}
}
]
}
]
});
});
}) ();

Agregar una ventana emergente a su botón al hacer clic

En el ejemplo anterior, puede notar que cada botón simplemente inserta el texto “¡WPExplorer.com es increíble!” lo cual es genial, pero ¿qué pasa con la creación de una ventana emergente donde un usuario puede alterar lo que se inserta en el texto? ¡Eso sí que sería dulce! Y es algo que he agregado a la versión 1.6 de mi Symple Shortcodes, lo que hace que el complemento sea mucho más fácil de usar.

Ventana emergente de WordPress MCE

(función () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
texto: 'Muestra desplegable',
icono: falso,
tipo: 'menubutton',
menú: [
{
texto: 'Elemento 1',
menú: [
{
texto: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
título: 'Insertar código corto aleatorio',
cuerpo: [
{
tipo: 'cuadro de texto',
nombre: 'textboxName',
etiqueta: 'Cuadro de texto',
valor: '30'
},
{
tipo: 'cuadro de texto',
nombre: 'multilineName',
etiqueta: 'Cuadro de texto multilínea',
valor: 'Puedes decir muchas cosas aquí',
multilínea: cierto,
minWidth: 300,
Altura mínima: 100
},
{
tipo: 'listbox',
nombre: 'listboxName',
etiqueta: 'Cuadro de lista',
'valores': [
{texto: 'Opción 1', valor: '1'},
{texto: 'Opción 2', valor: '2'},
{texto: 'Opción 3', valor: '3'}
]
}
],
onsubmit: función (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Esto es genial … Ahora qué?

¡Buena pregunta! Ahora es el momento para que tomes estos increíbles ajustes y crees algo épico o actualices tus complementos / temas para que sean compatibles con el nuevo TinyMCE en WordPress 3.9. Déjame saber qué piensas en los comentarios a continuación!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map