[Typo3-UG Spain] RTE How To

Wed Jan 28 18:16:53 CET 2004

Hola a todos,

como prometí aquí os mando un breve How To para configurar correctamente el
RTE y que se pueda copiar y pegar texto de Word manteniendo el formato en el
RTE y en el Frontend. Tengo que decir que esta configuración es la básica.
Lo suficiente para que no de problemas de visualizarse distinto de lo que
metemos. Espero que os sirva:

[TSCONFIG en el encabezado de página a partir del cual queremos que se
aplique]

############################################################################
####
# Configuramos Typo3 para que el usuario SOLO pueda introducir contenidos en
la columna NORMAL
############################################################################
####

mod.SHARED.colPos_list = 0

############################################################################
####
#     Define la fuente por defecto  en el RTE. Sólo afecta al Backend
#     Lo mejor es definirla igual que en nuestra hoja de estilos para que
veamos el texto
############################################################################
####

RTE.default {

  mainStyle_font = Verdana
  mainStyle_size = 9
  mainStyle_color = black

# Quitar el comentario de las líneas si se quiere identar el texto

#  mainStyleOverride_add.P = line-height : 180%; text-indent : 20px;
#  mainStyleOverride_add.DIV < .mainStyleOverride_add.P
}

############################################################################
####
#    Definir la anchura de la ventana del RTE
############################################################################
####

TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 450

############################################################################
####
#    Definición de las clases de nuestra hoja de estilos para que las
reconozca el RTE
############################################################################
####

RTE.classes {
#    Estas son clases de ejemplo
  bodyText {
   name = The bodytext
   value = font:bold; color:navy;
  }
  quote {
   name = Quotes
   value = font:italic 15px; margin-left:20px;
  }
}

RTE.default.classesParagraph = bodyText, quote

# Descomentar esta línea si queremos ocultar los estilos que lleva por
defecto el RTE al pulsar en estilos de párrafo

# RTE.default.hidePStyleItems = *

############################################################################
####
#    No permitir que los saltos de línea se conviertan en párrafos
############################################################################
####

RTE.default.proc {
dontConvBRtoParagraph = 1
}

############################################################################
####
#    Procesamientos que se deben realizar para ajustarse a lo que queremos
para nuestro sitio
#    (Personalizar a nuestros gusto o necesidades)
############################################################################
####

RTE.default {

  proc {

      #dontConvAmpInNBSP_rte=1

    #    Preservar las tablas que introduzcamos

    # preserveTables=1

    #    Cuando las etiquetas <P> o <DIV> se convierten para almacenarlas en
la base de datos, las etiquetas
    #    se mantienen. Sin embargo, activando esta opción forzamos a que se
conviertan a lo que pongamos.

     remapParagraphTag=P

    #    Clases permitidas cuando el contenido se guarde en la base de datos

     #allowedClasses=...............

    #    No proteger las etiquetas desconocidas

    #dontProtectUnknownTags_rte=1

    #     Etiquetas para desabilitar o prohibir
    #     Posibles valores:
b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquot
e,strike,span

    denyTags=span

    #    Si tenemos etiquetas <P> o <DIV> dentro de una <FONT>, con ésto
metemos el contenido de las etiquetas <P> o
    #    <DIV> entre la etiqueta <FONT> y la etiqueta <FONT> externa la
quita.

     #internalizeFontTags=1
  }

  #    Los botones indicados aquí se añaden a la lista que configuramos en
TCA

showButtons=cut,copy,paste,formatblock,class,fontstyle,fontsize,textcolor,bo
ld,italic,underline,left,center,right,orderedlist,unorderedlist,outdent,inde
nt,link,table,bgcolor,image,emoticon,line,user,chMode

  #    Ocultar los botones del RTE a nivel general
  #    Posibles valores:
cut,copy,paste,formatblock,class,fontstyle,fontsize,textcolor,bold,
  #
italic,underline,left,center,right,orderedlist,unorderedlist,outdent,
  #
indent,link,table,bgcolor,image,emoticon,line,user,chMode

#hideButtons=fontstyle,textcolor,table,bgcolor,image,emoticon,line,user,chMo
de

  #    Desactiva los tamaños de fuente que queramos de los que hay en el
selector de tamaño
  #    Los posibles valores son 1-7

  #hideFontSizes=

  #    Desactiva las fuentes que queramos en el selector de fuente
  #    Los posibles valores son:
  # 1: Arial
  # 2: Arial Black
  # 3: Verdana
  # 4: Times New Roman
  # 5: Garamond
  # 6: Lucida Handwriting
  # 7: Courier
  # 8: Webdings
  # 9: Wingdings
  # * quita todas

  #hideFontFaces=4,5,6,7,8,9

  #    Oculta los estilos que lleva el RTE por defecto

  #hidePStyleItems=H1,H2,H3,H4,H5,H6,PRE

  #    Oculta el selector de color

  #disableColorPicker=1

}

[TEMPLATE RECORD a partir del que queremos aplicarlo]

[CONSTANTES]

###################################################
#      Hacer compatible el contenido con el RTE
#Así se alineará todo porque lo mete todo entre una etiqueta <P>
###################################################

content.RTE_compliant = 1

[SETUP]

####################################################
#   Hacer visibles las clases definidas en el RTE
####################################################

page.insertClassesFromRTE=1

##############################################################
# Quita los atributos de estilo de las etiquetas P y PRE para que coja las
nuestras
##############################################################

tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
  P.style=
  PRE.style=
}

###############################################
# Poner etiquetas a las líneas que no las tengan
###############################################

tt_content.text.20.parseFunc {
 nonTypoTagStdWrap.encapsLines.nonWrappedTag >
 nonTypoTagStdWrap.encapsLines.wrapNonWrappedLines = <p>|</p>
}

###############################################
#    Configuración de las listas
#    (Personalizar a gusto de cada uno)
###############################################

tt_content.text.20.parseFunc.tags.typolist.default.wrap = <ul> | </ul>
tt_content.text.20.parseFunc.tags.typolist.default.split.1.wrap =
tt_content.text.20.parseFunc.tags.typolist.1.fontTag = <ol> | </ol>
tt_content.text.20.parseFunc.tags.typolist.1.split.1.wrap =

# ##############################################
#   Configurar cómo se visualizan las tablas
#   (Personalizar a gusto de cada uno)
###############################################

tt_content.text.20.parseFunc.externalBlocks {
  table.stdWrap.HTMLparser = 1
  table.stdWrap.HTMLparser {
    tags.table.overrideAttribs = border=0 cellpadding=2 cellspacing=1
style="margin-top:10px; margin-bottom:10px;"
    tags.tr.allowedAttribs=0
    keepNonMatchedTags=1
  }
  table.HTMLtableCells {
    default.tagStdWrap.HTMLparser=1
    default.tagStdWrap.HTMLparser.tags.td.overrideAttribs = valign=top
bgcolor="#eeeeee"
    1.tagStdWrap.HTMLparser=1
    1.tagStdWrap.HTMLparser.tags.td.overrideAttribs = valign=top
bgcolor="#cccccc"
    1.stdWrap.wrap=<B>|</B>
  }
}

Después de ésto tenemos que definir en la hoja de estilos nuestras clases y
aplicarlas a los textos, que al pasar al RTE consevarán la clase.

Espero que os sirva de gran ayuda, porque a mi me volvió loco, y no se si
estará totalmente configurado. Hasta que no vaya probando cosas no me daré
cuenta.

Que sirva de ejemplo para aquellos que en la lista inglesa se negaban a dar
un código de ejemplo porque decían que para eso se han calentado ellos la ca
beza intentando aprender.

Un saludo amigos