Hallo,
ich habe nach Anleitung von creativesites.de für den RTE HTML-Area eine RTE-Konfiguration und CSS-Datei angelegt.
Allerdings habe ich das Problem, dass ich den CSS-Stil der gesamten Tabelle nicht bearbeiten kann. Das Feld ist nicht freigeschaltet.
Möchte durch Einstallung eine Tabelle mit einer Hintergrundfarbe versehen.
Was muß ich tun, damit das Feld freigeschaltet wird?
Gleiches gilt für den Textstil bei Textelementen.
Irgendwo anders habe ich gelsen, dass es Probleme beim Parsen mit den Erweiterung CSS-Style Contend gibt, ist das bei dieser Konfiguartion auch der Fall?
Wenn ja wie läßt sich das umgehen?
Leider bin ich Anfänger, suche nun seit mehreren Stunden und wäre dankbar, wenn mir jemand auf die Sprünge hilft.
Danke!
###############################################################################
#
#--- RTE Konfiguration -------------------------------------------------------
# - fuer die Einstellung TYPICAL des RTE
#
###############################################################################
#-- Aktiviere RTE fuer alle User
setup.default.edit_RTE = 1
###############################################################################
# RTE.default - konfiguriert die RTEs für alle Tabellen, alle Felder und
# alle Content-Typen. Einstellungen, die mit RTE.default
# vorgenommen werden, gelten somit nicht nur für Inhalte,
# die in der Tabelle tt_content gespeichert sind sondern z.B.
# auch für tt_news.
###############################################################################
RTE.default {
# Markup Optionen (Word Foramtierungen entfernen etc.)
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = sdfield
# Ein- oder Ausblenden des Color Picker bei der Auswahl der Textfarbe
disableColorPicker = 0
# blendet Statusbar in htmlarea aus
showStatusBar = 0
# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
disableSpacingFieldsetInTableOperations = 0
disableAlignmentFieldsetInTableOperations = 0
disableColorFieldsetInTableOperations = 0
disableLayoutFieldsetInTableOperations = 0
disableBordersFieldsetInTableOperations = 0
# Tabellen Optionen in der RTE Toolbar als Button vertecken oder anzeigen
hideTableOperationsInToolbar = 0
# Buttons die gezeigt/versteckt werden (Standardliste der Einstellung Typical)
showButtons = headline, fontstyle, fontsize, size, textcolor, textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, chMode, showhelp, about,
hideButtons = formatblock, strikethrough,lefttoright, righttoleft, textindicator, emoticon, user, spellcheck, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste
# Fuege der Standardliste der RTE Typical- Einstellung noch folgende Buttons hinzu
showButtons := addToList(textcolor, bgcolor, size, fontsize )
# Sortierung der RTE Buttons
toolbarOrder = headline, bold, italic, underline, left, center, right, orderedlist, unorderedlist, findreplace, insertcharacter, undo, redo, showhelp, about, textstylelabel, textstyle, blockstylelabel, blockstyle, image, link, removeformat, line, table, toggleborders, tableproperties,rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, textcolor,chMode
# Haelt die RTE Icons gruppiert zusammen
keepButtonGroupTogether = 1
keepToggleBordersInToolbar = 1
}
###############################################################################
#-- Verwendung eines eigenen Stylesheets fuer den RTE
###############################################################################
# Einstellungen RTE
RTE.default {
# Zuweisung der CSS-Datei
contentCSS = fileadmin/styles/style_rte.css
# zeige alle CSS-Klassen die in style_rte.css vorhanden sind im RTE an
#(Dropdown-Box - Absatz)
showTagFreeClasses = 1
# Verwende im RTE den benutzerdefinierten Stylsheet und ueberschreibe die
# vorgegebenen Standardformateierungen des RTE
ignoreMainStyleOverride = 1
}
# Erlaubte span Klassen aus der CSS-Datei (span wird somit nicht wegparsed)
RTE.config.tt_content.bodytext.proc.allowedClasses = author
###############################################################################
# RTE.default.proc - ist ein Objekt, das die Konfiguration für die
# Transformation des Inhaltes zwischen RTE-Feld und Datenbank
# beinhaltet. Die Konfigurationsoptionen gelten für alle in
# TYPO3 verwendbaren RTEs und werden über die Klasse
# t3lib_parsehtml_proc gesteuert.
###############################################################################
RTE.default.proc {
# Überschreibe CSS Angaben aus dem TypoScript
overruleMode = ts_css
# tags die erlaubt / verboten sind
allowTags = font, size, fontsize, table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center, bgcolor, bg, color, underline
denyTags =
# br wird nicht zu p konvertiert
dontConvBRtoParagraph = 1
# Tags die ausserhalb von p, div erlaubt sind
allowTagsOutside = img,hr,center
# Erlaubte Attribute in p, div Tags
keepPDIVattribs = class,style,id
}
###############################################################################
# HTML Parser Einstellungen - Inhalt ins Frontend
###############################################################################
HTMLparser_rte {
# tags die erlaubt/verboten sind
# uebernehme die Einstellungen von RTE.default.proc
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags
# tags die untersagt sind
removeTags =
# entfernt html-kommentare
removeComments = 1
}
###############################################################################
# Speichere in Datenbank - Inhalt in die Datenbank
###############################################################################
entryHTMLparser_db = 1
entryHTMLparser_db {
# tags die erlaubt/verboten sind
#uebernehme die Einstellungen von RTE.default.proc
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags
# Falls diese Tags auf der "remove"- Liste stehen, so entferne sie von dieser
removeTags := removeFromList(font,bgcolor,underline, u)
# Erlaube folgende Attribute
tags.font.allowedAttribs = color, size, bgcolor,fontsize
}
###############################################################################
# Entfernt Images vor den Links, ("erstelle Link"- Funktion im RTE)
###############################################################################
RTE.classesAnchor {
internalLink {
image >
}
externalLink {
image >
}
externalLinkInNewWindow {
image >
}
internalLinkInNewWindow {
image >
}
download {
image >
}
mail {
image >
}
}
###############################################################################
# Den Button "Textfarbe" konfigurieren.
# Anlegen von Farben, welche dann fuer den Redakteur auswaehlbar sind.
#
# - angelegte Farben muessen zusaetzlich noch per CSS in den RTE Stylesheet
# geschrieben werden
# - die benoetigten Attribute und Tags sind unter RTE.default.proc.entryHTMLparser_db
# zu erlauben (color)
#
###############################################################################
RTE.default.showButtons := addToList(textcolor, bgcolor)
RTE.default.proc.entryHTMLparser_db.tags.span.fixAttrib.style.unset >
RTE.default.proc.entryHTMLparser_db.removeTags := removeFromList(font)
RTE.default.removeTags := removeFromList(font)
RTE.default.proc.entryHTMLparser_db.tags.font.allowedAttribs = color
# Farben definieren
# ausserhalb der gewscheiften Klammern steht die Bezichnung der Klasse, welche dann per CSS definiert wird
# name: Dies ist der Name der Farbe, den der Redakteur neben dem Farbfeld sieht
# value: der Farbert
RTE.colors {
standard {
name = standard
value = #666666
}
dunkelgrau {
name = dunkelgrau
value = #666666
}
grau {
name = grau
value = #999999
}
hellgrau {
name = hellgrau
value = #cccccc
}
weiss {
name = weiss
value = #FFFFFF
}
schwarz{
name = schwarz
value = #000000
}
}
# die benoetigten Attribute und Tags erlauben
RTE.default.proc.entryHTMLparser_db.tags.font.allowedAttribs = color, size, bgcolor,fontsize
# Auflisten aller Namen der definierten Farben, welche im RTE sichtbar sein sollen
RTE.default.colors = schwarz, dunkelgrau, grau, hellgrau, weiss,standard
###############################################################################
# Verwende für die Ausgabe im FE die gleichen Einstellungen wie im Editor des RTE
###############################################################################
RTE.default.FE.proc < RTE.default.proc
RTE.default.FE < RTE.default
###############################################################################
# Verwende die gleichen Einstellung zur BEreinigung von Inhatl,
# welcher in den Editor kopiert wurde, wie bei RTE.default.proc.entryHTMLparser_db
###############################################################################
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
###############################################################################
# Breite des RTE in Fullscreen-Ansicht
###############################################################################
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%
TCEFORM.tt_content.bodytext.RTEfullScreenHeight= 500px
Nicht vergessen: Das CSS- File muss mittels
@import url("style_rte.css");
noch im Main- CSS- File der Website eingebunden werden!
Passendes Beispiel- CSS- File:
/* CSS Document */
body{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
margin:0;
padding:0;
color:#202020;
background-color:#fff;
}
a {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#9AC507; }
a.aktiv {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#9AC507;}
a:hover {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#9AC507;}
h1,h2,h3,h5 {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:bold;}
h1{ font-size:16px; }
h2{ font-size:14px; }
h3{ font-size:11px; }
h4{ font-size:10px; }
img {border:0;}
a img{border:0;}
p.bodytext a img{border:0; margin:0; padding:0;}
p.bodytext img{border: 0;margin:0; padding:0;}
p { font-size:11px; padding:0 0 0 0; margin:0 0 0 0;}
p.bodytext {border:0; margin:0; padding:0;font-size:11px; }
.maincontent p.bodytext{margin:0; padding:0; line-height:1.4em;}
/* ***************************************************************************************/
.weiss {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#ffffff;
background-color:transparent;
}
.altweiss {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#F2F2F2;
background-color:transparent;
}
.hellesgrau {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#dddddd;
background-color:transparent;
}
.hellgrau {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color:transparent;
color: #BFBFBF;
}
.grau {
color:#888888;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color:transparent;
}
.dunkelgrau{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#3B3B3B;
background-color:transparent;
}
.hellschwarz {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#202020;
background-color:transparent;
}
.schwarz {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#000000;
background-color:transparent;
}