Creando un tag personalizado con eZ Online Editor 5.0.
Clasificado bajo eZ Online Editor | 1 comentario
Una de las grandes mejoras que trae consigo eZ Publish es el cambio en el editor de texto enriquecido. Sin embargo, aunque aún no te hayas decidido a dar el salto a la 4.1, no tendrás problema alguno si deseas cambiar el editor que por defecto traen las versiones 4.0.x.
La instalación es sencilla y no hay ningún de compatibilidad con contenidos creados en otras versiones. Está enteradamente basado en tinyMCE por lo cual a más de uno le resultará familiar su aspecto.
La instalación es sencilla y no hay ningún de compatibilidad con contenidos creados en otras versiones. Está enteradamente basado en tinyMCE por lo cual a más de uno le resultará familiar su aspecto.
Sin embargo, sólo un subconjunto de los botones que pueden añadirse al editor, están habilitados por defecto en eZ Publish. La razón es que eZ Publish usa una serie de etiquetas, que no tienen por qué ser xhtml, para dar formato a estos textos. Estás etiquetas son después transformadas a html/xhtml para su presentación en la página.
Por tanto, las acciones presentadas generan código que eZ Publish sí entiende, y cuyo funciomamiento ya se ha adaptado al conjunto de etiquetas permitido por eZ Publish. Poco a poco, más botones se irán adaptando a estas limitaciones.
Pero lo que en principio podría parecer una limitación a las posibilidades de este editor, no lo es tal, ya que eZ Online 5.0 permite la creación de tags personalizados. Estos tags son fácilmente configurables. Vamos a verlo con un ejemplo.
Supongamos que necesitamos que en nuestros artículos aparezca un texto destacado, a modo de "ladillo", el cual tiene que ir con un tamaño de letra de 12px, aparecer en negrita y en color rojo. Deberá estar además colocada a la izquierda del resto del contenido y tener un borde superior y un borde inferior. Esta necesidad no nos ha llegado en el principio del proyecto, sino que ha llegado 6 meses después y con ya un gran número de artículos creados.
La primera solución podría ser añadir un atributo, llamado por ejemplo "ladillo", a nuestra clase artículo. Este campo podría ser utilizado por los editores y nosotros tendríamos que modificar la plantilla que se encarga de pintar el articulo para:
1.- Detectar si este articulo va a tener ladillo o no
2.- En caso positivo, presentar dicho ladillo con las características pedidas.
A parte, supongamos ya tenemos unos 1000 artículos creados. El añadir un atributo ahora a esta clase, haría que tuviesemos 1000 articulos con un atributo que esta vacío, pero que no por ello deja de añadir complejidad a nuestra base de datos.
Pero todo esto lo podemos evitar con un tag personalizado. Para crearlo vamos a añadir una extensión a nuestra aplicación, la cual será la encargada tanto de añadir esta posibilidad al editor, como de posteriormente presentar estos ladillos tal y como se desean. No vamos a entrar en detalle en como debemos crear la extensión. Sí que vamos a centrarnos en lo necesario para que el online editor sepa de nuestra nueva necesidad.
Como casi todo en eZ Publish, las configuraciones se hacen vías archivos .ini. En la carpeta settings hay una gran cantidad de ellos, cada uno de los cuales controlan partes de nuestra aplicación. Estos archivos no deberían ser tocados nunca. Para modificar los valores por defecto, o añadir algún otro valor, podemos redefinir estas configuraciones en nuestra carpeta /settings/override, en cada uno de nuestros siteaccess o bien a través de extensiones.
Uno de los archivos que controlan las posibilidades de eZ OE 5.0 es el content.ini. Como todos los demás, consta de una serie de grupos los cuales tienen asociados una serie de variables y sus valores, valores que pueden ser únicos o bien estar expresados en forma de arrays. Desde nuestra extensión vamos a añadir un nuevo valor al array de tags personalizados. para ello, crearemos un archivo llamado content.ini.append.php en la carpeta settings de la extensión con el siguiente contenido.
<?php /* [CustomTagSettings] AvailableCustomTags[]=ladillo IsInline[ladillo]=true [EditSettings] ExtensionDirectories[]=examples */ ?>
Si ahora pulsamos el botón de tags personalizados del editor veremos que "ladillo" aparece entre las opciones. Podemos escribir nuestro ladillo, después seleccionarlo, pulsar este botón y seleccionar la opción ladillo para indicar qué texto deseamos que actue como tal.
Pero aún nos falta dar a nuestro "ladillo" el formato adecuado. Esto lo haremos con una plantilla. La plantilla también añadiremos en nuestra extensión y podría ser similar a esta.
<div style="float:{if eq($posicion, "derecha")}right{else}left{/if}; width:150px; color:{$color}; font-weight:bold; padding:5px 2px; border-top:1px solid #666; border-bottom:1px solid #666; margin:10px"> {$content} </div>
La variable $content será el contenido que hayamos seleccionado como ladillo desde el editor. (Evidentemente, sería mucho más elegante usar una clase y añadir las reglas apropiadas al css para lograr esta presentación, lo cual es también posible).
Pero qué pasaría si se nos pidiese tener la posibilidad de que algunos ladillos apareciesen en la zona derecha y en color azul?. La idea de añadir atributos parece aún menos adecuada. Es aquí donde verdaderamente vamos a ver la potencia de este nuevo editor.
En primer lugar, vamos a añadir a nuestro tag "ladillo" la posibilidad de tener dos atributos, uno para alineación y otro para el color.
<?php /* [CustomTagSettings] AvailableCustomTags[]=ladillo IsInline[ladillo]=true [ladillo] # Custom attributes list CustomAttributes[] CustomAttributes[]=posicion CustomAttributes[]=color [EditSettings] ExtensionDirectories[]=examples */ ?>
En segundo lugar, nos vamos a fijar en uno de los archivos de configuración de la propia extension ezoe (la del online editor). se llama ezoe_attributes.ini. El archivo nos puede seguir de guía perfecta para crear un ezoe_attributes.ini.append.php en nuestra extensión. Podría ser tal algo parecido a esto.
<?php /* [ladillo] CustomAttributes[]=posicion CustomAttributes[]=color CustomAttributesDefaults[posicion]=izquierda CustomAttributesDefaults[color]=#ff0000 [CustomAttribute_ladillo_posicion] Name=Posición Default=izquierda Type=select Selection[] Selection[izquierda]=Izquierda Selection[derecha]=Derecha [CustomAttribute_ladillo_color] Name=Color Default=#ff0000 Type=color */ ?>
Hay diversos tipos de selección de valores. El haber dado al atributo ladillo_color el "type" color, nos permitirá elegir el color desde un típico selector de colores, sin necesidad alguna de conocimiento de códigos html. Variando los tipos de selección y añadiendo nuevos atributos a nuestro tag, las posibilidades aumentan. En este mismo post tenéis dos ejemplos.
Tenía un problema con un texto que debía ser administrable pero una parte de él debía cambiar dependiendo de un objeto que el usuario tuviese relacionado, y el haber conocido las etiquetas personalizables me lo ha solucionado de una forma rápida y sencilla.
Una entrada muy útil.