TYPO3
 | 
22.06.2010
 | 
11:50

TYPO3: RTE-Standardkonfiguration für YAML

Für TYPO3 existieren eine Vielzahl von RTE-Standardkonfigurationen (z.B. die von sk-typo3), allerdings keine wirklich gute für YAML. Dieser Artikel stellt eine Lösung vor.

Es wird angenommen, dass die YAML-Vorlagen-Datei content.css im Verzeichnis fileadmin/css/screen/ liegt. Falls nicht, muss der Pfad angepasst werden.

Für das TS-Template genügt es, wenn man content (default) und cset Stylesheet in der Seite integriert – css_styled_content ist eher hinderlich, wenn man YAML verwendet.

Die Datei content.css wird um folgende TYPO3-relevante Einträge ergänzt:

Quelltext:  Alles auswählen  |  Zeilennummerierung an/aus
  1. .align-right { text-align: right; }
  2. .align-left { text-align: left; }
  3. .align-justify { text-align: justify; }
  4. .align-center { text-align: center; }

Damit wird sichergestellt, dass die Ausrichtung der Absätze korrekt vorgenommen wird. RTE wird im Seiten(!)-Setup der Wurzelseite wie folgt eingerichtet:

Quelltext:  Alles auswählen  |  Zeilennummerierung an/aus
  1. #*** RTE Classe des Interface (Ausrichtung)
  2. RTE.classes {
  3.         align-left {
  4.           name = Linksbündig
  5.           value = text-align: left;
  6.         }
  7.         align-right {
  8.           name = Rechtsbündig
  9.           value = text-align: right;
  10.         }
  11.         align-justify {
  12.           name = Blocksatz
  13.         }
  14.         align-center {
  15.           name = Zentriert
  16.           value = text-align: center;
  17.         }
  18.         float_left {
  19.           name = Links mit Textumfluss
  20.           value = text-align: left;
  21.         }
  22.         center {
  23.           name = Zentriert (Bild)
  24.           value = text-align: center;
  25.         }
  26.         float_right {
  27.           name = Rechts mit Textumfluss
  28.           value = text-align: right;
  29.         }
  30.         highlight {
  31.           name = Hervorhebung
  32.           value = color:#c30;
  33.         }
  34.         dimmed {
  35.           name = Ausgegraut
  36.           value = color:#888;
  37.         }
  38.         info {
  39.           name = Info
  40.           value = background:#f8f8f8; color:#666;
  41.         }
  42.         note {
  43.           name = Anmerkung
  44.           value = background:#efe; color:#040;
  45.         }
  46.         important {
  47.           name = Wichtig
  48.           value = background:#ffe; color:#440;
  49.         }
  50.         warning {
  51.           name = Warnung
  52.           value = background:#fee; color:#400;
  53.         }
  54. }
  55.  
  56. #
  57. # *** Entfernt das Bild vor den Links
  58. RTE.classesAnchor {
  59.         internalLink {
  60.                 class = internal-link
  61.                 type = page
  62.                 image >
  63.         }
  64.         externalLink {
  65.                 class = external-link
  66.                 type = url
  67.                 image >
  68.         }
  69.         externalLinkInNewWindow {
  70.                 class = external-link-new-window
  71.                 type = url
  72.                 image >
  73.         }
  74.         internalLinkInNewWindow {
  75.                 class = internal-link-new-window
  76.                 type = page
  77.                 image >
  78.         }
  79.         download {
  80.                 class = download
  81.                 type = file
  82.                 image >
  83.         }
  84.         mail {
  85.                 class = mail
  86.                 type = mail
  87.                 image >
  88.         }
  89. }
  90.  
  91. ## RTE Konfiguration
  92. RTE.default {
  93.         # Zuweisung der CSS-Datei - ggf. ändern!
  94.         contentCSS = fileadmin/css/screen/content.css
  95.        
  96.         ## Markup options
  97.         enableWordClean = 1
  98.         removeTrailingBR = 1
  99.         removeComments = 1
  100.         removeTags = center, sdfield
  101.         removeTagsAndContents = style,script
  102.  
  103.         # Buttons die gezeigt/versteckt werden
  104.         showButtons = formatblock, textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, 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, showhelp, about, chMode, left, center, right
  105.         hideButtons = fontstyle, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste
  106.  
  107.         # Hält die RTE Icons gegroupt zusammen
  108.         keepButtonGroupTogether = 1
  109.  
  110.         # blendet Statusbar in htmlarea aus
  111.         showStatusBar =  0
  112.  
  113.         ## Add styles Left, center and right alignment of text in paragraphs and cells.
  114.         inlineStyle.text-alignment (
  115.                 p.float_left, h1.float_left, h2.float_left, h3.float_left, h4.float_left, h5.float_left, h6.float_left, td.float_left { float: left; }
  116.                 p.center, h1.center, h2.center, h3.center, h4.center, h5.center, h6.center, td.center { text-align: center; }
  117.                 p.float_right, h1.float_right, h2.float_right, h3.float_right, h4.float_right, h5.float_right, h6.float_right, td.float_right { float: right; }
  118.                 p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
  119.                 p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
  120.                 p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
  121.         )
  122.  
  123.         ## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
  124.         ignoreMainStyleOverride = 1
  125.  
  126.         proc {
  127.                 # tags die erlaubt / verboten sind
  128.                 allowTags = 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
  129.                 denyTags = font
  130.  
  131.                 # br wird nicht zu p konvertiert
  132.                 dontConvBRtoParagraph = 1
  133.  
  134.                 # tags sind erlaubt außerhalt von p, div
  135.                 allowTagsOutside = img,hr,typohead
  136.  
  137.                 # erlaubte attribute in p, div tags
  138.                 keepPDIVattribs = align,class,style,id
  139.  
  140.                 # List all class selectors that are allowed on the way to the database
  141.                 allowedClasses (
  142.                         external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
  143.                         align-left, align-center, align-right, align-justify, float_left, float_right, center, highlight, dimmed, note, important, info, warning
  144.                 )      
  145.  
  146.                 # html parser einstellungen
  147.                 HTMLparser_rte {
  148.                         # tags die erlaubt/verboten sind
  149.                         allowTags < RTE.default.proc.allowTags
  150.                         denyTags < RTE.default.proc.denyTags
  151.  
  152.                         # tags die untersagt sind
  153.                         removeTags = font
  154.  
  155.                         # entfernt html-kommentare
  156.                         removeComments = 1
  157.  
  158.                         # tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
  159.                         keepNonMatchedTags = 0
  160.                 }
  161.  
  162.  
  163.                 # Content to database
  164.                 entryHTMLparser_db = 1
  165.                 entryHTMLparser_db {
  166.  
  167.                         # tags die erlaubt/verboten sind
  168.                         allowTags < RTE.default.proc.allowTags
  169.                         denyTags < RTE.default.proc.denyTags
  170.  
  171.                         # CLEAN TAGS
  172.                         noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
  173.  
  174.                         rmTagIfNoAttrib = span,div,font
  175.  
  176.                         # htmlSpecialChars = 1
  177.        
  178.                         ## align attribute werden erlaubt
  179.                         tags {
  180.                                 p.fixAttrib.align.unset >
  181.                                 p.allowedAttribs = class,style,align
  182.  
  183.                                 div.fixAttrib.align.unset >
  184.  
  185.                                 hr.allowedAttribs = class
  186.  
  187.                                 # b und i tags werden ersetzt (em / strong)
  188.                                 b.remap = strong
  189.                                 i.remap = em
  190.  
  191.                                 ## img tags werden erlaubt
  192.                                 img >
  193.                                
  194.                                 h1.remap = typohead type="1"
  195.                                 h2.remap = typohead type="2"
  196.                                 h3.remap = typohead type="3"
  197.                                 h4.remap = typohead type="4"
  198.                                 h5.remap = typohead type="5"
  199.                                 h6.remap = typohead type="6"
  200.                         }
  201.                 }
  202.  
  203.         }
  204.  
  205.         # Classes: Ausrichtung
  206.         classesParagraph (
  207.                 align-left, align-right, align-justify, align-center, float_left, float_right, note, important, info, warning
  208.         )
  209.  
  210.         # Classes: Eigene Stile
  211.         classesCharacter = highlight, dimmed
  212.         classesImage= float_left, float_right, center
  213.  
  214.  
  215.         # Classes für Links (These classes should also be in the list of allowedClasses)
  216.         classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
  217.         classesAnchor.default {
  218.                 page = internal-link
  219.                 url = external-link-new-window
  220.                 file = download
  221.                 mail = mail
  222.         }
  223.  
  224.         # zeigt alle CSS-Klassen die in formate.css vorhanden sind
  225.         showTagFreeClasses = 1
  226.  
  227.         # Do not allow insertion of the following tags
  228.         hideTags = font
  229.  
  230.         # Tabellen Optionen in der RTE Toolbar
  231.         hideTableOperationsInToolbar = 0
  232.         keepToggleBordersInToolbar = 1
  233.  
  234.         # Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
  235.         disableSpacingFieldsetInTableOperations = 1
  236.         disableAlignmentFieldsetInTableOperations=1
  237.         disableColorFieldsetInTableOperations=1
  238.         disableLayoutFieldsetInTableOperations=1
  239.         disableBordersFieldsetInTableOperations=0
  240. }
  241.  
  242. # Use same processing as on entry to database to clean content pasted into the editor
  243. RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
  244.  
  245. # FE RTE configuration (htmlArea RTE only)
  246. RTE.default.FE < RTE.default
  247. RTE.default.FE.userElements >
  248. RTE.default.FE.userLinks >
  249.  
  250. # Breite des RTE in Fullscreen-Ansicht
  251. TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%
Gravatar: Maximilian KalusMaximilian Kalus | Permalink | Trackback-Link
Tags: yaml, rte, typoscript
  •  
  • 4 Kommentare
  •  
Diesen Kommentar kommentieren
Gravatar: KoflKofl
28.06.2010
19:09

Super

Traum-Konfig, vielen Dank.

Gravatar: MaxMax
28.06.2010
19:26

Re: Super

Freut mich, wenn es nützt :-)

Diesen Kommentar kommentieren
Gravatar: AlexAlex
29.05.2011
00:04

Danke dafür aber...

Hallo,



danke für die Konfig, werde sie ausprobieren, wenn ich endlich mal Zeit für meine Seite habe.

Kann allerdings noch jemand bitte zu dieser Aussage eine ausführlichere Erklärung abgeben:

-----

Für das TS-Template genügt es, wenn man content (default) und cset Stylesheet in der Seite integriert – css_styled_content ist eher hinderlich, wenn man YAML verwendet.

-------



Ich habe bisher immer CSC, auch in Verbindung mit YAML verwendet. Ist mit diesen TS-Templates auch eine valide, mit CSS gestylte Ausgabe von Inhalten möglich? Wie z.B. "Text mit Bild im Text rechts"? Und dann gibts ja noch eine Extension css_styled_multimedia usw.

Dachte, dass alles außer CSC eher "veraltet" oder für spezielle Zwecke (z.B. Newsletter Templates) ist, bzw. CSC state of the art für eine moderne HTML(5?), CSS, valide und barrierearme Ausgabe ist.



Danke für mehr Licht im Dunkeln :-)

Alex

Gravatar: MaxMax
30.05.2011
09:17

Re: Danke dafür aber...

Stimmt, CSC ist eigentlich eine wesentlich bessere Variante für Seiten. Ich würde es inzwischen auch auf jeden Fall zusammen mit YAML einsetzen. Wie gesagt, CSC und YAML beißen sich teilweise, bzw. man muss halt wissen, dass Content-Styles von YAML z.T. durch CSC überschrieben werden. Ich löse das inzwischen hin und wieder durch das Löschen des CSC-Styles via:



plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >



Danach kann man seine eigenen Styles definieren, bzw. Teile des CSC übernehmen. Ist vielleicht nicht die idealste Variante, funktioniert jedoch ganz gut. Es gibt im Netz im Übrigen einige Hinweise, wie man die Klassen von CSC in den Headern usw. wegbekommt.



Hoffe, das hilft.

Mein Kommentar
Ich möchte über jeden weiteren Kommentar benachrichtigt werden.

Zurück