RTE中往往用到自定义样式。解决方法如下。
RTE.default {
buttons {
#***** new classes for links
link {
properties {
class {
allowedClasses := addToList(btn v2 color2 icoAfter icoArrRWhite, btn v3 color1)
}
}
}
}
}
showButtons = textstyle, textstylelabel
RTE.default.proc.allowedClasses := addToList(font10Red,font11RedBold)
RTE.default.contentCSS = fileadmin/templates/inc/css/rte.css 定义为自定义文件.
添加/* Three inline text colors taken from the color scheme of CSS Styled Content extension.*/
span.important { color: #8A0020; }
span.name-of-person { color: #10007B; }
span.detail { color: #186900; }
span.font10Red { color: #B1071D; font-size:10px;}
span.font11RedBold { color: #B1071D; font-weight:bold; font-size:11px;}
效果如下：
Paragraph,table等类似.
详细：
Dem htmlArea RTE eigene CSS Klassen hinzufügen
Die CSS-Klassen werden an vier verschiedenen Stellen definiert:
- in der unter
RTE.default.contentCSSangegebenen CSS-Datei. - im Objektpfad
RTE.classes: hier werden der CSS-Name der Klasse und der in der Auswahlliste anzuzeigende Titel festgelegt. Wenn keine CSS-Datei verwendet wird, stehen hier auch die Formatierungsangaben. - im Objektpfad
RTE.default.proc.allowedClasses; dort müssen durch Komma abgetrennt alle Klassen angegeben werden, die den Weg vom RTE in die Datenbank überleben sollen. - in eine der folgenden Kommalisten, die darüber entscheiden, welche Klassen in welcher Auswahlliste erscheinen sollen:
RTE.default.classesParagraph(Klassen, die in der Auswahl für Blockelemente erscheinen sollen)RTE.default.classesCharacter(Klassen für Inline-Elemente)RTE.default.classesTable(Klassen für Tabellen-Elemente)RTE.default.classesTD(Klassen für Tabellenzellen, <td> und <th>)RTE.default.classesImage(Klassen für Bilder)RTE.default.classesLinks(Klassen für Links) -die KlasseRTE.classesAnchorbietet aber mehr OptionenRTE.classesAnchor,RTE.default.classesAnchorundRTE.default.classesAnchor.defaultRTE.default.showTagFreeClasses(Klassen, deren HTML Element nicht definiert ist)
Eine Zuweisungweisung wie classesParagraph = paragraph-1 überschreibt die Standardeinstellungen. Die Funktion addToList kann benutzt werden, um Klassen zu den Standartklassen hinzuzufügen: classesParagraph := addToList(paragraph-1)
Die Konfiguration gehört in die TSconfig der Rootpage. (Seiteneigenschaften bearbeiten -> Options)
Eine Beispiel Konfiguration:
RTE.default {
contentCSS = fileadmin/css/main/typo3-RTE.css
showTagFreeClasses=1
classesCharacter := addToList(align-left, align-center, align-right)
classesParagraph := addToList(paragraph-1)
classesTable := addToList(table-1, table-2)
classesTD := addToList(cell-1)
classesAnchor = internal-link
defaultLinkTarget = _top
classesImage := addToList(pic-1)
proc {
allowedClasses := addToList(align-left, align-center, align-right, paragraph-1, table-1, table-2, cell-1, pic-1)
denyTags < RTE.default.buttons.inserttag.denyTags
}
FE {
proc {
allowedClasses < RTE.default.proc.allowedClasses
}
}
}
Eine Beispiel CSS Datei:
/* #############################
** ### classesCharacter ########
** #############################
*/
span.align-left {text-align:left;}
span.align-center {text-align:center;}
span.align-right {text-align:right;}
/* #############################
** ### classesParagraph ########
** #############################
*/
p.paragraph-1 {font-weight:bold;}
/* #############################
** ### classesTable ########
** #############################
*/
table.table-1 {border:1px solid #f0f0f0;}
table.table-2 {width:100%;}
td.cell-1 {padding:10px;}
/* #############################
** ### TagFreeClasses ##########
** #############################
*/
.red {color:#ff0000;}
.green {color:#00ff00;}
————TYPO3 4.6+—————
RTE für zusätzliche Klassen anpassen
Am Besten benützt man den RTE mit den Typical Einstellungen (Default configuration settings). Dabei sind schon einige Klassen vordefiniert, die man anpassen und benützen kann. Zusätzlich kann man weitere Klassen hinzufügen und die voreingestellten entfernen. Die default.css befindet sich in der Extension.
Einstellungen für TYPO3 ab Version 4.6:
RTE.default {
#angepasste CSS Datei in fileadmin speichern
contentCSS = fileadmin/../default.css
}
## Klassen hinzufuegen
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)
}
## nicht benoetigte Klassen entfernen
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)
## Klassen fuer die RTE Auswahlfelder definieren
RTE.classes.error {
name = Error in Red
value = color: #FF0000;
font-weight: bold;
background-color: #ffff00;
}
RTE.classes.small {
name = Small Font
value = font-size: 80%;
}
RTE.classesAnchor.arrowlink {
name = Link with an Arrow
value = background: url(fileadmin/../arrow1.gif) no-repeat 100% 0%;
}
Veraltete Einstellungen für TYPO3 bis Version 4.5:
RTE.default {
#angepasste CSS Datei in fileadmin speichern
contentCSS = fileadmin/../default.css
}
#Klassen hinzufuegen
RTE.default.proc.allowedClasses := addToList(error, small, arrowlink)
RTE.default.classesParagraph := addToList(error, small)
RTE.default.classesCharacter := addToList(small)
RTE.default.classesAnchor := addToList(arrowlink)
#nicht benoetigte Klassen entfernen
RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
RTE.default.proc.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
RTE.classes := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
#Klassen fuer die RTE Auswahlfelder definieren
RTE.classes.error {
name = Error in Red
value = color: #FF0000; font-weight: bold; background-color: #ffff00;
}
RTE.classes.small {
name = Small Font
value = font-size: 80%;
}
RTE.classesAnchor.arrowlink {
name = Link with an Arrow
value = background: url(fileadmin/../arrow1.gif) no-repeat 100% 0%;
}
Deprecated RTE Eigenschaften ersetzen
Ab der TYPO3 Version 4.8 fallen einige RTE Eigenschaften weg. Diese sind jetzt schon als "deprecated" in der Version 4.6.* gekennzeichnet. Im Installtool/Update Wizard kann man die Liste der neuen Eigenschaften einsehen. Man wird auch darüber informiert auf welchen Seiten die veraltete Eigenschaften noch eingesetzt werden. Die Standard RTE Einstellungen werden mit dem Update Wizard aktualisiert. Eigene PageTSconfig Einstellungen sollten in Zukunft mit den neuen RTE Eigenschaften definiert werden.
Hier ein paar Beispiele was sich ändert:
deprecated: RTE.default.classesParagraph := addToList(error)
new: RTE.default.buttons.blockstyle.tags.div.allowedClasses:= addToList(error)
deprecated: RTE.default.classesCharacter := addToList(small)
new: RTE.default.buttons.textstyle.tags.span.allowedClasses := addToList(small)
deprecated: RTE.default.classesAnchor := addToList(arrowlink)
new: RTE.default.buttons.link.properties.class.allowedClasses := addToList(arrowlink)
deprecated: RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
new: RTE.default.buttons.blockstyle.tags.div.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2)
deprecated: RTE.default.classesAnchor := removeFromList (detail,external-link,external-link-new-window,internal-link-new-window,internal-link,download,mail)
new: RTE.default.buttons.link.properties.class.allowedClasses := removeFromList(external-link,external-link-new-window,internal-link-new-window,internal-link,download,mail)
zurück