Añadir estilos al editor TinyMCE en Joomla

TinyMCE es el editor WYSIWYG por defecto en Joomla. La forma que utiliza joomla para incluir este editor de texto, es a través de un plugin.

TinyMCE resulta un complemento muy interesnate cuando las personas encargadas de incluir contenido en nuestro portal web, no tienen los conocimientos necesarios de html y css para crear sus propios contenidos bien formateados. Pese a generar un html no del todo “correcto”, es bastante aceptable, y podemos añadir etiquetado html de una forma gráfica.

Entre las múltiples posibilidades de configuración de este plugin, nos vamos a fijar en la pestaña “Opciones básicas”. Lo primero que nos encontramos es un desplegable llamado “Funcionalidad” que tiene tres posibles opciones:

TinyMCW en Joomla

  1. Básico: Es una versión de TinyMCE muy , muy reducida. Unicamente permite pequeñas modificaciones del texto. Ni siquiera podemos añadir enlaces de una manera gráfica.
  2. Avanzado: Es la opción por defecto en Joomla 2.5. Es una versión con alguna opción más de edición y formateado del texto.
  3. Extendido: Es la versión más completa, y es la más recomendable.

Tanto en la versión “Avanzada”, como en la versión “Extendida”, podemos añadir estilos a TinyMCE.

En el siguiente parámetro de configuración que nos vamos a fijar es uno llamado “Clase CSS personalizada”. En esta campo de texto, podemos indicar el nombre del archivo css que queremos cargar en el TinyMCE de nuestro Joomla.

Lo mejor es verlo con un ejemplo. Si nuestra plantilla por defecto es “Beez_20”, añadimos un archivo llamado prueba.css en el directorio “css” de esta plantilla. Recordar que la ruta a la plantilla sería “/templates/beez_20/”. Éste es el contenido de dicho archivo de estilos:

.fondo-rojo{background:#f00;}
.texto-rojo{color:#f00;}

Ahora si vamos a añadir un nuevo artículo, podemos ver, como en el editor de textos, en el desplegable “styles”, aparecen las dos clases que hemos creado. Repetir, que este desplegable, sólo aparecerá, si hemos configurado TinyMCE en “Avanzado” o “Extendido”.

Estilos TinyMCE en Joomla

El ejemplo que he utilizado, no es realmente muy útil. Pero es un demostración de como añadir estilos al editor TinyMCE en Joomla. Esto nos puede venir bien cuando un cliente quiere poder formatear determinados textos, o parrafos diferentes al resto, y así se lo ponemos de una manera muy sencilla. Ya que podemos dejar creadas unas clases, así no tiene que buscar colores o fuentes cada vez que quiera usar ese estilo en concreto. Nos aseguramos también de mantener un estilo uniforme en nuestro sitio web.

Esta entrada fue publicada en Plugins. Guarda el enlace permanente.

8 respuestas a Añadir estilos al editor TinyMCE en Joomla

  1. Gonzalo dijo:

    Bien, pero me gustaria saber (soy principiante) si existe alguna forma auto de definir un estilo en joomla 2.5, de tal forma que en el blog, por ejemplo de NOTICIAS, las fotos, la cantidad de texto y el leer mas.. asi como el espacio entre cada noticia, .esten siempre uniformes. gracias, me pueden responder a lumbre.us@gmail.com

    • Mikel dijo:

      Hola Gonzalo. Ese tipo de cosas las puedes hacer modificando los estilos de la plantilla; pero lo normal es que todas las noticias tengan el mismo formato (estilos). No se muy bien a que te refieres…

      • Gonzalo dijo:

        Me refiero a que la foto ilustrativa de la noticia del blog, adopte un tamaño igual para todas las noticias, y que la cantidad de texto inicial del blog sea siempre la misma y que el “leer mas” salga automaticamente. Es que tengo ese problema, las noticias le tengo que estar viendo donde poner el “leer mas” porque sino sobrepasa la foto, el leer mas, a veces me queda solo abajo, y la ultima noticia igual a veces se pega a la segunda….todo eso es lo que quiero saber si se puede programar de tal forma que, por ejemplo la foto adopte un solo tamaño, independiente del que tenga en el fronpage, que la cantidad d texto de introduccion siempre sea el mismo que el leer mas siempre quede en la misma posición y que las distancia entre cada noticia siempre sea la misma

      • Mikel dijo:

        Igual es mejor que preguntes tus dudas en un foro… Puedes hacer parte de lo que dices con estilos, pero al final Joomla en muy “libre” y hay que tener un poco de gusto al meter los contenidos. Suerte con tu web…

  2. Dani dijo:

    Gracias Mikel, me estaba volviendo loco sin saber la ruta donde tenía que dejar el css, daba por sentado que tenía que apuntar a una URL completa, perfectamente explicado!!!

  3. roger dijo:

    Me refiero a que la foto ilustrativa de la noticia del blog, adopte un tamaño igual para todas las noticias, y que la cantidad de texto inicial del blog sea siempre la misma y que el “leer mas” salga automaticamente. Es que tengo ese problema, las noticias le tengo que estar viendo donde poner el “leer mas” porque sino sobrepasa la foto, el leer mas, a veces me queda solo abajo, y la ultima noticia igual a veces se pega a la segunda….todo eso es lo que quiero saber si se puede programar de tal forma que, por ejemplo la foto adopte un solo tamaño, independiente del que tenga en el fronpage, que la cantidad d texto de introduccion siempre sea el mismo que el leer mas siempre quede en la misma posición y que las distancia entre cada noticia siempre sea la misma

  4. roger dijo:

    alguien resolvio la inquietud de Gonzalo, yo tambien estoy en busca de solucion a ello, me tope con articulos de CCK y aquellos componentes que lo manejas como el Flexicontent, Sobi2, K2 y otros como el zoo; pero estos las veo complejas para un pequeño formato como lo describio Gonzalo. espero alguien nos ayudeee. de antemano mil gracias…

  5. Juan Silva dijo:

    MAESTRO !! MAESTRO !! mil gracias … no se si has notado que eres de los pocos que ha compartido este conocimiento tan importante.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s