Ajustes de WordPress 3.9+ TinyMCE 4: estilos, botones, fuentes

Ajustes de WordPress 3.9+ TinyMCE 4: estilos, botones, fuentes

Una de mis actualizaciones favoritas en WordPress 3.9 fue la creación del kernel TinyMCE versión 4.0. El nuevo TinyMCE tiene un aspecto más limpio (realmente coincide con el tablero de WP) y tiene algunas características adicionales realmente agradables. Muchos de mis viejos temas y complementos tuvieron que actualizarse para que funcionen con el nuevo TinyMCE, así que pasé un tiempo investigando. API y encontrar cosas interesantes. A continuación, le daré algunos ejemplos sobre cómo puede ampliar la funcionalidad de TinyMCE. No voy a guiarte a través de todos los pasos o lo que el código significa exactamente (esto es para desarrolladores) pero te proporcionaré el código exacto que puedes copiar / pegar en tu tema o complemento y luego ajustar en consecuencia.

Adición de selecciones de tamaño de fuente y familias de fuentes

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

// Enable font size & font family selects in the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
	}
}
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 de pt, lo que no siempre es ideal. Prefiero usar valores de píxeles (12px, 13px, 14px, 16px, etc.) y proporcionar más opciones para la flexibilidad de la escofina. La función a continuación cambiará las opciones de tamaño de fuente predeterminadas en el selector desplegable.

// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Agregar fuentes personalizadas

Las opciones de fuentes predeterminadas en el selector de familias de fuentes son todas fuentes “seguras para la Web” de forma predeterminada, pero ¿qué sucede si desea agregar más fuentes al selector? ¿Quizás Google Fonts? Muy fácilmente veremos el ejemplo a continuación.

// Add custom Fonts to the Fonts list
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function 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,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

¿Observa cómo agregué “Lato” a la lista en el código anterior? ¡Es así de simple! En mi tema de Total WordPress, en realidad hago un bucle de todas las fuentes personalizadas utilizadas en el sitio como se define en el panel del tema y las agrego al cuadro de selección para que también estén disponibles al editar sus publicaciones / páginas (suave). Pero el código SÓLO anuncia la familia de fuentes en la lista desplegable, no cargará mágicamente el script para que cuando edites tu texto en el editor, puedas ver esa fuente personalizada aplicada.

// Add Google Scripts for use with the editor
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
	function 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' );

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

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

Menú desplegable para formatos WordPress TInyMCE

Activar el menú desplegable Formatos

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

// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
	function wpex_style_select( $buttons ) {
		array_push( $buttons, 'styleselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons', 'wpex_style_select' );

Agregar nuevos elementos a los formatos

Agregar nuevos elementos es muy fácil. Tenga en cuenta cómo agregué “$ settings[‘style_formats_merge’] = verdadero; En el siguiente código, esto garantiza que sus cambios se agreguen al menú desplegable de formatos junto con todos los demás; no sobrescriba todo (tal vez otros complementos también quieran usarlo).

// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of new styles
		$new_styles = array(
			array(
				'title'	=> __( 'Custom Styles', 'wpex' ),
				'items'	=> array(
					array(
						'title'		=> __('Theme Button','wpex'),
						'selector'	=> 'a',
						'classes'	=> 'theme-button'
					),
					array(
						'title'		=> __('Highlight','wpex'),
						'inline'	=> 'span',
						'classes'	=> 'text-highlight',
					),
				),
			),
		);

		// Merge old & new styles
		$settings['style_formats_merge'] = true;

		// Add new styles
		$settings['style_formats'] = json_encode( $new_styles );

		// Return New Settings
		return $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, porque como usuario no tiene que recordar los códigos cortos, simplemente puede hacer clic en un botón y lo insertará. No estoy diciendo que agregue cientos de botones a TinyMCE para todos sus códigos cortos (odio cuando los desarrolladores hacen eso, es una mala práctica y se ve horrible) pero si agrega 1 o algunos -a, lo dejaré pasar 😉 Si desea agregar un grupo, debe crear un submenú como se explica en la siguiente sección.

Nuevo botón de WordPress MCE

Código PHP: declare 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 sección siguiente) como obviamente cambiar el nombre del prefijo “mi” a algo más único.

// Hooks your functions into the correct filters
function my_add_mce_button() {
	// check user permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// check if WYSIWYG is enabled
	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');

// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
	$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
	return $plugin_array;
}

// Register new button in the editor
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'my_mce_button' );
	return $buttons;
}

Código JS: botón Agregar a MCE

Este código js va en el archivo js guardado 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 hace clic en él, el texto “¡WPExplorer.com es increíble! (claro).

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton('my_mce_button', {
			text: 'New Button',
			icon: false,
			onclick: function() {
				editor.insertContent('WPExplorer.com is awesome!');
			}
		});
	});
})();

Agregue un icono personalizado a su nuevo botón MCE

Arriba le mostré cómo agregar un nuevo botón que se mostrará como “Nuevo botón” en el editor, es un poco escaso … Entonces, el código modificado le mostrará cómo agregar su propio ícono 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 pueden agregar una hoja de estilo, por lo que si su tema / complemento lo hace, ignórelo y simplemente agregue su CSS personalizado y ajuste el js (ver más abajo).

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('YOUR ICON URL');
}

Ajusta tu JavaScript

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

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			icon: 'my-mce-icon',
			onclick: function() {
				editor.insertContent('WPExplorer.com is awesome!');
			}
		});
	});
})();

Agregar un botón con un submenú

Submenú del botón MCE

Anteriormente mencioné que agregar una tonelada de nuevos íconos a la barra TinyMCE es una mala idea (y lo es), así que revise el código a continuación para ver cómo puede modificar el javascript. Si quieres verlo en acción, echa un vistazo a mi Video de códigos cortos de Symple.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'Sample Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						}
					]
				},
				{
					text: 'Item 2',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						}
					]
				}
			]
		});
	});
})();

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 editar lo que se inserta en el texto? ¡Eso sería bueno! Y esto es algo que agregué a la versión 1.6 de mis códigos cortos de Symple, lo que hace que el complemento sea mucho más fácil de usar.

Ventana emergente de WordPress MCE

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'Sample Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Pop-Up',
							onclick: function() {
								editor.windowManager.open( {
									title: 'Insert Random Shortcode',
									body: [
										{
											type: 'textbox',
											name: 'textboxName',
											label: 'Text Box',
											value: '30'
										},
										{
											type: 'textbox',
											name: 'multilineName',
											label: 'Multiline Text Box',
											value: 'You can say a lot of stuff in here',
											multiline: true,
											minWidth: 300,
											minHeight: 100
										},
										{
											type: 'listbox',
											name: 'listboxName',
											label: 'List Box',
											'values': [
												{text: 'Option 1', value: '1'},
												{text: 'Option 2', value: '2'},
												{text: 'Option 3', value: '3'}
											]
										}
									],
									onsubmit: function( e ) {
										editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
									}
								});
							}
						}
					]
				}
			]
		});
	});
})();

Es genial … ¿y ahora qué?

¡Buena pregunta! Ahora es el momento de hacer esos increíbles ajustes y crear algo épico o actualizar sus complementos / temas para que sean compatibles con el nuevo TinyMCE en WordPress 3.9. ¡Déjame saber lo que tienes en los comentarios a continuación!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba