ProcessWire - Editor
Links
https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
Der CKEditor
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.
Konfiguration CKEditor in PW
Ist inzwischen in
/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.
Wo stellt man was ein ?
Hinweis: Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen. Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig für alle Felder im Backend (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.
Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,
Alles was der Editor beim Eingeben mit JavaScript bearbeitet. Außerdem Style Auswahl anpassen alle Optionen die mit CKEDITOR. anfangen
content.css
Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.
contents-inline.css
Stile für die Vorschau beim Inline Editor
Feldkonfiguration im Admin Bereich PW
Hier muß die Toolbar eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die CSS Datei für die Inline Styles angegeben werden.
Überschreiben in der config.js hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..
Auch Plugins müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
CKEditor Buttons anpassen
Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der Feldkonfiguration unter dem Reiter Eingabe. Beispiel: Hier werden Buttons für die Textausrichtung hinzugefügt.
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat NumberedList, BulletedList, -, Blockquote PWLink, Unlink, Anchor PWImage, Table, HorizontalRule, SpecialChar PasteText, PasteFromWord,-,Undo,Redo Scayt, -, Sourcedialog
Default Einstellungen
Todo: TESTEN ob das wirklich funktioniert Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.
Eigene Styles
Eigene Stile zur Auswahl im Styles Dropdown
site->modules->InputfieldCKEditor->mystyle.js
Example:
/**
* mystyles.js
*
* This file may be used when you have "Styles" as one of the items in your toolbar.
* add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in
* Field Settings > CKEditor Settings > Custom Editor JS Styles Set
*
* For a more comprehensive example, see the file ./ckeditor-[version]/styles.js
*
*/
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet
Konfigurationsbeispiele
Im Adminbereich im content_main Feld:
CKEditor Toolbar
Added justify buttons...
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat NumberedList, BulletedList, -, Blockquote PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar PasteText, PasteFromWord,-,Undo,Redo Scayt, -, Sourcedialog
Blöcke anzeigen, Smileys
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript, JustifyLeft ,JustifyCenter ,JustifyRight , -, NumberedList, BulletedList, -, Blockquote PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat, PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
Custom Editor CSS File
Für die im Editor angezeigten Stile
site/modules/InputfieldCKEditor/contents.css
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');
.cke_editable {
font-size: 14px;
line-height: 1.6em;
}
.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
Custom Editor JS File
Für die Auswahlfelder in der Toolbar
mystyles:/site/modules/InputfieldCKEditor/mystyles.js
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
config.js
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
Plugins hinzufügen
- https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
CKEditor allgemeines Wissen
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
Konfiguration
Toolbar
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
Plugins
Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.
Beispiel Widget Plugin:
If you want to add the plugin manually, you will need to:
- Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
- Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
- Download and configure all its dependencies, too.
In PW
