Usando el editor TinyMCE en WordPress [Guía]

Aunque es posible que no sepan su nombre, todos los que usan WordPress están familiarizados con el Editor de TinyMCE. Es el editor que usa cuando crea o edita su contenido: el que tiene los botones para crear texto en negrita, encabezados, alineación de texto, etc. Eso es lo que veremos en este post, y les mostraré como puedes agregar funcionalidad y Cómo puedes usarlo en tus plugins..

El editor se basa en un sistema de Javascript independiente de la plataforma llamado TinyMCE que se utiliza en varios proyectos en la Web. Tiene una gran API que WordPress le permite aprovechar para crear sus propios botones y agregarla a otras ubicaciones dentro de WordPress.

Agregar botones disponibles

WordPress usa algunas opciones disponibles en TinyMCE para deshabilitar botones particulares, como superíndices, subíndices y reglas horizontales, para limpiar la interfaz. Se pueden volver a añadir sin demasiados problemas..

El primer paso es crear un plugin. Eche un vistazo al códice de WordPress sobre cómo hacerlo. En pocas palabras, puedes llegar a crear una carpeta llamada 'my-mce-plugin' en la carpeta wp-content / plugins. Cree un archivo con el mismo nombre, con una extensión de PHP: my-mce-plugin.php.

Dentro de ese archivo pegue lo siguiente:

  Una vez hecho esto, deberías poder seleccionar este complemento en WordPress y activarlo. Todo el código de ahora en adelante se puede pegar dentro de este archivo..
 Así que, de vuelta a habilitando algunos botones incorporados pero ocultos. Aquí está el código que nos permite habilitar los 3 botones que mencioné:
  add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'superíndice'; $ buttons [] = 'subíndice'; $ botones [] = hr; devuelve $ botones;  
  
 Para saber qué botones se pueden agregar y cómo se llaman, consulte la lista que se encuentra en la documentación de TinyMCE para los controles..
 Creando nuestros propios botones
 ¿Qué tal crear nuestros propios botones desde cero? Muchos sitios web utilizan Prism para el resaltado de código, que utiliza un enfoque muy semántico para marcar segmentos de código. Tienes que envolver tu código dentro de  y 
 Etiquetas, algo como esto:
 $ variable = 'valor'
 Vamos a crear un botón que haga esto por nosotros.!
 Este es un proceso de tres pasos. Deberá agregar un botón, cargar un archivo javascript y escribir el contenido del archivo Javascript. Empecemos!
 Agregar el botón y cargar el archivo Javascript es bastante sencillo, aquí está el código que usé para hacerlo:
  add_filter ('mce_buttons', 'pre_code_add_button'); function pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; devuelve $ botones;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; devuelve $ plugin_array;  
 Cuando veo tutoriales sobre esto frecuentemente veo 2 problemas.
 Se olvidan de mencionar que el nombre del botón agregado en la función pre_code_add_button () debe ser el mismo que la clave para la variable $ plugin_array en la función pre_code_add_javascript (). También necesitaremos Usa la misma cadena en nuestro Javascript. mas tarde.
 Algunos tutoriales también Usa un gancho admin_head adicional para envolver todo. Si bien esto funcionará, no es obligatorio y, como el Codex no lo usa, probablemente debería evitarse..
 El siguiente paso es escribir un poco de Javascript para implementar nuestra funcionalidad. Esto es lo que solía obtener el 
 y  etiquetas de salida a la vez.
  (function () tinymce.PluginManager.add ('pre_code_button', function (editor, url) editor.addButton ('pre_code_button', texto: 'Prism', icono: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ seleccionado +'
'; editor.insertContent (content + "\ n"); ); ); ) (); 
 La mayor parte de esto depende de cómo se debe codificar un complemento de TinyMCE; puede encontrar cierta información al respecto en la documentación de TinyMCE. Por ahora, todo lo que necesitas saber es que el nombre de tu boton (Pre_code_button) Se debe utilizar en la línea 2 y 3.. El valor de "texto" en la línea 4 se mostrará si no usa un icono (veremos cómo agregar iconos en un momento).
 El método onclick dicta lo que hace este botón cuando se hace clic. Quiero usarlo para envolver el texto seleccionado dentro de la estructura HTML discutida anteriormente.
 El texto seleccionado se puede agarrar usando tinyMCE.activeEditor.selection.getContent (). Luego, envuelvo los elementos a su alrededor y los inserto, reemplazando el contenido resaltado con el nuevo elemento. También he agregado una nueva línea para que pueda comenzar a escribir fácilmente después del elemento de código.
 Si desea usar un ícono, le sugiero que seleccione uno del conjunto de Dashicons que se incluye con WordPress. La Referencia del desarrollador tiene una gran herramienta para encontrar iconos y sus CSS / HTML / Glifo. Encuentra el símbolo del código y anota el código Unicode debajo de él: f475.
 Tendremos que adjuntar una hoja de estilo a nuestro complemento y luego agregar un estilo simple para mostrar nuestro icono. En primer lugar, vamos a agregar nuestro estilo a WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); function pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Vuelva a Javascript y, junto al icono en la función addButton, reemplace “falso” con una clase que te gustaría que tuviera tu botón - usé Pre_code_button.
 Ahora cree el archivo style.css en su directorio de complementos y agregue el siguiente CSS:
  i.mce-i-pre_code_button: antes de font-family: dashicons; contenido: "\ f475";  
  
 Tenga en cuenta que el botón recibirá el mce-i- [su clase aquí] clase que puede utilizar para apuntar y agregar estilos. Especifique la fuente como dashicons y el contenido usando el valor de Unicode anterior.
 Usando TinyMCE en otro lugar
 Los complementos a menudo crean áreas de texto para ingresar texto más largo., ¿No sería genial si pudiéramos usar TinyMCE allí también? Por supuesto que podemos, y es bastante fácil. La función wp_editor () nos permite generar una en cualquier lugar en admin, así es como se ve:
 wp_editor ($ initial_content, $ element_id, $ settings);
 El primer parámetro establece el contenido inicial para el cuadro.. Esto podría usarse para cargar una opción desde la base de datos, por ejemplo. El segundo parámetro establece el ID del elemento HTML. El tercer parámetro es una matriz de ajustes. Para leer acerca de la configuración exacta que puede usar, eche un vistazo a la documentación del editor de wp.
 El escenario más importante es el textarea_name. Esto rellena el atributo de nombre del elemento textarea, lo que le permite guardar los datos fácilmente. Así es como se ve mi editor cuando se usa en una página de opciones:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 Esto es equivalente a escribir el siguiente código, lo que daría como resultado un área de texto simple:
 <?php get_option( 'buyer_bio' ) ?>
 Conclusión
 El editor TinyMCE es una forma fácil de permitir que los usuarios tengan más flexibilidad al ingresar contenido. Permite que aquellos que no quieren dar formato a su contenido simplemente lo escriban y lo terminen, y aquellos que quieren jugar con él para pasar todo el tiempo que necesiten para hacerlo bien..
 La creación de nuevos botones y funciones se puede hacer de una manera muy modular, y solo hemos arañado la superficie de las posibilidades. Si conoce un complemento de TinyMCE particularmente bueno o un caso de uso que le haya ayudado mucho, háganoslo saber en los comentarios a continuación.!