editor de texto de wordpress

El editor de texto de WordPress es el editor TinyMCE de código abierto y se distribuye bajo licencia LGPL.

Está basado en JavaScript lo que permite que se ejecute en varias plataformas y CMS como WordPress y es compatible con la mayoría de navegadores web.

El editor TinyMCE es un editor WYSIWYG que significa “What You See Is What You Get” o en español “Lo que tú ves es lo que tu obtienes” y significa que podemos escribir mientras vemos el resultado final del texto.

Y en definitiva el editor TinyMCE genera el contenido como texto, imágenes y otros elementos en código HTML y nos lo muestra de forma parecida a como quedara en nuestra página web.

El problema del editor de texto TinyMCE es que es muy básico y se nos puede quedar pequeño en cuanto a funcionalidades.

Y además los desarrolladores de WordPress con el tiempo han decidido desactivar varios botones de funciones que se suponen obsoletas pero útiles para algunos usuarios cómo Justificar texto o Subrayar en WordPress.

Asique vamos a ver un plugin para aumentar las funcionalidades de este editor, pero antes echémosle un vistazo a las opciones del editor de texto TinyMCE de WordPress.

 

TinyMCE el editor de texto de WordPress

editor de texto de wordpress

 

Tipo de Texto: El tipo de texto puede ser títulos y subtítulos, párrafos o preformateado que define un tipo de texto especial sin formato en una caja que puede mostrar tipos de código sin ejecutarlo.

Negrita: resalta el texto con negrita.

Cursiva: resalta el texto con cursiva.

Lista con viñetas: Crea una lista con puntos.

Lista numerada: Crea una lista con numeración.

Cita: Formatea el texto con un estilo en forma de cita.

Alineación izquierda: Alinea el texto a la izquierda.

Alineación centrada: Alinea el texto al centro.

Alineación derecha: Alinea el texto a la derecha.

Insertar Enlace: Crea un enlace mediante una URL en un texto o una imagen.

Borrar Enlace: Elimina un enlace.

Leer Más: Inserta una línea que define un extracto de una entrada con un botón de “Leer Más” en la página de entradas.

Más Herramientas: Muestra la segunda línea de opciones del editor de texto.

Tachado: Tacha el texto.

Línea Horizontal: crea una línea horizontal.

Color de Texto: Cambia el color del texto.

Pegar como Texto: Pega un texto sin el formato.

Limpiar Texto: Quita el formato de un texto.

Carácter Especial: Inserta un carácter especial.

Reducir Sangría: Reduce el espacio blanco del principio de un texto.

Aumentar Sangría: Aumenta el espacio en blanco del principio de un texto.

Deshacer: Deshace el último cambio.

Rehacer: Rehace el último cambio eliminado.

Atajos de Teclado: Muestra todos los atajos de teclado del editor de WordPress.

Modo de escritura sin distracción: Oculta las opciones de WordPress para dejar una lista más limpia para escribir sin distracciones, al mover el ratón hacia un lateral las opciones vuelven a aparecer.

Añadir Objeto: Inserta una imagen, video, audio o archivo de la librería multimedia.

Pestañas Visual / HTML: cambian el editor de texto de Visual a HTML. En la vista HTML podemos ver las etiquetas y el código HTML que se genera cuando le damos formato al texto.

 

editor texto html en wordpress

 

¿Era necesario que explicara la mayoría de estas opciones? Seguramente no jajaja

El caso es que faltan algunas opciones básicas como el justificado de texto y el subrayado y no es que no existan ya que estas opciones siguen funcionando con los atajos de teclado, simplemente es que han deshabilitado los botones de estas opciones.

 

Atajos del teclado de WordPress

Aquí te dejo la lista e atajos de teclado de WordPress y cómo podemos observar si están las opciones de subrayado y justificado como atajos del teclado y funcionan perfectamente.

atajos de teclado de wordpress

 

TinyMCE ADVANCED el editor de texto mejorado para WordPress

TinyMCE advanced es el plugin de WordPress que crea un editor de texto mejorado en WordPress con decenas de opciones básicas que no vienen por defecto o están desactivadas.

tinymce advanced wordpress

 

TinyMCE advanced tiene más de 2 millones de instalaciones activas y no es de extrañar muchos usuarios necesitan cambiar el tipo de letra en WordPress, justificar texto, resaltar texto con un fondo en color y otras muchas opciones que esperamos que tenga un editor de texto.

Y otras opciones un poco más avanzadas como crear tablas en WordPress de una forma sencilla y el maravilloso botón de buscar y remplazar texto.

Y lo mejor de todo es que el contenido que genera sigue siendo en HTML y no con códigos cortos, con lo que podemos usarlo donde queramos sin miedo a que si necesitamos desinstalar el plugin el contenido se elimine o se muestre de forma incorrecta en nuestras páginas y entradas.

TinyMCE advanced es gratuito y se instala desde el repositorio de WordPress Plugin > Añadir nuevo.

 

instalar tinymce advanced

 

Una vez instalado vamos a Ajustes > TinyMCE advanced para personalizar el editor de texto de WordPress y añadir los botones rápidos que necesitemos.

Podemos configurar hasta 4 barras de accesos rápidos con botones y podemos ordenar los botones arrastrándolos por el menú.

 

como justificar texto en wordpress

 

Te explico algunas opciones de TinyMCE advanced:

Menú de Editor: TinyMCE advanced crea un menú en el editor con la mayoría de las opciones para no tener que abusar de los botones de acceso rápido.

Familia de fuente: cambia el tipo de fuente del texto.

Tamaños de la fuente: Cambia el tamaño de la fuente.

Color de fondo: Configura el color del fondo del texto.

Subrayado: Subraya el texto.

Justificar: justifica el texto.

Insertar Tabla en WordPress: Crea una tabla que puedes personalizar.

crear tabla en wordpress

 

Buscar y reemplazar: busca un texto y lo remplaza por otro. (Muy útil para quitar los dobles espacios en blanco que creamos sin querer con la barra espaciadora del teclado).

Mostrar bloques: Muestra los bloques como párrafos o títulos de una forma más visual creando una línea que define cada bloque.

mostrar-los-bloques-del-editor-de-texto-en-wordpress

 

De izquierda a derecha: Cambia el método de escribir de izquierda a derecha.

De derecha a izquierda: Cambia el modo de escribir de derecha a izquierda para adaptarse a idiomas árabes y otros idiomas.

Código fuente: muestra el código HTML en una ventana emergente.

Código: texto resaltado utilizado para mostrar código fuente de programación sin que se ejecute.

Salto de páginas: crea una línea que define subpáginas dentro de una página o entrada de WordPress y también crea enlaces para navegar entre ellas.

 

Más opciones del editor TinyMCE advanced.

También podemos activar varias opciones avanzadas que pueden sernos útiles dentro del editor de texto.

 

opciones editor de texto

 

Opciones de estilo de listas: Añade tipos de listas con cuadrados, discos, mayúsculas o minúsculas.

Menú contextual: al pulsar con el botón derecho del ratón dentro del editor de texto nos mostrara opciones del editor en vez de las opciones del navegador lo que mejora la usabilidad del editor de texto.

Cuadro de dialogo alternativo para enlaces: Sustituye el editor de enlaces de WordPress por otro que incluye crear enlaces “nofolow” desde el editor de enlaces.

Tamaños de fuente: añade más tamaños de fuente al editor.

TinyMCE advanced también permite importar y exportar las opciones del plugin a otras instalaciones de WordPress.

 

editor de texto avanzado de wordpress

 

Editor de texto TinyMCE advanced en maquetadores visuales

Aunque se han conocido varias incompatibilidades de TinyMCE Advanced con varios constructores visuales como Visual Composer estas se han ido solucionando y hoy en día el plugin TinyMCE Advanced es compatible con la mayoría de constructores visuales.

Nota: Aun así es posible encontrar algún tipo de error en algunas plantillas que utilizan constructores visuales con sus propias opciones personalizadas para el texto.

 

TinyMCE Advanced en Visual Composer

tymce advanced visual composer

 

TinyMCE Advanced en Divi Builder

tinymce advanced divi builder

 

TinyMCE Advanced en Site Origin page builder

tynymce advanced site origin page builder

 

Black Studio TinyMCE Widget

El editor de texto de WordPress no se queda pequeño únicamente en páginas y entradas, si no que también muchos usuarios lo echan en falta en el Widget de Texto cuando están diseñando la barra lateral.

Y aunque el Widget de Texto admite HTML y puedes conseguir el diseño del texto o insertar imágenes con este código es un auténtico calvario la verdad.

También podemos crear el diseño del texto en una página borrador y luego copiar el código desde la pestaña HTML para después pegarlo en el Widget de texto pero sigue siendo engorroso.

Así que para solucionar este problema existe el plugin Black StudioMCE Widget que crea un tipo de Widget de texto que incluye el editor TinyMCE de WordPress.

Y lo mejor de todo, también es compatible con TinyMCE Advanced.

Black-Studio-TinyMCE-Widget

 

Y de esta manera podemos tener el editor de texto en la barra lateral para trabajar más cómodamente.

editor-de-texto-en-la-barra-lateral

 

Sinceramente creo que las funciones que crean estos plugin son muy básicas y deberían estar integradas en WordPress ya que miles de usuarios las echan en falta.

¡Fin del tutorial! Enhorabuena y mil gracias si has llegado hasta aquí y espero que te sirva de ayuda para trabajar mas cómodamente con el editor de texto de WordPress.

15 comentarios en “Editor de Texto Avanzado en WordPress | TinyMCE Advanced

  1. Mi amigo Gerardo, gran parte de tus publicaciones las publico en una pagina de FaceBook que utilizo para para mi consumo y ayudar a otros a adquirir los sabios y edificantes conocimientos que en cada pagina ofreces a tus seguidores sobre wordpress. La pagina se llama, Soportes Tecnologicos Especializados y siempre que publico, no dejo de indicar que es como cortesia de SensacionWeb. Creo que hasta ahora, no habia tenido la oportunidad de encontrar en materia de wordpress nada mas claramente explicado, completo y con el detalle de ser facilmente entendible por quienes nos interesamos por seguir aprendiendo cada dia mas de los entresijos de este maravilloso mundo del internet. Gracias por todo lo que nos enseñas en cada publicacion sin dejar nada a la interpretacion, pues se que lo haces con la preocupacion de explicar de forma correcta, clara y con esmero, cada tutorial que aparece en las paginas de SensacionWeb.

    1. Jose Larrauri, muchísimas gracias por la difusión en facebook, me alegro que te gusten mis tutoriales y gracias por el comentario de apoyo que me anima a seguir escribiendo.

  2. Hola, Gerardo:
    Me encanta tu blog, me ha servido de mucha ayuda para un proyecto que estoy desarrollando. Quería preguntarte si el TinyMCE advanced me sirve para eliminar los espacios que quedan entre palabra y palabra. Sé cómo eliminar esos espacio que se generan de la nada, o al menos eso creo yo, pero en WordPress se me ha hecho imposible. Help me!

  3. Hola Gerardo una pregunta. Este editor también tiene para destacar el texto, así como por ejemplo … el texto que quieras destacar … ? te puse el código , corrígelo o quítalo si no quieres que aparezca. Gracias mil !
    Por todo lo que leí es bastante interesante, y tiene de todo

  4. Ah ok , no hay problema. A lo que me referia y quisiera saber, es si este plugin tiene algo para resaltar el texto, así como cuando remarcas con un fibrón fosforecente. Gracias !

  5. Hola Gerardo, gracias por el artículo. Tengo un problema, desaparecieron las opciones de «justificar» «Tipo de letra»… He desinstalado e instalado pero no funciona. ¿Alguna ayuda? ¿Algún consejo de otro plugin liviano donde pueda organizar mis botones?. Un abrazo.

    1. Hola Marcelo!
      Pues que raro… Esas opciones siguen existiendo en el plugin, revisa las opciones del plugin en Ajustes > TinyMCE Advanced
      Un saludo!

  6. Hola Buenos días!
    Me encantan los aportes que haces desde tu página y que nos permiten a los novatos y fortaleciendo conocimiento.
    Quisiera saber¿ sí existe alguna manera de agregar al editor de texto la posibilidad de crear pequeña biografía del autor y que quede dentro de la entrada?
    Gracias

Deja un comentario

El email no será publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo García Asensio
  • Los datos se usarán para gestión de comentarios y medidas de seguridad
  • Legitimación: tu consentimiento.
  • Destinatarios: los datos estarán ubicados en los servidores de Siteground.
  • Derechos: podrás ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. más info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar