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

Einen eigenen Tag erstellen am Beispiel von Fußnoten (<x-ref></x-ref>)

1. Erlaube <x-ref></x-ref> in den constants:

 

styles.content.allowTags := addToList(x-ref)

 

2. Erlaube x-ref in der YAML-Konfiguration des CKEditors und definiere den Tag:

 

editor:
  config:
    format_x-ref: { "name": "Fussnote", "element": "x-ref", "attributes": {"class": "note"} }

    extraAllowedContent:
     - x-ref[*,*,*]

 

3. x-ref in der Symbolleiste des CKEditors aufnehmen. Hier als Stil in der YAML-Konfiguration des CKEditors:

 

editor:
  config:
    stylesSet: [{ "name": "Fussnote2", "element": "x-ref", "attributes": {"class": "footnote"} },]

 

oder als Absatz in der YAML-Konfiguration des CKEditors:

 

editor:
  config:
    format_tags: "p;h2;h3;x-ref"

 

4. Nun noch den CSS-Style für das Backend definieren. Hierbei muss in der YAML-Konfiguration des CKEditors eine eigene CSS-Datei verlinkt werden:

 

editor:
  config:
    contentsCss:
      – "EXT:rte_ckeditor/Resources/Public/Css/contents.css?v=1"
      – "../fileadmin/templates/styles/css/custom_ckeditor.css?v=2"

 

In der CSS-Datei custom_ckeditor.css musst Du x-ref nun eine Formatierung zuweisen:

 

x-ref {
    border:1px dotted #333333;
}

 

Die CSS-Datei wird im TYPO3 Cache abgelegt. Wenn Du Änderungen vornimmst, verändere den angeängten Parameter ?v=1. Dadurch glaubt TYPO3, es handele sich um eine neue Datei und löscht die zwischengespeicherte Version.

Nun sollte der neue Tag auswählbar sein, im CKEditor anwählbar und formatiert sein. 

Weiterführend: Du kannst auch die Syntax eines Tags bestimmen, indem Du in der parseFunc_RTE die Syntax überschreibst:

 

    parseFunc_RTE.allowTags:=addToList(x-ref)
    parseFunc_RTE.tags.x-ref = TEXT
    parseFunc_RTE.tags.x-ref {
        current = 1
        wrap = <x-ref role="noteref"> | </x-ref>
    }

Beispiel von Fußnoten weitergedacht

Nun konnten wir in unserem CKEditor erreichen, Textteile als x-ref zu markieren. Dies kann man nun wie folgt nutzen: In wissenschaftlichen Texten werden Quellen und Anmerkungen oft als Fußnoten durchnumeriert an den Seitenfuß gesetzt. Um dies komfortabel in der Webpflege und der Nutzung zu gestalten, nutzen wir für den Text der Fußnote die Auszeichnung <x-ref>. In der Webpfege innerhalb von TYPO3 folgt die Anmerkung direkt nach dem Inhalt, auf sie sich bezieht und wird als Frußnote deklariert (s. oben). 

Die weiteren Vorgänge geschehen mittels Javascript/jQuery. Sollte ein Anzeigegerät wie Screenreader kein Javascript ausführen, ist die Anmerkung dennoch verständlich. Für Personen, die Javascript deaktiviert haben, habe ich noch ein CSS hinterlegt, dass die Anmerkung inline darstellt. 

Folgende Javascript-Funktion nimmt das <main>-Element entgegen und fügt als letztes Element eine Liste aller gefundenen Fußnoten ein. Dabei werden die Fußnoten durchnumeriert und mit Link und Backlink versehen.

Javascript:

 

$('body').addClass('js');

function footNotes(mainContentElement) {
    /* FUSSNOTEN -> aus x-ref Fußleisten ans Ende setzen inkl. Verlinkungen */
        var html = `
            <div class="frame frame-default frame-type-text frame-layout-footnotes">
                <ul>
        `;
        for (i = 0; i < document.querySelectorAll('x-ref').length; i++) {
            document.querySelectorAll('x-ref')[i].id="footnote" + (i+1);
            html +=  `
            <li>
                <p>
                    <a name="footer` + (i+1) + `"></a>
                    <a href="#` + document.querySelectorAll('x-ref')[i].id +  `">
                        <sup>` + (i+1) + `</sup>
                    </a>&nbsp;` + document.querySelectorAll('x-ref')[i].innerHTML + `
                </p>
            </li>`;
            document.querySelectorAll('x-ref')[i].innerHTML = `
                <a href="#footer` + (i + 1) + `">
                    <sup>` + (i + 1)+ `</sup>
                </a>`;
        }
        html += `
                </ul>
            </div>`;

        $(mainContentElement).append(html);
    }
    footNotes('main#content');

 

Und scss:

 

body{
    &:not(.js) {
        counter-reset: footnotes;
        x-ref {
            counter-increment: footnotes;
            display: inline;
            margin: 0.25rem;
            padding: 0.125rem;
            background-color: #eee;
            &:before {
                content: '[' counter(footnotes) '] ';
            }
        }
    }

    &.js {
        main .frame-type-text.frame-layout-footnotes {
            border-top:1px solid $color-05;
            ul {
                list-style:none;
                padding:0;
                margin:0;
                a, p {
                    font-size:$font-size-small;
                }
            }

        }
    }
}