{"id":31073,"date":"2020-01-31T07:13:39","date_gmt":"2020-01-31T15:13:39","guid":{"rendered":"https:\/\/kinsta.com\/?p=8208"},"modified":"2025-02-18T10:49:02","modified_gmt":"2025-02-18T09:49:02","slug":"editor-wordpress-tinymce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/","title":{"rendered":"Diseccionando el editor de WordPress TinyMCE"},"content":{"rendered":"<p>Esta es la segunda parte de dos art\u00edculos dedicados a los editores de WordPress. El primer art\u00edculo fue dedicado \u00edntegramente al editor de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-editor-de-texto\/\">texto de WordPress<\/a>, mientras que en este art\u00edculo diseccionaremos el editor TinyMCE de WordPress, y lo haremos a nuestra manera. Sigue leyendo a continuaci\u00f3n, ya que te mostraremos c\u00f3mo hacerlo:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"#custom_styles\"> A\u00f1adir estilos personalizados al editor de WordPress TinyMCE <\/a><\/li>\n<li><a href=\"#hidden_buttons\"> Activar los botones ocultos <\/a><\/li>\n<li><a href=\"#existing_plugins\"> Mejorar el editor de WordPress TinyMCE con los plugins existentes <\/a><\/li>\n<li><a href=\"#custom_plugins\"> Desarrollar plugins personalizados de WordPress TinyMCE <\/a><\/li>\n<li><a href=\"#tinymce_advanced\"> Usa un plugin gratuito de WordPress para a\u00f1adir estilos y botones a TinyMCE<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_8220\" aria-describedby=\"caption-attachment-8220\" style=\"width: 649px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8220 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/tinymce-1.png\" alt=\"WordPress TinyMCE\" width=\"649\" height=\"234\"><figcaption id=\"caption-attachment-8220\" class=\"wp-caption-text\">TinyMCE es un editor WYSIWYG basado en un navegador escrito en JavaScript y publicado como software de c\u00f3digo abierto bajo <a href=\"https:\/\/en.wikipedia.org\/wiki\/LGPL\">LGPL<\/a><\/figcaption><\/figure>\n<h2>Editor de WordPress TinyMCE<\/h2>\n<p><strong>Actualizaci\u00f3n<\/strong>: WordPress 5.0 cambiar\u00e1 la forma en que escribimos y publicamos los contenidos. Aseg\u00farate de echar un vistazo a nuestra gu\u00eda: <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-0\/\">\u00bfQu\u00e9 hay de nuevo en WordPress 5.0 (C\u00f3mo prepararse para Gutenberg)<\/a><\/p>\n<p>Por defecto, WordPress, el editor de <a href=\"https:\/\/www.tinymce.com\/\">TinyMCE,<\/a> proporciona dos filas de botones para crear, editar y dar formato al contenido de los mensajes. La primera fila (la barra de herramientas principal) incluye funciones de estilo y formato. Los controles adicionales permiten a\u00f1adir, editar y eliminar anclas, a\u00f1adir la etiqueta <!--more--><\/p>\n<p>activar el modo libre de distracci\u00f3n. Todos estos botones deben parecer bastante familiares a cualquiera con conocimientos b\u00e1sicos de un procesador de textos.<\/p>\n<p>El bot\u00f3n Alternar barra de herramientas cambia la barra de herramientas del editor avanzado (la segunda fila de botones), que proporciona un men\u00fa desplegable de elementos de texto (p\u00e1rrafo, encabezados y texto preformateado), m\u00e1s controles de estilo y algunas funciones adicionales (Pegar como texto, Borrar formato, Caracteres especiales, Deshacer y Rehacer) que son \u00fatiles de muchas maneras distintas.<\/p>\n<figure id=\"attachment_8214\" aria-describedby=\"caption-attachment-8214\" style=\"width: 684px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8214 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/personajes-especiales .png\" alt=\"Personajes especiales \" width=\"684\" height=\"379\"><figcaption id=\"caption-attachment-8214\" class=\"wp-caption-text\">La tabla de caracteres especiales permite a los usuarios a\u00f1adir r\u00e1pidamente entidades HTML<\/figcaption><\/figure>\n<p>Por \u00faltimo, el bot\u00f3n de signo de interrogaci\u00f3n ofrece una lista de atajos de teclado que mejoran la experiencia de escritura del usuario.<\/p>\n<figure id=\"attachment_8213\" aria-describedby=\"caption-attachment-8213\" style=\"width: 564px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8213 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/12\/shortcuts.png\" alt=\"atajos\" width=\"564\" height=\"481\" data-must_clone=\"true\"><figcaption id=\"caption-attachment-8213\" class=\"wp-caption-text\">El panel de atajos de TinyMCE<\/figcaption><\/figure>\n<p>Ahora agrega y estiliza tu contenido en el editor visual, y luego cambia al editor de texto. Encontrar\u00e1s la estructura HTML correspondiente, ya que WordPress conservar\u00e1 tu entrada al pasar del modo visual al modo de texto.<\/p>\n<p>Las barras de herramientas primarias y avanzadas predeterminadas proporcionan un buen n\u00famero de funcionalidades que pueden ampliarse con botones y controles adicionales. Muchos de estos botones est\u00e1n disponibles fuera de la caja en TinyMCE, y solo necesitamos activarlos para ponerlos en acci\u00f3n. Adem\u00e1s, podemos a\u00f1adir un buen n\u00famero de funcionalidades avanzadas instalando uno o m\u00e1s de los plugins existentes.<\/p>\n<p>Y si todos estos botones no son suficientes, podemos mejorar el editor con sus funcionalidades m\u00e1s geniales, desarrollando plugins personalizados.<\/p>\n<p>Dicho esto, empecemos a sumergirnos en el tema desde el uso m\u00e1s f\u00e1cil y com\u00fan de la API.<\/p>\n<h2 id=\"custom_styles\">A\u00f1adir Estilos Personalizados al Editor de WordPress TinyMCE<\/h2>\n<p>Supongamos que necesitas proporcionar una forma f\u00e1cil de a\u00f1adir estilos personalizados en el contenido de los mensajes de TinyMCE. Es un procedimiento de dos pasos:<\/p>\n<ul>\n<li>primero, necesitamos activar un men\u00fa desplegable oculto llamado Styleselect;<\/li>\n<li>despu\u00e9s tenemos que definir cada estilo que queremos a\u00f1adir al men\u00fa de selecci\u00f3n de estilos.<\/li>\n<\/ul>\n<p>Podemos hacer la primera tarea filtrando la serie de botones de TinyMCE. La barra de herramientas por defecto muestra una o dos filas de botones, pero podemos habilitar hasta cuatro filas de la barra de herramientas gracias a <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Filter_Reference\/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4\">los siguientes filtros<\/a>:<\/p>\n<ul>\n<li><strong>mce_buttons<\/strong> filtra los botones primarios de la barra de herramientas (la primera fila), que siempre est\u00e1 visible;<\/li>\n<li><strong>mce_buttons_2<\/strong> filtra los botones avanzados de la barra de herramientas (la segunda fila), que pueden ser activados o desactivados por el usuario;<\/li>\n<li><strong>mce_buttons_3 inactivo<\/strong> por defecto;<\/li>\n<li><strong>mce_buttons_4 inactivo<\/strong> por defecto.<\/li>\n<\/ul>\n<p>Podemos a\u00f1adir una funci\u00f3n de devoluci\u00f3n de llamada a uno de estos filtros para mostrar\/ocultar los botones existentes, como el men\u00fa desplegable de Selecci\u00f3n de estilo. La siguiente funci\u00f3n activa el men\u00fa de la segunda fila:<\/p>\n<pre><code class=\"language-php\">function my_mce_buttons_2( $buttons ) {\n\tarray_unshift( $buttons, 'styleselect' );\n\treturn $buttons;\n}\nadd_filter( 'mce_buttons_2', 'my_mce_buttons_2' );\n<\/code><\/pre>\n<p>La funci\u00f3n PHP <a href=\"http:\/\/php.net\/manual\/en\/function.array-unshift.php\">array_unshift<\/a> preinstala el elemento de selecci\u00f3n de estilo al frente de la matriz <strong>$buttons<\/strong>.<\/p>\n<figure id=\"attachment_8217\" aria-describedby=\"caption-attachment-8217\" style=\"width: 652px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8217 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/styleselect.png\" alt=\"styleselect\" width=\"652\" height=\"454\"><figcaption id=\"caption-attachment-8217\" class=\"wp-caption-text\">El men\u00fa desplegable Formato mostrar\u00e1 una lista de todos los estilos CSS disponibles<\/figcaption><\/figure>\n<p>Ahora que el bot\u00f3n ha sido activado, podemos registrar nuestros estilos personalizados filtrando una serie de par\u00e1metros de configuraci\u00f3n de TinyMCE a trav\u00e9s del filtro<strong> tiny_mce_before_init<\/strong>.<br \/>\nConsidera la siguiente funci\u00f3n:<\/p>\n<pre><code class=\"language-php\">function my_tiny_mce_before_init( $mceInit ) {\n\t$style_formats = array(\n\t\tarray(\n\t\t\t'title' =&gt; 'PHP',\n\t\t\t'block' =&gt; 'code',\n\t\t\t'classes' =&gt; 'language-php'\n\t\t)\t\n\t);\n\t$mceInit['style_formats'] = json_encode( $style_formats );\t\n\treturn $mceInit;    \n}\nadd_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );\n<\/code><\/pre>\n<p>El elemento <strong>style_formats<\/strong> es un conjunto de elementos codificados en JSON. Cada elemento establece los par\u00e1metros de configuraci\u00f3n de un solo elemento del men\u00fa. La funci\u00f3n anterior sustituye los estilos por defecto por un \u00fanico elemento personalizado que envuelve el texto seleccionado en un elemento <strong>code.language-php<\/strong>.<\/p>\n<figure id=\"attachment_8216\" aria-describedby=\"caption-attachment-8216\" style=\"width: 653px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8216 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/formatos-estilo.png\" alt=\"formatos de estilo\" width=\"653\" height=\"256\"><figcaption id=\"caption-attachment-8216\" class=\"wp-caption-text\">El men\u00fa desplegable de Selecci\u00f3n de estilo que contiene un solo elemento personalizado<\/figcaption><\/figure>\n<p>En nuestro ejemplo, establecimos tres propiedades para un solo elemento del men\u00fa:<\/p>\n<ul>\n<li><strong>t\u00edtulo<\/strong>: el t\u00edtulo del elemento del men\u00fa;<\/li>\n<li><strong>bloque<\/strong>: el elemento de bloque a producir;<\/li>\n<li><strong>clases<\/strong>: lista separada por espacios de las clases CSS para aplicar a la selecci\u00f3n.<\/li>\n<\/ul>\n<p>A\u00f1adimos el elemento de <strong>c\u00f3digo<\/strong> como bloque, para que se aplique solo una vez a la selecci\u00f3n completa. A\u00f1adi\u00e9ndolo como elemento<strong> en l\u00ednea <\/strong>se aplicar\u00eda la etiqueta de c\u00f3digo a cada l\u00ednea seleccionada.<\/p>\n<p>Podemos agregar m\u00e1s art\u00edculos y agruparlos por categor\u00eda, como muestra el siguiente ejemplo:<\/p>\n<pre><code class=\"language-php\">function my_tiny_mce_before_init( $mceInit ) {\n\t$style_formats = array(\n\t\tarray(\n\t\t\t'title' =&gt; 'Code language',\n\t\t\t'items' =&gt; array(\n\t\t\t\tarray(\n\t\t\t\t\t'title' =&gt; 'PHP',\n\t\t\t\t\t'block' =&gt; 'code',\n\t\t\t\t\t'classes' =&gt; 'language-php'\n\t\t\t\t),\n\t\t\t\tarray(\n\t\t\t\t\t'title' =&gt; 'CSS',\n\t\t\t\t\t'block' =&gt; 'code',\n\t\t\t\t\t'classes' =&gt; 'language-css'\n\t\t\t\t),\n\t\t\t\tarray(\n\t\t\t\t\t'title' =&gt; 'HTML',\n\t\t\t\t\t'block' =&gt; 'code',\n\t\t\t\t\t'classes' =&gt; 'language-html'\n\t\t\t\t)\n\t\t\t)\n\t\t)\t\n\t);\n\n\t$mceInit['style_formats'] = json_encode( $style_formats );\n\t\n\treturn $mceInit;    \n}\nadd_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );\n<\/code><\/pre>\n<p>El elemento<strong> style_formats<\/strong> es un conjunto multidimensional de par\u00e1metros. En este ejemplo, hemos a\u00f1adido un elemento de primer nivel (Lenguaje de c\u00f3digo) y tres sub elementos (PHP, CSS, HTML). La imagen de abajo muestra el men\u00fa resultante.<\/p>\n<figure id=\"attachment_8215\" aria-describedby=\"caption-attachment-8215\" style=\"width: 652px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8215 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/formatos-estilo-avanzado.png\" alt=\"formatos de estilo avanzado\" width=\"652\" height=\"225\"><figcaption id=\"caption-attachment-8215\" class=\"wp-caption-text\">Podemos agrupar los elementos del men\u00fa y reducir el tama\u00f1o del men\u00fa en la pantalla<\/figcaption><\/figure>\n<p>TinyMCE aplica los estilos a los elementos seleccionados, pero no es consciente de estos estilos, por lo que no se aplicar\u00e1n al contenido en el editor. Si se necesita una vista previa en tiempo real, tendremos que registrar una hoja de estilo personalizada con la funci\u00f3n <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_editor_style\/\">add_editor_style()<\/a>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Registers an editor stylesheet for a custom theme.\n *\/\nfunction my_theme_add_editor_styles() {\n\tadd_editor_style( 'css\/my-editor-style.css' );\n}\nadd_action( 'admin_init', 'my_theme_add_editor_styles' );\n<\/code><\/pre>\n<p>Esta funci\u00f3n registra una hoja de estilo que ser\u00e1 utilizada por el WordPress TinyMCE para estilizar el contenido en el editor.<br \/>\nComo ejemplo, supongamos que quisi\u00e9ramos aplicar diferentes colores al c\u00f3digo PHP, CSS y HTML. Para llevar a cabo esta tarea, a\u00f1adiremos las siguientes declaraciones en la hoja de estilo<strong> css\/my-editor-style.css:<\/strong><\/p>\n<pre><code class=\"language-css\">.language-php{ color: red; }\n.language-css{ color: green; }\n.language-html{ color: blue; }\n<\/code><\/pre>\n<p>TinyMCE generar\u00e1 la salida que se muestra en la siguiente imagen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8210 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/anadir-estilos-edicion.png\" alt=\"a\u00f1adir estilos de edici\u00f3n\" width=\"783\" height=\"454\"><\/p>\n<blockquote><p>Nota: Hemos revisado solo unos pocos ajustes de configuraci\u00f3n, pero la API de TinyMCE da a los desarrolladores un gran control sobre el editor. Consulta la documentaci\u00f3n de TinyMCE para la <a href=\"https:\/\/www.tinymce.com\/docs\/configure\/content-formatting\/#formats\">lista completa de elementos y propiedades<\/a> con algunos ejemplos de uso.<\/p><\/blockquote>\n<h2 id=\"hidden_buttons\">Habilitar los Botones Ocultos de WordPress TinyMCE<\/h2>\n<p>Podemos a\u00f1adir botones al editor visual de varias maneras. En muchos casos no se nos exige construir un bot\u00f3n personalizado porque TinyMCE proporciona un buen n\u00famero de botones ocultos que podemos activar f\u00e1cilmente.<br \/>\nUno de estos botones es el men\u00fa desplegable <strong>Styleselect<\/strong>, pero tenemos una larga lista de botones inactivos que podemos activar filtrando las matrices de botones a trav\u00e9s de uno de los filtros <strong>mce_buttons_{n}<\/strong> (ver documentos de TinyMCE para la lista completa de botones <a href=\"https:\/\/www.tinymce.com\/docs-3x\/reference\/buttons\/\">disponibles<\/a>).<\/p>\n<p>Considera el siguiente ejemplo:<\/p>\n<pre><code class=\"language-php\">function my_mce_buttons_3( $buttons ) {\t\n\t$buttons[] = 'superscript';\n\t$buttons[] = 'subscript';\n\treturn $buttons;\n}\nadd_filter( 'mce_buttons_3', 'my_mce_buttons_3' );\u00a0<\/code><\/pre>\n<p>La funci\u00f3n de devoluci\u00f3n de llamada de arriba a\u00f1ade los elementos de <strong>superscript<\/strong>\u00a0y <strong>subscript<\/strong>\u00a0al final de la matriz <strong>$buttons<\/strong>.<\/p>\n<figure id=\"attachment_8221\" aria-describedby=\"caption-attachment-8221\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8221 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/botones-mce-3.png\" alt=\"La imagen muestra dos botones extra a\u00f1adidos a la tercera fila de la barra de herramientas de TinyMCE\" width=\"500\" height=\"192\"><figcaption id=\"caption-attachment-8221\" class=\"wp-caption-text\">La imagen muestra dos botones adicionales a\u00f1adidos a la tercera fila de la barra de herramientas de TinyMCE<\/figcaption><\/figure>\n<p>Aqu\u00ed hay una lista de botones ocultos disponibles en WordPress TinyMCE:<\/p>\n<ul>\n<li><strong>cortar<\/strong><\/li>\n<li><strong>copiar<\/strong><\/li>\n<li><strong>pegar<\/strong><\/li>\n<li><strong>hr<\/strong><\/li>\n<li><strong>selecci\u00f3n de formato<\/strong><\/li>\n<li><strong>seleccion de fuente<\/strong><\/li>\n<li><strong>fontsizeselect<\/strong><\/li>\n<li><strong>selecci\u00f3n de estilos<\/strong><\/li>\n<li><strong>subscript<\/strong> (anteriormente <strong>sub<\/strong>)<\/li>\n<li><strong>superscript<\/strong> (anteriormente <strong>sup<\/strong>)<\/li>\n<li><strong>backcolor<\/strong><\/li>\n<li><strong>nuevo documento<\/strong><\/li>\n<\/ul>\n<figure id=\"attachment_8211\" aria-describedby=\"caption-attachment-8211\" style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8211 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/barra-herramientas-completa.png\" alt=\"Barra de herramientas de TinyMCE\" width=\"582\" height=\"250\"><figcaption id=\"caption-attachment-8211\" class=\"wp-caption-text\">La imagen muestra la barra de herramientas de TinyMCE con todos los botones disponibles<\/figcaption><\/figure>\n<p>Si ninguno de estos botones se ajusta a nuestras necesidades, podemos proporcionar al editor m\u00e1s funcionalidades, gracias a un buen n\u00famero de plugins oficiales.<\/p>\n<h2 id=\"existing_plugins\">Mejorar el Editor Visual con los Plugins de TinyMCE<\/h2>\n<p>Supongamos que tu objetivo es incluir el <a href=\"https:\/\/www.tinymce.com\/docs-3x\/reference\/plugins\/Plugin3x@table\/\">bot\u00f3n de la Tabla TinyMCE<\/a> en el editor visual a trav\u00e9s de un plugin de WordPress.<\/p>\n<p>Primero, tienes que descargar el Paquete de Desarrollo del <a href=\"https:\/\/www.tinymce.com\/download\/\">sitio web de TinyMCE<\/a>. Descomprime el archivo zip y consigue el archivo <strong>plugin.min.js<\/strong> de la carpeta <strong>\/js\/tinymce\/plugin\/table<\/strong>.<\/p>\n<p>Crea las siguientes carpetas en <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<ul>\n<li>\/wp-content\/plugins\/tinymce-example-plugin\/<\/li>\n<li>\/wp-content\/plugins\/tinymce-example-plugin\/mce\/table<\/li>\n<\/ul>\n<p>Cuando termines, crea un nuevo archivo <strong>tinymce-example-plugin.php<\/strong> en la carpeta ra\u00edz del plugin, y sube el archivo<strong> plugin.min.js a<\/strong> la carpeta de la tabla (ver la imagen de abajo).<\/p>\n<figure id=\"attachment_8219\" aria-describedby=\"caption-attachment-8219\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8219 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/ejemplo-plugin-tinymce.png\" alt=\"La imagen muestra la estructura de archivos del plugin\" width=\"310\" height=\"132\"><figcaption id=\"caption-attachment-8219\" class=\"wp-caption-text\">La imagen muestra la estructura de archivos del plugin<\/figcaption><\/figure>\n<p>Ahora a\u00f1ade las siguientes l\u00edneas en <strong>tinymce-ejemplo-plugin.php<\/strong>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * @package TinyMCE_example_plugin\n * @version 1.0\n *\/\n\/*\nPlugin Name: TinyMCE example plugin\nPlugin URI: http:\/\/wordpress.org\/extend\/plugins\/#\nDescription: This is an example plugin \nAuthor: Your Name\nVersion: 1.0\nAuthor URI: http:\/\/yourdomain.com\/\n*\/ \n<\/code><\/pre>\n<p>Para incluir el bot\u00f3n de la tabla en el editor de WordPress TinyMCE s\u00f3lo necesitamos dos filtros:<br \/>\n<strong>mce_buttons<\/strong> a\u00f1ade nuevos botones a la barra de herramientas principal de TinyMCE (podemos usar cualquiera de los filtros de<strong> mce_buttons_{n}<\/strong>, dependiendo de la fila en la que se quiere mostrar el bot\u00f3n)<br \/>\n<strong>mce_external_plugins<\/strong> carga un plugin externo TinyMCE.<\/p>\n<p>Aqu\u00ed est\u00e1 el c\u00f3digo del archivo del plugin:<\/p>\n<pre><code class=\"language-php\">function example_plugin_register_buttons( $buttons ) {\n   $buttons[] = 'table';\n\treturn $buttons;\n}\n\/\/ add new buttons\nadd_filter( 'mce_buttons', 'example_plugin_register_buttons' );\n\nfunction example_plugin_register_plugin( $plugin_array ) {\n   $plugin_array['table'] = plugins_url( '\/mce\/table\/plugin.min.js', __FILE__ );\n   return $plugin_array;\n}\n\/\/ Load the TinyMCE plugin\nadd_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );\n<\/code><\/pre>\n<p>La primera funci\u00f3n a\u00f1ade un nuevo bot\u00f3n a la barra de herramientas principal, mientras que la segunda funci\u00f3n carga un plugin desde la URL especificada. La funci\u00f3n <strong>plugins_url()<\/strong> recupera la URL absoluta del archivo especificado bajo el directorio de <strong>plugins<\/strong> (leer <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/plugins_url\">m\u00e1s en el Codex<\/a>).<\/p>\n<p>Ahora podemos guardar el archivo y activar el plugin. La imagen de abajo muestra la barra de herramientas mejorada.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8218 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/mesa-1.png\" alt=\"mesa\" width=\"634\" height=\"310\"><\/p>\n<p>Eso es todo. Siguiendo el mismo procedimiento, podemos a\u00f1adir cualquier plugin de TinyMCE existente al editor visual de WordPress.<\/p>\n<p>Puedes descargar <a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/12\/tinymce-example-plugin.zip\">el archivo plugin .zip<\/a>, o ver <a href=\"https:\/\/gist.github.com\/carlodaniele\/0c63b192be42665d4143cdb5412e570a\">el c\u00f3digo PHP de este ejemplo en Gist<\/a>.<\/p>\n<h2 id=\"custom_plugins\">Construir un Plugin TinyMCE<\/h2>\n<p>Finalmente, podemos construir nuestro plugin personalizado TinyMCE. Supongamos que quieres a\u00f1adir un bot\u00f3n para permitir a los usuarios envolver el contenido seleccionado en las siguientes etiquetas:<\/p>\n<pre><code class=\"language-php\">&lt;pre&gt;&lt;code&gt;Selected text&lt;\/code&gt;&lt;\/pre&gt;<\/code><\/pre>\n<p>Incluso podemos decidir a\u00f1adir una clase CSS a la etiqueta <strong>&lt;code&gt;<\/strong>, para proporcionar soporte para el resaltador de c\u00f3digos <a href=\"http:\/\/prismjs.com\/\">Prism<\/a>. Necesitamos:<\/p>\n<ul>\n<li>registrar un bot\u00f3n personalizado de TinyMCE y agregar un plugin de WordPress;<\/li>\n<li>desarrollar el plugin TinyMCE;<\/li>\n<\/ul>\n<p>Ya sabemos c\u00f3mo registrar un plugin y a\u00f1adir un bot\u00f3n en WordPress TinyMCE:<\/p>\n<pre><code class=\"language-php\">function example_plugin_register_buttons( $buttons ) {\n\t$buttons[] = 'prism';\n\treturn $buttons;\n}\n\/\/ add new buttons\nadd_filter( 'mce_buttons', 'example_plugin_register_buttons' );\n\nfunction example_plugin_register_plugin( $plugin_array ) {\n\t$plugin_array['prism'] = plugins_url( '\/mce\/prism\/plugin.js', __FILE__ );\n\treturn $plugin_array;\n}\n\/\/ Load the TinyMCE plugin\nadd_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );\n<\/code><\/pre>\n<p>Este es exactamente el mismo c\u00f3digo del ejemplo anterior, con la \u00fanica diferencia de que ahora estamos registrando un plugin personalizado llamado <strong>prisma<\/strong>.<br \/>\nAhora vamos a crear el siguiente archivo<strong> plugin.js:<\/strong><\/p>\n<pre><code class=\"language-javascript\">(function() {\n\tvar languages = ['css', 'php', 'html', 'javascript'];\n\t\n\ttinymce.PluginManager.add( 'prism', function( editor ){\n\t\t\n\t\tvar items = [];\n\n\t\ttinymce.each( languages, function( languageName ){\n\t\t\titems.push({\n\t\t\t\ttext: languageName,\n\t\t\t\tonclick: function(){\n\t\t\t\t\tvar content = tinyMCE.activeEditor.selection.getContent();\n\t\t\t\t\teditor.insertContent( '&lt;pre&gt;&lt;code class=\"language-' + languageName + '\"&gt;' + content + '&lt;\/code&gt;&lt;\/pre&gt;' );\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\teditor.addButton( 'prism', {\n\t\t\ttype: 'menubutton',\n\t\t\ttext: 'Prism',\n\t\t\ticon: 'code',\n\t\t\tmenu: items\n\t\t});\n\n\t});\n})();\n<\/code><\/pre>\n<p>Este c\u00f3digo tambi\u00e9n est\u00e1 <a href=\"https:\/\/gist.github.com\/carlodaniele\/7ffcd63b33c01d4284b52ad0866a4045\">disponible en Gist<\/a>.<\/p>\n<p>No est\u00e1 en nuestros objetivos sumergirnos en las API de TinyMCE, y encontrar\u00e1s todo lo que necesitas saber en los <a href=\"https:\/\/www.tinymce.com\/docs\/demo\/\">documentos de TinyMCE para desarrolladores<\/a>.<br \/>\nEste archivo debe ser colocado en la subcarpeta <strong>\/mce\/prism\/<\/strong> de nuestro directorio de plugins. La funci\u00f3n JS itera entre los elementos de la matriz de idiomas y empuja un nuevo objeto a la matriz de elementos para cada idioma. El m\u00e9todo addButton crea el bot\u00f3n de men\u00fa Prism, y a\u00f1ade un elemento de men\u00fa para cada elemento del conjunto de elementos.<\/p>\n<p>Guarda, sube y actualiza, y tu magn\u00edfico bot\u00f3n del men\u00fa desplegable aparecer\u00e1 en todo su esplendor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8212 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/boton-menu-prism-1.png\" alt=\"bot\u00f3n de men\u00fa del prism\" width=\"676\" height=\"402\"><\/p>\n<p>Cualquier informaci\u00f3n adicional sobre c\u00f3mo desarrollar los plugins de TinyMCE se puede encontrar en la <a href=\"https:\/\/www.tinymce.com\/docs\/advanced\/creating-a-plugin\/\">documentaci\u00f3n online para desarrolladores<\/a>.<\/p>\n<h2 id=\"tinymce_advanced\">TinyMCE Plugin Avanzado para WordPress<\/h2>\n<p>Si no eres un desarrollador, tu tambi\u00e9n puedes mejorar el editor visual . <a href=\"https:\/\/wordpress.org\/plugins\/tinymce-advanced\/\">TinyMCE Advanced<\/a> es un plugin gratuito de WordPress que contiene las funcionalidades de quince plugins de TinyMCE al editor visual predeterminado.<\/p>\n<p>Gracias a TinyMCE Advanced los usuarios a\u00f1adir\u00e1n, quitar\u00e1n y reordenar\u00e1n los botones de las cuatro filas de la barra de herramientas del editor. Adem\u00e1s, el plugin ofrece una opci\u00f3n para habilitar un men\u00fa encima de la barra de herramientas.<\/p>\n<figure id=\"attachment_8223\" aria-describedby=\"caption-attachment-8223\" style=\"width: 842px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8223 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/tynymce-advanced-ajustes-editor-1.png\" alt=\"TinyMCE Advanced proporciona una lista completa de los ajustes del editor\" width=\"842\" height=\"606\"><figcaption id=\"caption-attachment-8223\" class=\"wp-caption-text\">Desde la p\u00e1gina de configuraci\u00f3n del editor podemos a\u00f1adir, eliminar y organizar los botones de la barra de herramientas de TynyMCE<\/figcaption><\/figure>\n<p>Desde la p\u00e1gina de opciones del plugin podemos habilitar varias funciones avanzadas, como el bot\u00f3n Tabla, los men\u00fas <strong>Familia de fuentes<\/strong> y <strong>Tama\u00f1o de fuente<\/strong>, los botones <strong>Mostrar bloques<\/strong> y Mostrar <strong>caracteres<\/strong> <strong>invisibles<\/strong>.<\/p>\n<p>Otras opciones permiten a los usuarios determinar el editor que se ver\u00e1 afectado por los nuevos ajustes, y m\u00e1s.<\/p>\n<figure id=\"attachment_8222\" aria-describedby=\"caption-attachment-8222\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8222 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/12\/configuracion-administracion-avanzada-tinymce-1.png\" alt=\"Desde la p\u00e1gina de configuraci\u00f3n del editor podemos a\u00f1adir, eliminar y organizar los botones de la barra de herramientas de TynyMCE\" width=\"600\" height=\"294\"><figcaption id=\"caption-attachment-8222\" class=\"wp-caption-text\">TinyMCE Advanced proporciona una lista completa de ajustes del editor<\/figcaption><\/figure>\n<h2>Conclusiones<\/h2>\n<p>La API de TinyMCE proporciona un mont\u00f3n de cosas con las que podemos jugar. Podemos activar funcionalidades ocultas o registrar plugins externos. Y si ninguna de las funciones disponibles es suficiente para nosotros, podemos divertirnos con la API y construir extensiones personalizadas. \u00bfTienes alguna otra idea para mejorar el editor de WordPress TinyMCE?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An in-depth dissection of WordPress TinyMCE editor: what it is, how we can add functionalities and how we can create our custom plugins<\/p>\n","protected":false},"author":36,"featured_media":31126,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[678,172],"topic":[1345],"class_list":["post-31073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-tinymce","tag-wordpress","topic-desarrollo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Diseccionando el Editor de WordPress TinyMCE<\/title>\n<meta name=\"description\" content=\"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diseccionando el editor de WordPress TinyMCE\" \/>\n<meta property=\"og:description\" content=\"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-31T15:13:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-18T09:49:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Diseccionando el editor de WordPress TinyMCE\",\"datePublished\":\"2020-01-31T15:13:39+00:00\",\"dateModified\":\"2025-02-18T09:49:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\"},\"wordCount\":2248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png\",\"keywords\":[\"TinyMCE\",\"WordPress\"],\"articleSection\":[\"Desarrollo de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\",\"name\":\"Diseccionando el Editor de WordPress TinyMCE\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png\",\"datePublished\":\"2020-01-31T15:13:39+00:00\",\"dateModified\":\"2025-02-18T09:49:02+00:00\",\"description\":\"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diseccionando el editor de WordPress TinyMCE\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Diseccionando el Editor de WordPress TinyMCE","description":"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/","og_locale":"es_ES","og_type":"article","og_title":"Diseccionando el editor de WordPress TinyMCE","og_description":"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.","og_url":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2020-01-31T15:13:39+00:00","article_modified_time":"2025-02-18T09:49:02+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Diseccionando el editor de WordPress TinyMCE","datePublished":"2020-01-31T15:13:39+00:00","dateModified":"2025-02-18T09:49:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/"},"wordCount":2248,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png","keywords":["TinyMCE","WordPress"],"articleSection":["Desarrollo de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/","url":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/","name":"Diseccionando el Editor de WordPress TinyMCE","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png","datePublished":"2020-01-31T15:13:39+00:00","dateModified":"2025-02-18T09:49:02+00:00","description":"Echa un vistazo a esta disecci\u00f3n en profundidad del editor de WordPress TinyMCE: qu\u00e9 es, y c\u00f3mo puedes a\u00f1adir funcionalidad adicional y tus propios plugins personalizados.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/editor-wordpress-tinymce.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Diseccionando el editor de WordPress TinyMCE"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/31073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=31073"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/31073\/revisions"}],"predecessor-version":[{"id":78173,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/31073\/revisions\/78173"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31073\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31073\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31073\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31073\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/31126"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=31073"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=31073"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=31073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}