Ext: rte_ckeditor.

Konfiguration des CKeditors ohne Extension

Der ckeditor wird über eine YAML-Datei konfiguriert. Der mitgelieferte ckeditor bringt 3 Konfigurationen mit. Man kann aber auch ohne Extension eine benutzdefinierte Konfiguration einbinden. Dazu öffnen wir die Datei typo3conf/AdditionalConfiguration.php. Sollte die Datei nicht vorhaben sein, kann sie einfach erstellt werden. Darin fügen wir folgendes ein:

<?php 
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['BeispielA'] = 'fileadmin/templates/rte/custom_ckeditor_configA.yaml';
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['BeispielB'] = 'fileadmin/templates/rte/custom_ckeditor_configB.yaml';
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['BeispielC'] = 'fileadmin/templates/rte/custom_ckeditor_configC.yaml'; 
?>

Hier sind nun drei unterschiedliche Konfigurationen angegeben. Diese können nun auch auf unterschiedlichen Seiten eingesetzt werden. Dazu kommt in die Page.ts (Seiteneigenschaften -> Ressourcen -> Seiten-TSconfig) folgende Zeile:

RTE.default.preset = BeispielA
RTE.config.tt_content.bodytext.preset = BeispielB
RTE.config.tx_news.teaser.preset = BeispielC

So können sogar für unterschiedliche Felder unterschiedliche Konfigurationen eingesetzt werden.

Danke an Sebastian für die Erklärung.

Konfiguration über YAML

Ich empfehle, die Datei typo3/sysext/rte_ckeditor/Configuration/RTE/Full.yaml als Basis zu verwenden. Die Konfiguration der Toolbar nimmt einem ein Online-Generator ab, den ich mir in einer ähnlich Art schon für den alten RTE gewünscht hätte. Leider muss man doch ein bisschen anpassen, da das generierte Format nicht YAML ist. Aber mit ein bisschen Suchern und Ersetzen im Code-Editor ist das schnell erledigt.

Beim alten RTE konnte man im Page.ts einen benutzerdefnierten Pfad zur internen CSS-Datei des Editors definieren: RTE.default.contentCSS = fileadmin/templates/phoenix/css/custom_ckeditor.css
Das geht leider so nicht mehr. Aber es gibt eine Alternative: In der YAML-Datei lässt sich eine CSS-Datei definieren. Hierbei achtet bitte auf den doppelten Punkt vor fileadmin:

editor:

  config:

    contentsCss: [„EXT:rte_ckeditor/Resources/Public/Css/contents.css“, „../fileadmin/templates/css/custom_ckeditor.css“]
    uiColor: „#e7f8f8“

Letzteres färbt im Übrigen die Toolbar ein.

contentsCss ab seit 8.7.1 lässt keine Änderungen mehr zu

Wir ich leider in intensiver Zeitverschwendung feststellen musste, werden Änderungen an den CSS-Dateien, die in der Yaml-Konfiguaration angegeben sind, nicht mehr dargestellt. Es hilft wder TYPO3-Cache löschen, noch Browser Cache. Sogar das daeaktivieren der ckeditor-Extension half nicht. Wie ich jetzt weiß, handelt es sich ume inen Bug.

Wordaround:

editor:
   config:
      contentsCss:
         – „EXT:rte_ckeditor/Resources/Public/Css/contents.css?v=1“

Es scheint, als ginge das System von einem dynamischen Inhalt als und die Datei wird nicht mehr gecacht.

Einbinden von Plugins

Nachdem ich einen Artikel gelesen habe, indem beschrieben wurde, wie man CKEditor-Plugins über eine Mini-Extension einbindet, habe ich das mal ausprobiert. Hat nicht geklappt. Nach einer kurzen Analyse kam mir aber eine erheblich einfachere Lösung in den Sinn:

Da wir ja ohnehin einen Ordner RTE für die yaml-Configuration haben, kann man dort einen Unterordner Plugins einrichten und dort die gewünschten Plugins speichern. In der von uns angelegten yaml-Datei ergänzen wir foplgendes:

  externalPlugins:
     nbsp: { resource: „fileadmin/template-Verzeichnis/rte/Plugins/nbsp/plugin.js“ }

Danach läuft das Plugin problemlos. Also wieder eine extensionfreie Lösung :-)

Wenn ein Tag im Frontend nicht gerendert sondern htmlencoded wird

Man habe ich das lange gesucht ... Der Tag <pre> wollte einfach nicht interpretiert werden. Immer wurde er html encodet. 1000 mögliche Stellen habe ich recherchiert und ausprobiert. Folgende waren es NICHT:

page-TS:

RTE.default.proc {
    allowTags := addToList(pre)
}

setup

lib.parseFunc.allowTags := addToList(pre)

ckeditor.yaml

format_tags: „h2;p;pre“ (ok, das muss natürlich rein)

Es war folgende Stelle:

Constants:

styles.content.allowTags = a, b, br, dd, h1, h2, h3, h4, h5, h6, ul, ol, li, p, strong, sub, sup, table, thead, tbody, tfoot, td, th, tr, ul,pre