Interacción entre hojas de estilo CSS y el editor WYSIWYG

El editor WYSIWYG de los FID usa los estilos definidos para el cuerpo de artículo, para poder mostrar de la manera más fiel posible el artículo como se verá finalmente. Es importante conocer la interacción entre estas piezas de Prontus.

Para que en el selector de Estilos del editor VTXT del FID se visualicen los estilos de texto de la plantilla de artículo, se debe incorporar un conjunto específico de estilos al CSS incluido en la plantilla de artículo. Para esto, Prontus busca entre las hojas de estilo incluídas directamente en la plantilla con un tag

<link src="<ruta_al_archivo.css>" rel="stylesheet"type="text/css">

Nota: Prontus no analiza estilos incluídos usando directivas CSS @include, ni instrucciones SSI, ni includes PHP. Esto puede aprovecharse para encapsular los estilos de los artículos por separado en las plantillas.

Es posible indicar los estilos que estarán disponibles en general, así como aquellos que se podrán aplicar a los tags < table... >, < tr > y < td >, para que las tablas se muestren consistentemente tanto en el editor VTXT de un FID como en el artículo resultante

En las hojas de estilos leídas por Prontus como se describió, se deben insertar delimitadores para señalar a Prontus qué secciones de esta deben ser "importados" hacia el editor visual VTXT.

Estos delimitadores son:

/*vtxt*/ .. /*/vtxt*/	Estilos para los párrafos de texto, incluyendo los subtítulos.
/*vtxt_table*/ .. /*/vtxt_table*/	Estilos para las tablas.
/*vtxt_tr*/ .. /*/vtxt_tr*/	Estilos para las filas de las tablas.
/*vtxt_td*/ .. /*vtxt_td*/	Estilos para las celdas de las tablas.

Los estilos definidos entre estos delimitadores aparecerán como opciones en combo-boxes dentro del editor visual VTXT. Los estilos de tabla, fila de tabla y celda de tabla serán visibles desde las opciones de edición de tablas en el editor visual. De no existir, se usarán los estilos genéricos.

Los comentarios a continuación de los selectores CSS serán usados para formar los nombres en el combo-box de estilos de párrafo.

Todos los estilos que se apliquen al elemento VTXT deben subordinarse al identificador CUERPO, de manera que estas definiciones no afecten a otros tags html tanto en la página del artículo como en el FID. Otro detalle importante es intentar en lo posible evitar estilos que incluyan propiedades que afecten el posicionamiento en la página, como float, display u overflow, ya que pueden afectar el funcionamiento del editor. Por ejemplo, un estilo como

.CUERPO .bloqueado { overflow: hidden; }

podría bloquear el scroll del editor visual.

En la plantilla del artículo, el elemento VTXT debe insertarse dentro de un DIV u otro contenedor que posea la clase CUERPO aplicada, por ejemplo:

%%IF(VTXT_CUERPO)%%
< div class="CUERPO">
    < div >%%VTXT_CUERPO%%< /div >
< /div >
%%/IF%%

Ejemplo de hoja de estilos:

/* formato genérico. */
.CUERPO h1 {font-size:18px; font-weight:normal; color:#930000;}
.CUERPO h2 {font-size:15px; font-weight:bold; color:#666666;}
.CUERPO h3 {font-size:12px; font-weight:bold; color:#666666;}
.CUERPO h4 {font-size:11px; font-weight:bold; color:#1C2B45;}
.CUERPO h5 {font-family:Tahoma,Verdana,Arial,Helvetica,Sans-Serif;font-size:10px; font-weight:bold; color:#1C2B45;}
.CUERPO h6 {font-family:Tahoma,Verdana,Arial,Helvetica,Sans-Serif;font-size:9px; font-weight:bold; color:#1C2B45;}
.CUERPO address {font-size:12px; font-weight:normal; color:#000000; font-style:italic;}
.CUERPO pre {font-size:11px; font-weight:normal; color:#666666;text-align:justify; text-indent:10px;}

/*vtxt*/
.CUERPO .subtit /* subtitulos */ {display:block; width:100%; margin:0;padding:0 0 8px 0; font-size:13px;font-weight:bold; color:#930000;border-bottom:1px solid #E0E0E0;}
.CUERPO .piefoto /* pies de fotos */ {color:#404040; font-size:10px; }
.CUERPO .resalta /* texto resaltado */ {font-size:11px; font-weight:bold; color:#353535; font-style:italic;}
.CUERPO .amarillo /* texto amarillo */ {color:#F8DA07;}
.CUERPO .azul /* texto azul */ {color:#003366;}
.CUERPO .azuldestacado /* texto azul destacado */ {color:#003366;font-weight:bold;}
.CUERPO .blanco /* texto blanco */ {color:#FFFFFF;}
.CUERPO .negro /* texto negro */ {color:#000000;}
.CUERPO .rojo /* texto rojo */ {color:#CC0000;}
.CUERPO .naranjo /* texto naranjo */ {color:#FF6000;}
.CUERPO .verde /* texto verde */ {color:#339900;}
.CUERPO .gris /* texto gris */ {color:#5C5C5C;}
/*/vtxt*/

/*vtxt_table*/
.CUERPO .table-right {float:right;}
.CUERPO .table-left {float:left;}
.CUERPO .table-center {margin:auto;}
/*/vtxt_table*/

/*vtxt_tr*/
.CUERPO .tr-estilo-fondogris {background-color:#dddddd;}
.CUERPO .tr-estilo-fondoazul {background-color:#1C2B45; color:#FFFFFF; font-weight:bold;}
/*/vtxt_tr*/

/*vtxt_td*/
.CUERPO .td-estilo-fondogris {background-color:#dddddd;}
.CUERPO .td-estilo-fondoazul {background-color:#1C2B45; color:#FFFFFF;font-weight:bold;}
/*/vtxt_td*/

/* estilos obligatorios para tablas en vtxt */
.CUERPO table {margin:3px;padding:2px 2px 2px 2px; border-collapse: collapse;empty-cells: show;}
.CUERPO td {margin:1px; padding:2px 2px 2px 2px;vertical-align:middle;}
.CUERPO img {margin:3px;}