Estaba pensando en una de mis actualizaciones favoritas en WordPress 3.9, haciendo que el maniquí TinyMCE sea un núcleo 4.zero. El nuevo modelo TinyMCE parece ser visualmente más limpio (realmente se ajusta al tablero de WP) y tiene una eficiencia adicional muy buena. Muchos de mis temas y complementos obsoletos querían actualizarse para funcionar con el nuevo modelo TinyMCE, así que pasé un tiempo buscando la API y descubriendo algunas cosas interesantes. A continuación, le daré algunos ejemplos de cómo extender la eficiencia del TinyMCE. No voy a guiarlo a través de todos los pasos o lo que significa exactamente el código (que está destinado a los constructores), pero aún obtiene el código exacto que copia / pega en su tema o complemento y luego personaliza en consecuencia.

Junto con Font Dimension y Font Family Select

De forma predeterminada, las fuentes personalizadas y los tamaños de fuente no se agregan al editor TinyMCE. La función a continuación agrega cada uno de estos menús desplegables a la segunda línea en el extremo izquierdo del editor. Simplemente cambie donde dice ‘mce_buttons_2’ para asegurarse de que lo tiene en una línea específica (por ejemplo, use ‘mce_buttons_3’ para la tercera línea).

// Enable font measurement & font family selects inside 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 Dimension Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

Junto con tamaños de fuente personalizados

De forma predeterminada, los tamaños de fuente se establecen en valores de pt, lo que no siempre es sobresaliente. Prefiero usar valores de píxeles (12px, 13px, 14px, 16px, etc.) y ofrecer más opciones para una mayor flexibilidad. La función a continuación cambia las decisiones de medición de fuente predeterminadas dentro de la selección desplegable.

// Customise 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' );

Junto con fuentes personalizadas

Las opciones de fuentes predeterminadas dentro del selector de familias de fuentes son todas fuentes «seguras para la Web» de forma predeterminada, pero ¿qué deseaba en la ocasión para agregar más fuentes al selector? ¿Quizás algunas fuentes de Google? Lo veremos fácilmente en la ocasión a continuación.

// Add custom-made Fonts to the Fonts document
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function wpex_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,events;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;E-book Antiqua=e e book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impression=affect,chicago;Picture=picture;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Events New Roman=events new roman,events;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' );

¿Puedes averiguar cómo agregué «Lato» al documento en el código anterior? ¡Tan simple como eso! En mi tema completo de WordPress, de hecho hago un bucle de todas las fuentes personalizadas que se usan para la situación como se describe en el área temática y las agrego a la disciplina elegida para que también estén disponibles a medida que mejora sus publicaciones / páginas (lindo). Dicho esto, el código SÓLO muestra la familia de fuentes en el menú desplegable que compró y no carga mágicamente el script, por lo que si cambia su contenido textual en el editor, verá que se está utilizando esta fuente a medida. .. el código de abajo lo hace!

// 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' );

Habilite el menú desplegable Códecs (Clasificaciones) y agregue nuevas clasificaciones

¿Está mirando el menú desplegable Variedades en WP 3.8? ¡Eso fue genial! Posiblemente lo usaría para agregar algunos programas interesantes incluidos en el editor de envío (para WPSaviour, de hecho, lo aplico a botones, áreas coloreadas, contenedores, etc.). Seguiremos agregando ordenación en WP 3.9, pero dentro del nuevo TinyMCE 4.zero se le ha cambiado el nombre a «Códecs» para que en realidad funcione un poco completamente diferente. Debajo de eso, puede aprender cómo permitir el menú desplegable Códecs y también agregar algunos elementos nuevos.

Menú desplegable para formatos WordPress TInyMCE

Habilite el menú desplegable Códec

En realidad, esto se logró utilizando una metodología idéntica antes de WP 3.9, pero la compartiré en caso de que no supieras cómo hacerlo.

// Add Codecs 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 objetos a los códecs

Junto con los nuevos objetos, lo grande es fácil. Descubra cómo agregué «$ settings»[‘style_formats_merge’] = true; ”en el código a continuación, esto asegura que sus cambios se agreguen al menú desplegable Códecs junto con todo lo demás; no sobrescriba todo el problema (probablemente complementos completamente diferentes deben usarlo correctamente).

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

		// Create array of newest sorts
		$new_styles = array(
			array(
				'title'	=> __( 'Custom-made Sorts', 'wpex' ),
				'objects'	=> array(
					array(
						'title'		=> __('Theme Button','wpex'),
						'selector'	=> 'a',
						'programs'	=> 'theme-button'
					),
					array(
						'title'		=> __('Highlight','wpex'),
						'inline'	=> 'span',
						'programs'	=> 'text-highlight',
					),
				),
			),
		);

		// Merge outdated & new sorts
		$settings['style_formats_merge'] = true;

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

		// Return New Settings
		return $settings;

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

Junto con un sencillo botón MCE

Junto con un nuevo botón, el editor TinyMCE es particularmente útil para códigos cortos, ya que usted, como cliente, no tiene que memorizar ningún código corto, simplemente haga clic en un botón e insértelo. No estoy diciendo que agregue cientos de botones al TinyMCE para todos sus códigos cortos (odio cuando los constructores prueban esto, es tan dañino y parece terrible). dejar que se transfiera? Si desea agregar un grupo, lo mejor que puede hacer es crear un submenú como se describe en la siguiente mitad.

Botón nuevo de WordPress MCE

Código PHP: declare el modelo como un nuevo complemento MCE en WP

Este código declarará su nuevo complemento MCE. Es mejor cambiar positivamente el estado del archivo Javascript «mce-button.js» para que corresponda con el estado de su archivo (para lo cual presento el código a continuación como la subsección correcta) junto con el prefijo «my» de forma única ¡cambie el nombre para obtener al menos un factor distintivo más!

// Hooks your options into the fitting filters
function my_add_mce_button() {
	// confirm client permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// confirm 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 model 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 inside the editor
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'my_mce_button' );
	return $buttons;
}

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

Este código js va al archivo js, ​​que está registrado en el fragmento anterior en la función «symple_shortcodes_add_tinymce_plugin». Esto podría agregar un modelo de botón de contenido de texto nuevo a su editor que dice «Botón Nuevo» y al hacer clic en él se inserta el contenido de texto «¡WPSaviour.com es superior!» (definitivamente).

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton('my_mce_button', {
			textual content material: 'New Button',
			icon: false,
			onclick: function() {
				editor.insertContent('WPSaviour.com is superior!');
			}
		});
	});
})();

Agregue un icono personalizado a su nuevo botón MCE

Arriba, he confirmado que está aprendiendo la forma de agregar un nuevo modelo que se mostrará como un «Botón nuevo» en el editor. Esto generalmente es un poco tonto … Por lo que el código modificado lo guiará para agregar su ícono privado personalizado.

Cargue una hoja de estilo junto con su CSS

Utilice esta función para cargar un modelo de hoja de estilo nueva para usar en su panel de administración; es posible que algunos complementos / temas ya vengan con una hoja de estilo. En caso de que su tema / complemento lo haga, omita esto y simplemente agregue su CSS personalizado y modifique el js (confirmado 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 a medida

Ese es el CSS para agregar la hoja de estilo que se cargó previamente.

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

Optimiza tu Javascript

Ahora simplemente ajuste el javascript que agregó anteriormente para eliminar el parámetro de contenido de texto y, en lugar de establecer 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('WPSaviour.com is superior!');
			}
		});
	});
})();

Junto con un botón con un submenú

Submenú del botón MCE

Mencioné anteriormente que esto, junto con una tonelada de nuevos íconos en la barra TinyMCE, es una idea perezosa (y lo es), así que pruebe el código a continuación para ver cómo puede editar el javascript para crear un submenú de visualización en su botón personalizado. En caso de que quieras verlo en movimiento, prueba mi video de códigos cortos de Symple.

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

Junto con una ventana emergente, haga clic en su botón

En la ocasión anterior, probablemente encontrará que cada botón simplemente inserta el texto «¡WPSaviour.com es superior!» eso es genial, pero ¿qué tal una ventana emergente que un cliente puede usar para cambiar lo que se incluye en el material de contenido textual? Bueno, ¿qué puede ser lindo? Y es un factor que agregué a Mannequin 1.6 de mis códigos cortos de Symple para hacer 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', {
			textual content material: 'Sample Dropdown',
			icon: false,
			variety: '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 + '"]');
									}
								});
							}
						}
					]
				}
			]
		});
	});
})();