Sie befinden sich hier: Typo3 / Template for TemplaVoilà (TTV) / RTE (Rich Text Editor) anpassen
Deutsch
English
Sonntag, 24.06.2018

RTE (Rich Text Editor) anpassen

Der RTE (Rich Text Editor) im Backend von Typo3 wird über die Typoscript-Datei gesteuert, die mittels Seiteneigenschaften bearbeiten der Rootpage im Tab Optionen angegeben ist.

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/styles/[Template-Name]/TemplateRessources/pageTSconfig.txt">

Diese Datei sieht standardmässig folgendermaßen aus:

TypoScript
mod.SHARED {
  defaultLanguageFlag = de.gif
  defaultLanguageLabel = deutsch
}
TCEFORM.tt_content.section_frame {
  addItems {
    50 = DIV-50
    51 = DIV-51
    52 = DIV-52
    53 = DIV-53
  }
  altLabels {
#    1 = Label for 1
#    5 = Label for 5
#    6 = Label for 6
#    10 = Label for 10
#    11 = Label for 11
#    12 = Label for 12
#    20 = Label for 20
#    21 = Label for 21
    50 = Label for 50
    51 = Label for 51
    52 = Label for 52
    53 = Label for 53
  }
}
RTE.default {
  hidePStyleItems = div,blockquote,address,h6
  contentCSS = fileadmin/styles/[Template-Name]/css/screen/typo3-RTE.css
  showTagFreeClasses = 0
  showButtons = *
  hideButtons = lefttoright, righttoleft, fontstyle, fontsize, showhelp, textcolor, bgcolor, left, strikethrough, underline, inserttag, user, findreplace
  keepButtonGroupTogether = 1
  classesCharacter = mono,file,directory,infoHeadline,questionHeadline,stopHeadline,underline,strikethrough
  classesParagraph = code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify
  allowedClasses = mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify,underline,strikethrough
  proc {
    allowedClasses < RTE.default.allowedClasses
  }
  FE {
    proc  {
      allowedClasses < RTE.default.allowedClasses
    }
  }
  ignoreMainStyleOverride = 0
  mainStyleOverride = body.htmlarea-content-body {font-family:'Trebuchet MS', sans-serif;}
}
RTE.colors {
  color1 {
    name = My color 1
    value = #ff0000
  }
}
RTE.default.colors = color1
RTE.classesAnchor {
  externalLink {
    class = external-link
    type = url
    image >
    titleText =
  }
  externalLinkInNewWindow {
    class = external-link-new-window
    type = url
    image >
    titleText =
  }
  internalLink {
    class = internal-link
    type = page
    image >
    titleText =
  }
  internalLinkInNewWindow {
    class = internal-link-new-window
    type = page
    image >
    titleText =
  }
  download {
    class = download
    type = file
    image >
    titleText =
  }
  mail {
    class = mail
    type = mail
    image >
    titleText =
  }
}

Möchte man eigene Formate für den RTE definieren, so kann dies in dieser Datei und der entsprechenden CSS-Datei erfolgen.

Ein Beispiel

Hier zunächst der geänderte Typoscript-Code:

TypoScript
   1: # Alle Grundeinstellungen aus /typo3/sysext/rtehtmlarea/res/typical löschen
   2: RTE >
   3: 
   4: # Hier geht es standardmässig weiter
   5: mod.SHARED {
   6:   defaultLanguageFlag = de.gif
   7:   defaultLanguageLabel = deutsch
   8: }
   9: TCEFORM.tt_content.section_frame {
  10:   addItems {
  11:     50 = DIV-50
  12:     51 = DIV-51
  13:     52 = DIV-52
  14:     53 = DIV-53
  15:   }
  16:   altLabels {
  17: #    1 = Label for 1
  18: #    5 = Label for 5
  19: #    6 = Label for 6
  20: #    10 = Label for 10
  21: #    11 = Label for 11
  22: #    12 = Label for 12
  23: #    20 = Label for 20
  24: #    21 = Label for 21
  25:     50 = Label for 50
  26:     51 = Label for 51
  27:     52 = Label for 52
  28:     53 = Label for 53
  29:   }
  30: }
  31: # Eigene Definitionen
  32: RTE.classes {
  33: 	codep {
  34: 		name = Code-Befehlszeilen
  35: 		value = font-family:"Courier New", Courier, monospace; font-size:0.9em; background: #eff; border:1px #000 dotted; line-height:1.3em; padding:2px;
  36: 	}
  37: 	codespan {
  38: 		name = Code/Befehlszeilen
  39: 		value = font-family:"Courier New", Courier, monospace; font-size:0.9em; background: #eff; border:1px #000 dotted; line-height:1.3em; padding:1px 2px 1px 2px;
  40: 	}
  41: 	menu {
  42: 		name = Menü
  43: 		value = background:#ddd; color: #000; border:1px #000 dotted; line-height:1.3em; padding:1px 2px 1px 2px;
  44: 	}
  45: 	mono {
  46: 		name = Mono
  47: 		value = font-family:"Courier New", Courier, monospace; padding:0 0.3em 0 0.3em; background: #f0f0f4; border:1px #ccd solid;
  48: 	}
  49: 	directory {
  50: 		name = Verzeichnis
  51: 		value = font-family:"Courier New", Courier, monospace; color:#000088; 
  52: 	}
  53: 	file {
  54: 		name = Datei
  55: 		value = font-family:"Courier New", Courier, monospace; color:#000088; 
  56: 	}
  57: }
  58: 
  59: RTE.default {
  60:   hidePStyleItems = div,blockquote,address,h6
  61:   contentCSS = fileadmin/styles/[Template-Name]/css/screen/typo3-RTE.css
  62:   showTagFreeClasses = 0
  63:   showButtons = *
  64:   hideButtons = lefttoright, righttoleft, fontstyle, fontsize, showhelp, textcolor, bgcolor, left, strikethrough, underline, inserttag, user, findreplace
  65:   keepButtonGroupTogether = 1
  66:   classesCharacter = menu,codespan,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,underline,strikethrough
  67:   classesParagraph = codep,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify
  68:   allowedClasses = menu,codep,codespan,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify,underline,strikethrough
  69:   proc {
  70:     allowedClasses < RTE.default.allowedClasses
  71:   }
  72:   FE {
  73:     proc  {
  74:       allowedClasses < RTE.default.allowedClasses
  75:     }
  76:   }
  77:   ignoreMainStyleOverride = 0
  78:   mainStyleOverride = body.htmlarea-content-body {font-family:'Trebuchet MS', sans-serif;}
  79: }
  80: RTE.colors {
  81:   color1 {
  82:     name = My color 1
  83:     value = #ff0000
  84:   }
  85: }
  86: RTE.default.colors = color1
  87: RTE.classesAnchor {
  88:   externalLink {
  89:     class = external-link
  90:     type = url
  91:     image >
  92:     titleText =
  93:   }
  94:   externalLinkInNewWindow {
  95:     class = external-link-new-window
  96:     type = url
  97:     image >
  98:     titleText =
  99:   }
 100:   internalLink {
 101:     class = internal-link
 102:     type = page
 103:     image >
 104:     titleText =
 105:   }
 106:   internalLinkInNewWindow {
 107:     class = internal-link-new-window
 108:     type = page
 109:     image >
 110:     titleText =
 111:   }
 112:   download {
 113:     class = download
 114:     type = file
 115:     image >
 116:     titleText =
 117:   }
 118:   mail {
 119:     class = mail
 120:     type = mail
 121:     image >
 122:     titleText =
 123:   }
 124: }
 125: 
  • Die Standardeinstellungen, welche in der Konfiguration der Erweiterung rtehmlarea im Abschnitt Enable features unter dem Punkt Default configuration settings [defaultConfiguration] ausgewählt werden, löscht man mit dem hinzugefügten RTE > am Beginn der Datei.

  • Eigene Definitionen werden folgendermaßen aufgenommen:

    • RTE.classes {
          ...
          mono {
              name = Mono
              value = font-family:"Courier New", Courier, monospace; padding:0 0.3em 0 0.3em; background: #f0f0f4; border:1px #ccd solid;
          }
          ...
      }

      menu ist hierbei der Klassenname (class="menu"), der dem Element p oder span hinzugefügt wird.

      Mit name wird die Bezeichnung festgelegt, unter welcher der Eintrag im der Auswahlliste erscheint.

      Mit value wird das Erscheinungsbild des Eintrags in der Auswahlliste festgelegt, nicht zu verwechseln mit dem CSS-Code für das Frontend!

    • Die neue Klasse muss noch dem RTE noch bekannt gemacht werden. Das erfolgt in Abhängigkeit davon, ob es sich um ein Blockstil-Element handelt, also p, oder ein Textstil-Element, also span.

      • Blockstil-Elemente werden in der folgenden Zeile (siehe Zeile 67) hinzugefügt:

        RTE.default.classesParagraph = codep,code,note,important, ...

      • Textstil-Element werden in der folgenden Zeile (siehe Zeile 66) hinzugefügt:

        RTE.default.classesCharacter = menu,mono,file,directory, ...

      • Die Benutzung der Klassen muss dann noch in der folgenden Zeile freigegeben (siehe Zeile 68) werden:

        RTE.default.allowedClasses = menu,codep,mono,file,directory, ...

  • Nun fehlt nur noch die Definition der Formate in der zugehörigen CSS-Datei, die im folgenden (siehe Zeile 61) definiert ist:

    RTE.default.contentCSS = fileadmin/styles/[Template-Name]/css/screen/typo3-RTE.css

     Der Eintrag könnte zum Beispiel so aussehen:

CSS
/* Ergaenzungen */
p.codep {
	font-family:"Courier New", Courier, monospace; 
	font-size:0.9em; 
	background:#eff; 
	border:1px #000 dotted;
	line-height:1.3em;
	padding: 5px 5px 5px 5px;
	margin: 5px 5em 5px 0;
}
span.menu {
	font-size:0.9em; 
	font-weight: bold;
	background:#eee;
	border:1px #bbb solid;
	color: #000;
	line-height:1.3em;
	padding: 1px 2px 1px 2px;
}

Wichtig! Nachdem man die Änderungen vorgenommen hat, muss man gegebenenfalls den Cache des Browsers löschen, da sonst die neuen Formate nicht angezeigt werden.

RTE-Link-Formate

Hier folgt ein Beispiel für das Erweitern des RTE um zusätzliche Link- bzw. Verweisformate.

Eventuell ist hierfür Enable links accessibility icons in den Settings der Erweiterung rtehtmlarea zu aktvieren (vermutlich aber nicht).

In der Datei /fileadmin/styles/[Template-Name]/TemplateRessources/pageTSconfig.txt werden im Bereich RTE.classesAnchor die gewünschten Klassen ergänzt (die Standarddefinition von TTV wurde durch die in Bold markierten Teile erweitert).

RTE.classesAnchor {
  externalLink {
    class = external-link
    type = url
    image >
    titleText =
  }
  externalLinkInNewWindow {
    class = external-link-new-window
    type = url
    image >
    titleText =
  }
  internalLink {
    class = internal-link
    type = page
    image >
    altText = Interner Link
    titleText =
  }
  internalLinkExtra {
    class = internal-link-extra
    type = page
    image >
    titleText =
  }
  internalLinkInNewWindow {
    class = internal-link-new-window
    type = page
    image >
    titleText =
  }
  download {
    class = download
    type = file
    image >
    titleText =
  }
  downloadPdf {
    class = download-pdf
    type = file
    image >
    titleText =
  }
  mail {
    class = mail
    type = mail
    image >
    titleText =
  }
}

Danach werden durch die folgende Zeile die beiden ergänzten Klassen noch dem System bekannt gemacht.

RTE.default.classesAnchor := addToList(internal-link-extra,download-pdf)

Natürlich muss nach Änderungen der Cache (insbesondere der RTE-Cache) geleert werden.