ckeditor konfigurieren

[santscho]

In diesem Tutorial zeige ich, wie man
- Funktionen des ckeditors ausschaltet, damit Autoren keinen "Unfug" anstellen können (z.B. eigene Farben verwenden)
- Die CSS des Frontends verwenden, statt die CSS des ckeditors

Alle Einstellungen werden in der config.js des ckeditors vorgenommen. Vorher ein Backup der Datei erstellen:

Code: Select all

include/inc_ext/ckeditor/config.js

Buttons entfernen
In diesem Beispiel möchte ich Textformatierungen, Styles, Schriften, Bilder, iFrame, Textfarbe und Hintergrundfarbe deaktivieren. Einfach eine config.removeButtons-Konfiguration einfügen:

Code: Select all

config.removeButtons = 'Underline,Strike,Styles,Font,Image,Iframe,TextColor,BGColor';

Nur bestimmte Formate erlauben
Im Format-Dropdown möchte ich, dass nur <p> und <h5> auswählbar sind. Eine config.format_tags-Konfiguration einfügen:

Code: Select all

config.format_tags = 'p;h5';

Frontend-CSS verwenden
In meinem Beispiel möchte ich die Stile von meiner Frontend-Bootstrap-CSS verwenden. Die ckeditor-Stile werden deaktiviert. Eine config.contentsCss-Konfiguration einfügen:

Code: Select all

config.contentsCss = 'template/inc_css/ckeditor.css';

im inc_css erstelle ich eine leere CSS-Datei "ckeditor.css". In dieser CSS importiere ich die gewünschten CSS. Zusätzlich füge ich noch eine body-Klasse mit etwas Padding ein, damit der der Text im ckeditor nicht am Rand klebt:

Code: Select all

@import url(assets/bootstrap/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic);
@import url(assets/fonts/fontawesome-all.min.css);
@import url(assets/fonts/font-awesome.min.css);
@import url(assets/fonts/fontawesome5-overrides.min.css);
body {
  padding: 10px;
}

Nun noch den Browser-Cache leeren und einen Browser-Refresh ausführen. Und schon sind die Frontend-Stile im ckeditor reflektiert.

Hier noch meine ckeditor-Konfiguration als Ganzes:

Code: Select all

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    config.toolbar = [
        { name: 'tools', items: ['Maximize', '-', 'Source', '-', 'Undo', 'Redo', '-', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Find', '-', 'ShowBlocks' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', groups: [ 'align', 'list', 'indent', 'blocks' ], items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BulletedList', 'NumberedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv'] },
        { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Iframe', 'SpecialChar' ] },
        { name: 'styles', items: [ 'Styles', 'Format', 'Font' ] },
        { name: 'about', items: [ 'About' ] }
    ];

    // Remove some buttons, provided by the standard plugins, which we don't
    // need to have in the Standard(s) toolbar.
    //config.removeButtons = 'Underline,Subscript,Superscript';
    config.removeButtons = 'Underline,Strike,Styles,Font,Image,Iframe,TextColor,BGColor';
    // set some recommend defaults
    config.extraPlugins = 'magicline,image2';
    config.extraAllowedContent = 'div;p;span;ul;ol;li;table;td;style;*[id];*(*);*{*}';
    config.forcePasteAsPlainText = true;
    config.pasteFromWordRemoveFontStyles = true;
    config.pasteFromWordRemoveStyles = true;
    config.pasteFromWordPromptCleanup = true;
    config.protectedSource.push(/<i[^>]*><\/i>/g);
    config.protectedSource.push(/<span[^>]*><\/span>/g);

    config.image2_altRequired = true;
    config.image2_alignClasses = ['image-left', 'image-center', 'image-right'];
    config.image2_captionedClass = 'image-captioned';
    config.format_tags = 'p;h5';
    config.contentsCss = 'template/inc_css/ckeditor.css';

};

[Oliver Georgi]

Danke für das Aufdröseln.

ABER die Konfiguration NICHT hier include/inc_ext/ckeditor/config.js vornehmen! Mit einem Update geht das zumeist verloren.

Alle custom Anpassungen haben hier template/config/ckeditor zu erfolgen. Dort finden sich Beispieldateien.

Bildschirmfoto 2020-05-13 um 08.11.59.png (102.86 KiB) Viewed 8157 times

Vor allem lassen sich damit angepasste Versionen für die mehrfach verfügbaren CKEditor-Instanzen (zum Beispiel Reiter/Tabs) wie für die sonstigen WYSIWYG-Bereiche definieren.

[nameless1]

super arbeit. danke!
vllt. ins wiki in github verschieben? @oliver

[Oliver Georgi]

super arbeit. danke!
vllt. ins wiki in github verschieben? @oliver

Ich habe Wiki zum Bearbeiten (braucht GitHub Account) freigegeben – gibt dort auch schon einen Eintrag:
https://github.com/slackero/phpwcms/wik ... tion/_edit

[nameless1]

Cool. Danke!
Überarbeitest Du @santscho

[santscho]

Alle custom Anpassungen haben hier template/config/ckeditor zu erfolgen. Dort finden sich Beispieldateien.
Vor allem lassen sich damit angepasste Versionen für die mehrfach verfügbaren CKEditor-Instanzen (zum Beispiel Reiter/Tabs) wie für die sonstigen WYSIWYG-Bereiche definieren.

Oh, das habe ich nicht gewusst. Ist natürlich viel besser so. Und wie kann man den CKEditor-Instanzen die entsprechende config.js zuteilen? durch das anfügen von z.B. "tabs" (ckeditor.config-tabs.sample.js)?

[Uwe367]

Danke dir Ralph. Sehr aufschlußreich

[Oliver Georgi]

Und wie kann man den CKEditor-Instanzen die entsprechende config.js zuteilen? durch das anfügen von z.B. "tabs" (ckeditor.config-tabs.sample.js)?

Einfach das .sample herausnehmen.

Code: Select all

ckeditor.config.js
ckeditor.config-tabs.js

[santscho]

Einfach das .sample herausnehmen.

...mit dem -tabs funktioniert das. Habe mal versucht mit:

Code: Select all

ckeditor.config-wysiwyg.js

Code: Select all

ckeditor.config-images.js

scheint so, als wäre diese Funktion nicht für alle CPs verfügbar. Ist aber auch nicht schlimm. In den 15 Jahren mit phpwcms auch nie vermisst.

[Oliver Georgi]

Nein, das hast Du mißverstanden – -tabs bezieht sich nur auf die CKEDitor-Instanzen, wo es zur mehrfach Nutzung in einem CP kommen kann. Das betraf bei Einführung nur den CP Tabs, inzwischen greift das auch für Custom WYSIWYG-Felder in den CPs, die benutzerdefinierte Felder unterstützen.

Wäre aber interessanter Ansatz, das auch auf weitere CPs auszuweiten.