ckeditor konfigurieren
Posted: Wed 13. May 2020, 02:44
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:
Buttons entfernen
In diesem Beispiel möchte ich Textformatierungen, Styles, Schriften, Bilder, iFrame, Textfarbe und Hintergrundfarbe deaktivieren. Einfach eine config.removeButtons-Konfiguration einfügen:
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:
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:
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:
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:
- 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.jsIn 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';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';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';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;
}
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';
};
