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
  •  
  • 2 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 :-)

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

Zurück