Hallo Community,
nach wochenlangem versuchen, googlen und Manuals studieren komm ich bei o.g. Thema nicht weiter. Ich bitte Euch mir bei der Konfiguration der PageTSConfig und bei den Parsermodifikationen unter die Arme zu greifen.
Ich arbeite mit
TYPO3 | 4.1
TemplaVoila | 1.3.0
htmlArea RTE | 1.5.1
Folgende Accessibility - Vorraussetzungen des Styleguides mit dem ich arbeiten muss:
Links müssen Accessibility - Icons erhalten. Der HTML Quelltext dazu muss folgendermaßen aussehen.
<span class="iconlink">
<img src="/fileadmin/images/icon_link.gif" alt="Weiter: " width="7" height="5" />
<a href="404.html">Beispiel-Link</a>
</span>
Für externe Links gilt analog folgender HTML Quelltext:
<span class="iconlink">
<img src="fileadmin/images/icon_newwindow.gif" alt="" width="11" height="10" />
<a href="404.html" title="Öffnet neues Fenster" target="_blank">Externer Beispiel-Link</a>
</span>
Analog wird dies für weitere Typen (Mail, Dateien etc.) gefordert.
Die Icons befinden sich im 'fileadmin/images'-Verzeichnis.
Der RTE soll nun beim Erstellen eines Links o.g. Quelltext je nach Linktypus generieren und mgl. auch so in die DB parsen.
Die htmlArea RTE-Konfiguration:
enableAccessibilityIcons = true
Die Boardmittel RTE.classesAnchors und RTE.default.classesAnchors.default brachten allerdings keinen Erfolg (Begründung weiter unten).
Hier mein PageTSConfig:
############################################################
# Index: CSS Styled Content overwrites Version ALPHA 1.0.0 #
############################################################
# 1 CSS Styled Content overwrite #
############################################################
# Index: RTE configuration Version ALPHA 1.0.0 #
############################################################
# 100 RTE configuration #
# 101 RTE interface classes #
# 102 tables overwrite #
# 103 RTE Clean up #
# 104 CSS classes #
# 105 Enabled colors #
# 106 Transformations #
# 107 Miscellaneous #
# 108 Color definitions #
############################################################
##################################
# 1 CSS Styled Content overwrite #
##################################
### Rewrite header labels
TCEFORM.tt_content.header_layout.altLabels {
1 = Überschrift H1
2 = Überschrift H2
3 = Unterüberschrift H2
4 = Überschrift H3
5 = Überschrift H4
}
TCEFORM.tt_content.header_layout.addItems {
6 = Überschrift H5
7 = Überschrift H6
}
#########################
# 100 RTE configuration #
#########################
RTE {
### Clean RTE from extension specific preferences
config >
FE >
classes >
#############################
# 101 RTE interface classes #
#############################
classes {
align-left {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
value = text-align: left;
}
# END RTE.classes.align-left
align-center {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
value = text-align: center;
}
# END RTE.classes.align-center
align-right {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
value = text-align: right;
}
# END RTE.classes.align-right
}
# END RTE.classes
### ATTENSION: RTE.classesAnchor couldn't be used. Because the Anchors mustn't have a <class>-Attribute. Instead accessibility icons must wrapped in front of the anchor (Screenreader support) ###
### STATE: No solution yet! ###
RTE.classesAnchor {
# QUESTION: May I insert the wrap here? Don't think so.
# wrap = <span class="iconlink">|</span>
externalLink {
type = url
image = fileadmin/images/icon_newwindow.gif
altText =
titleText =
}
# END RTE.classesAnchor.externalLink
externalLinkInNewWindow {
type = url
image = fileadmin/images/icon_newwindow.gif
altText =
titleText =
}
# END RTE.classesAnchor.externalLinkInNewWindow
internalLink {
type = page
image = fileadmin/images/icon_link.gif
altText =
titleText =
}
# END RTE.classesAnchor.internalLink
internalLinkInNewWindow {
type = page
image = fileadmin/images/icon_link.gif
altText =
titleText =
}
# END RTE.classesAnchor.internalLinkInNewWindow
download {
}
# END RTE.classesAnchor.download
mail {
type = mail
image = fileadmin/images/icon_email.gif
altText =
titleText =
}
# END RTE.classesAnchor.mail
}
# END RTE.classesAnchor
config {
########################
# 102 tables overwrite #
########################
### Allow own classes explicitly
tt_content.bodytext {
proc.allowedClasses >
proc.overruleMode = ts_css
types.text.proc.overruleMode = ts_css
types.textpic.proc.overruleMode = ts_css
}
# END RTE.config.tt_content.bodytext
}
# END RTE.config
default {
####################
# 103 RTE Clean up #
####################
disabled = 0
disableColorPicker = 1
disableContextMenu = 1
disablePCexamples = 1
disableRightClick = 1
enableWordClean = 1
hideButtons = fontstyle, fontsize, italic, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, emoticon, table, showhelp
hideFontFaces = *
hideFontSizes = *
hidePStyleItems = PRE
hideTableOperationsInToolbar = 1
hideTags = font (full), table
ignoreMainStyleOverride = 1
removeComments = 1
removeTags = font
removeTrailingBR = 1
showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock, bold, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, insertcharacter, line, link, user, acronym, image, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, about
showStatusBar = 0
keepButtonGroupTogether = 1
defaultLinkTarget = _self
userElements {
10 = Zitate
10 {
1 = Biliografischer Verweis
1.mode = wrap
1.description = Fügt einen bibliografischen Verweis ein.
1.content = <cite>|</cite>
2 = Zitat im Fließtext
2.mode = wrap
2.description = Zitat innerhalb einer Zeile deklarieren.
2.content = <q>»|«</q>
3 = Blockzitat
3.mode = wrap
3.description = Fügt ein Blockzitat ein.
3.content = <blockquote>»|«</blockquote>
}
}
# END RTE.default.userElements
###################
# 104 CSS classes #
###################
# RESOURCE: CSS file
contentCSS = fileadmin/css/rte_de.css
useCSS = 1
classesParagraph := addToList(subHeadline, leadText, annotation, bulletlist)
classesCharacter := addToList(annotation)
# classesImage =
# classesAnchor =
# classesLink =
showTagFreeClasses = 1
######################
# 105 Enabled colors #
######################
colors = # ... #
#######################
# 106 Transformations #
#######################
proc {
overruleMode = ts_css
allowTags = address,cite,q,a,img,br,div,center,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,span,h1,h2,h3,h4,h5,h6,b,i,u,strike,font,pre
allowTagsOutside = blockquote, address, hr, img
denyTags >
dontConvBRtoParagraph = 1
keepPDIVattribs = xml:lang, class, style, id, align
remapParagraphTag = p
}
# END RTE.default.proc
#####################
# 107 Miscellaneous #
#####################
# ##Same settings in front end
FE.proc < RTE.default.proc
}
# END RTE.default
#########################
# 108 Color definitions #
#########################
colors {
# ... #
}
# END RTE.colors
}
# END RTE
Parsermodifikationen im Page template:
Constants
...
### CSC configuration
styles.content.links.allowTags = address,cite,q,a,img,br,div,center,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,span,h1,h2,h3,h4,h5,h6,b,i,u,strike,font,pre
styles.content.links.target = _self
...
Setup
...
##############################
# 2 RTE / CSS Styled Content #
##############################
### Some CSC changes
lib.stdheader {
### Remove <div class="csc-header ...">|</div> surrounding the page header
stdWrap {
dataWrap >
prefixComment >
}
# END lib.stdheader.stdWrap
10 {
### Overwrite csc standard header wraps [Layout]
1.fontTag = <h1>|</h1>
2.fontTag = <h2>|</h2>
3.fontTag = <h2 class="subHeadline">|</h2>
4.fontTag = <h3>|</h3>
5.fontTag = <h4>|</h4>
### Add new csc standard header wraps [Layout]
6 = TEXT
6.current = 1
6.insertData = 1
6.fontTag = <h5>|</h5>
7 < 6
7.fontTag = <h6>|</h6>
}
# END lib.stdheader.10
}
### Some RTE parser changes
lib.parseFunc_RTE {
externalBlocks {
### Add class bulletlist to each unclassified <ul>-tag created with RTE
ul.callRecursive = 1
ul.callRecursive.tagStdWrap.HTMLparser = 1
ul.callRecursive.tagStdWrap.HTMLparser {
tags.ul.fixAttrib.class.default = bulletlist
tags.ul.fixAttrib.class.always = 1
}
# END lib.parseFunc_RTE.externalBlocks.ul.callRecursive.tagStdWrap.HTMLparser
### Remove <blockquote>-tag attribs
blockquote.callRecursive.tagStdWrap.HTMLparser.tags.blockquote.overrideAttribs >
}
# END lib.parseFunc_RTE.externalBlocks
nonTypoTagStdWrap {
### Keep some tags from encapsulate with paragraphs
encapsLines.encapsTagList = address,div,p,pre,h1,h2,h3,h4,h5,h6
### Remove class="bodytext" in paragraphs
encapsLines.addAttributes.P.class >
}
# END lib.parseFunc_RTE.nonTypoTagStdWrap
}
# END lib.parseFunc_RTE
Ist leider ne Menge Stoff, aber ich muss den RTE für sämtliche Gruppen konfigurieren.
Die Boardmittel RTE.classesAnchors kann ich so nicht benutzen, denn nach dem Styleguide darf das <a>-Element kein <class>-Attribut besitzen. Die Icons müssen in einem <img alt="" />-Element davor angezeigt werden (wg. Screenreader). Der Link soll zusätzlich in ein <span class="iconlink">-Element gewrappt werden (wg. CSS-Formatierung).
Thanks in advance! - Danke im Vorraus!
Der Chriss