Hoy voy a escribir sobre como utilizar estilos propios que sean seleccionables desde el diálogo de insertar/editar imagen de nuestro editor TinyMCE, por defecto este campo tiene tres opciones, caption, system-pagebreak y value, los dos primeros están predefinidos en un archivo css del directorio templates/system, el tercero nos permite convertir el campo select en un input box donde añadir nuestro propio valor.

A veces nos puede interesar facilitar la tarea a un cliente permitiendole añadir clases directamente para conseguir efectos javascript o bien hemos definido estilos y deseamos facilitarle la tarea de escogerlos, esto lo podemos conseguir añadiendo a nuestro directorio css del template en uso un archivo con el nombre editor.css.

Este archivo editor.css sobrescribe al archivo de mismo nombre situado en templates/system/css/editor.css por lo que si no definimos las clases anteriores no se mostraran, para ello escribiremos algo asi:

hr#system-readmore  { border: red dashed 1px; color: red; }
hr.system-pagebreak { border: gray dashed 1px; color: gray; }
.minuevaclase { estilos...}

De esta forma conseguimos obtener las clases caption y system-pagebreak más todas las que deseemos aplicar en linea a los tag <img>