CSS-Klasse für Tabellen im Rich-Text-Editor

HTMLArea ist seit Typo3 4.0 fest integriert und wird von den meisten Typo3-Anwendern genutzt, um redaktionelle Inhalte für Webseiten einzupflegen. Praktisch ist die Möglichkeit, CSS-Klassen für Text, Listen, Tabellen, etc fest zu definieren, damit der Redakteur nur bestimmte Formatierungen benutzen kann.

Für Absätze (Paragraph) oder Listen hat sich seit der Umstellung auf Typo3 in der Version 4 nicht viel geändert, aber für Tabellen, was den ein oder anderen Typo3-Anwender wahrscheinlich etliche Zeit und Nerven gekostet haben wird.

Folgendes Beispiel soll zeigen, wie einfach es doch eigentlich ist, CSS-Klassen für Tabellen und Zellen für den Rich-Text-Editor (HTMLArea) freizuschalten, damit der Redakteur die Klassen auswählen kann:

Es seien folgende Klassen in der CSS-Datei vorhanden: 

table.tabelle {

	border-collapse: collapse;
	margin: auto;
}

table.tabelle td {
	border: 1px dashed #C0C0C0;
	text-align: center;
	font-family: arial;
	font-size: 10px;
	padding: 2px;
}

td.zelleBlau {
	background-color: #2d69a9;
	color: white;
	font-size: 12px;
}

Dann ist es möglich, diese Klassen im TSConfig freizuschalten: 

...
RTE.default.classesCharacter = grueneSchrift, orangeSchrift, blaueSchrift
RTE.default.classesParagraph = typo3css, typo3tsetup, typo3tsconfig, linuxSource
RTE.default.classesTable = tabelle
RTE.default.classesTD = zelleBlau
....
RTE.default.proc {
...
allowedClasses = ...tabelle, zelleBlau, ...
}

 Hier als Beispiel die ganze TSConfig: 

mod.SHARED.colPos_list = 1,0,2

RTE.default.useCSS = 1
RTE.default.contentCSS = fileadmin/template/style.css

RTE.default.showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock, bold, italic, underline, strikethrough, subscript, superscript, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, emoticon, insertcharacter, line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
RTE.default.showTagFreeClasses = 0

RTE.default.classesCharacter = grueneSchrift, orangeSchrift, blaueSchrift, graueSchrift, tabelle, zelleBlau, listeMenu, bildUnterschrift, typo3css, typo3tsetup, typo3tsconfig, linuxSource
RTE.default.classesParagraph = typo3css, typo3tsetup, typo3tsconfig, linuxSource
RTE.default.classesTable = tabelle
RTE.default.classesTD = zelleBlau

RTE.default.proc {

dontConvBRtoParagraph = 1
allowedClasses = grueneSchrift, orangeSchrift, blaueSchrift, graueSchrift, tabelle, zelleBlau, listeMenu, bildUnterschrift, typo3css, typo3tsetup, typo3tsconfig, linuxSource

allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, ul, ol, li, re, blockquote, strong, em, b, i, u, span, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, pre
denyTags = font, font (full)
allowTagsOutside = img, hr, span
keepPDIVattribs = align, class, style
   HTMLparser_rte {
        // TAGS ALLOWED
        allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, ul, ol, li, re, blockquote, strong, em, b, i, u, span, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, pre
        tags.p.allowedAttribs = class, align, style
        keepNonMatchedTags = 1
        }

   HTMLparser_db {
        // TAGS ALLOWED
        allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, ul, ol, li, re, blockquote, strong, em, b, i, u, span, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, pre
         tags.p.allowedAttribs = class, align, style
         keepNonMatchedTags = 1
        }
       
   entryHTMLparser_db = 1
       entryHTMLparser_db {
       htmlSpecialChars = 0
       allowTags = form,input,table, tbody, tr,td,div,img,hr,b,i,u,a,br,pre,strong,em,li,ul,ol,h1,h2,h3,h4,h5,h6,span,p,b,th, pre
       tags.p.allowedAttribs = class, align, style

 
       // XHTML COMPLIANCE
       xhtml_cleaning = 1

       // CLEAN TAGS
       noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
       tags.hr.allowedAttribs = class
       tags.p.allowedAttribs = style, class
       // REMAP B AND I TAGS
       tags.i.remap = em
       tags.b.remap = strong

        rmTagIfNoAttrib = div,font
        keepNonMatchedTags = protect
        }

       entryHTMLparser_db.tags {
           img >
           span >
}

RTE.config.tt_content.bodytext.proc.allowedClasses = grueneSchrift, orangeSchrift, blaueSchrift, graueSchrift, tabelle, zelleBlau, listeMenu, bildUnterschrift, typo3css, typo3tsetup, typo3tsconfig, linuxSource


tx_crawler.crawlerCfg.paramSets {
  language = &L=[|_TABLE:pages_language_overlay;_FIELD:sys_language_uid]
  language.procInstrFilter = tx_indexedsearch_reindex, tx_cachemgm_recache
  language.baseUrl = www.pc-erfahrung.de
  }

Dieses Tutorial wurde basierend auf Typo3 4.0 und HTMLArea 1.3.7 durchgeführt.