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.

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. 

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

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

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>
    }

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;
                }
            }

        }
    }
}