La barra de herramientas es familiar de programas como Word u OpenOffice, por lo que los editores pueden encontrar rápidamente su camino alrededor.
El editor es parte del código fuente de TYPO3 como una extensión del sistema, por lo que siempre coincide con la versión respectiva. Alternativamente, otros editores también se pueden utilizar en TYPO3. Sin embargo, al actualizar la versión de TYPO3, por lo general es necesario esperar hasta que el respectivo editor alternativo también se haya adaptado a la nueva versión. Por lo tanto, recomendamos utilizar el editor "Estándar".
La apariencia y las funciones pueden configurarse individualmente. Las instrucciones de esta página muestran las posibilidades.
Configurar el botón "Insertar como texto simple
Como también hemos descrito en nuestra guía en vídeo para editores de TYPO3 en el RTE, a menudo surgen problemas cuando se desea utilizar texto de documentos de Word o de otros sitios web a través de copiar y pegar en el RTE, por ejemplo. Esto se debe a que se puede adoptar un formato de texto no deseado, que en el peor de los casos puede incluso destruir el diseño de una página.
Sin embargo, se puede añadir un botón adicional en el RTE para los usuarios del backend TYPO3, que permite insertar textos directamente sin formato. Este botón también puede configurarse como Activo por defecto.
Las siguientes líneas de Typoscript deben copiarse en el campo TSconfig de la página raíz:
# añadir el botón pastetoggle a la barra de herramientas RTE RTE.default.showButtons := addToList (pastetoggle) RTE.default.buttons.pastetoggle.setActiveOnRteOpen = 1
Impedir la vinculación automática
La etiqueta PRE puede utilizarse para mostrar un código en el sitio web. Lamentablemente, las URL insertadas en el RTE, como http:// jweiland.net, se convierten automáticamente en un enlace real. En este caso, sin embargo, usted no quiere esto. Por lo general, puede evitarlo para todos los enlaces insertados en el RTE de la siguiente manera:
lib.parseFunc_RTE.makelinks >
Sin embargo, esto no tiene sentido, ya que la vinculación automática quita trabajo al editor.
En su lugar, puede personalizar la salida sin enlace automático sólo para esta etiqueta PRE, que normalmente no debería contener un enlace. Si aún desea establecer un enlace, puede crearlo manualmente.
lib.parseFunc_RTE.externalBlocks := addToList(pre) lib.parseFunc_RTE.externalBlocks { pre.stripNL=1 pre.
stdWrap.parseFunc = < lib.parseFunc pre.stdWrap.parseFunc.makelinks = 0 }
Eliminar atributos en la tabla RTE
Para evitarlo, debe introducir lo siguiente en PageTSconfig:
RTE.default.proc.entryHTMLparser_db.tags.table { fixAttrib.style.unset = 1 fixAttrib.width.unset = 1 fixAttrib.height.unset = 1 }
Así: <table class="contenttable" style="width:400px; height:240px">...
lo siguiente:
<table class="contenttable">...
Esto también funciona de la misma manera para las etiquetas <tr> y <td>:
RTE.default.proc.entryHTMLparser_db.tags.tr { fixAttrib.style.unset = 1 fixAttrib.width.unset = 1 fixAttrib.height.unset = 1 }
RTE.default.proc.entryHTMLparser_db.tags.td { fixAttrib.style.unset = 1 fixAttrib.width.unset = 1 fixAttrib.height.unset = 1 }
Personalizar RTE para clases CSS adicionales
Lo mejor es utilizar el RTE (Rich Text Editor) con la configuración típica (Default configuration settings). Algunas clases ya están predefinidas, que se pueden personalizar y utilizar. También puede añadir más clases y eliminar las clases predeterminadas. El default.css se encuentra en la extensión.
RTE.default {
#guardar el archivo CSS personalizado en fileadmin
contentCSS = fileadmin/../default.css
}
## añadir clases
RTE.default.proc.allowedClasses := addToList(error, small, arrowlink)
RTE.default.buttons {
blockstyle.tags.div.allowedClasses := addToList(error, small)
textstyle.tags.span.allowedClasses := addToList(small)
link.properties.class.allowedClasses := addToList(arrowlink)
}
## eliminar clases innecesarias
RTE.default.proc.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
RTE.default.buttons {
blockstyle.tags.div.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2) }
RTE.classes := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
## Definir clases para los campos de selección RTE
RTE.classes.error {
name = Error en rojo
value = color: #FF0000;
font-weight: bold;
color de fondo: #ffff00;
}
RTE.classes.small {
name = Fuente pequeña
value = tamaño de fuente: 80%;
}
RTE.classesAnchor.arrowlink {
name = Enlace con una flecha
value = background: url(fileadmin/../arrow1.gif) no-repeat 100% 0%;
}
Añadir clases CSS a las tablas
Si crea tablas en el RTE (Rich Text Editor), a estas tablas se les asigna por defecto la clase CSS contenttable. En las propiedades de la tabla, también puede asignarle una clase con fondo amarillo o gris. En este caso, a la tabla se le asigna la clase CSS csc-frame-frame1 o csc-frame-frame2.
En este tutorial, le mostraremos ahora cómo asignar sus propias clases CSS a una tabla.
Todas las opciones disponibles en el RTE se integran con la ayuda de un archivo CSS. Por ejemplo, puede escribir lo siguiente en un archivo CSS: p.myClass {border: 1px solid green;}. El sistema detrás del RTE sabe que "p" es un elemento de bloque y añade la clase myClass a la lista de opciones para los elementos de bloque. Esto también funciona de la misma manera para las tablas.
Por defecto, el RTE carga las opciones del archivo CSS: typo3/sysext/rtehtmlarea/res/contentcss/default.css. Para añadir sus propios valores, debe copiar este archivo en fileadmin/.
Ahora puede editar el archivo. Ahora añada la nueva clase en algún lugar de este archivo:
table.newclass {borde: 1px verde sólido;}Las especificaciones CSS dadas aquí no afectan al frontend. Estas especificaciones sólo dan estilo al resultado dentro del propio RTE.
Después de guardar el archivo, es necesario escribir algunos cambios en pageTSconfig.
PageTSconfig:
# Cargar nuestro archivo CSS RTE-default copiado y revisado RTE.default.contentCSS = fileadmin/default.css # El RTE puede asignar la clase "newclass" a una tabla RTE.default.buttons.blockstyle.tags.table.allowedClasses := addToList(newclass) # La clase "newclass" puede conservarse al guardar RTE.
default.proc.allowedClasses := addToList(newclass) # Sólo si también desea aplicar estilo a la opción dentro de la lista de selección: RTE.classes.newclass { name = Esta es mi nueva clase con borde verde value = border: 3px solid green; }
Nuestra nueva clase CSS también debe estar permitida para la salida en el frontend. Esto se debe a que sólo las clases CSS que están en esta lista también se transfieren al frontend.
Configuración de TypoScript:
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list := addToList(newclass)
Después de estos pasos, la nueva clase CSS puede ser asignada a la tabla. Esta nueva clase puede ahora ser estilizada usando un archivo CSS que hayas creado para el frontend.
Configurar clases CSS para tablas rayadas
Si las filas de la tabla en el RTE deben tener colores de fila alternos, el formateo es posible si se pueden crear diferentes clases CSS para las filas pares e impares. Esto es posible con la siguiente configuración:
PageTSconfig:
RTE.default.contentCSS = fileadmin/rte.css RTE.classes.stripedtable { name = Tabla rayada alternando.
rows { # 0 = par, 1 = impar
startAt = 1 oddClass = fila-impar
evenClass = fila-par oddHeaderClass = fila-impar evenHeaderClass = fila-par } } RTE.
mutuallyExclusiveClasses = fila-impar,fila-par RTE.default.buttons.blockstyle.tags { table.allowedClasses := addToList (stripedtable) tr.
allowedClasses := addToList (row-odd, row-even) } RTE.default.proc.allowedClasses := addToList (row-even,row-odd,stripedtable)
Las definiciones de las clases en RTE se almacenan en rte.css. Para el frontend, las clases deben definirse en los archivos CSS correspondientes.
Configurar:
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = contenttable, stripedtable
Activar colores de texto predefinidos para los editores
Puede poner a disposición del RTE determinados colores de texto entre los que podrá elegir. Una opción es ofrecer una selección a través del botón de color de texto:
##Mostrar botón de color de texto RTE.default.showButtons := addToList (textcolor) ##Ocultar selector de color RTE.default.disableColorPicker = 1 RTE.default.colors = color1, color2, color3 RTE.
colores { color1 { nombre = azul oscuro valor = #100959 } color2 {
nombre = verde valor = #19730C } color3 {
nombre = terra valor = #B24716 } }
Sin embargo, si el editor conoce el valor hexadecimal de un color, puede utilizarlo.
Segunda opción: poner las clases de color a disposición del editor
##Habilitar clases globales RTE.default.buttons.textstyle.showTagFreeClasses = 1 RTE.default.contentCSS = fileadmin/.../rte.css RTE.default.proc.allowedClasses := addToList(darkblue,green,terra) RTE.default.buttons.textstyle.tags.span.
allowedClasses := addToList(darkblue,green,terra) RTE.classes.
darkblue { name = darkblue value = color:
#100959; } RTE.classes.
verde { nombre = Verde valor = color:
#19730C; } RTE.classes.
terra{ name = Terra value = color: #B24716; }
Las clases todavía tienen que ser definidos en rte.css y en el archivo CSS para la salida.
.darkblue { color: #100959;} .green { color: #19730C;} .terra{ color: #B24716;}