ProcessWire - Editor
Links
https://processwire.com/talk/topic/3023-module-ckeditor/
CKEditor
Ist der Standard Editor in PW
Konfiguration CKEditor
Ist inzwischen in /sites ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in wire/
site/modules/InputfieldCKEditor/
Was - Wo ?
config.js config.[fieldname.]js
Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,
mystyles.js
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
CKEditor Buttons
Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht 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
Kann man im Modulverzeichnis hinterlegen. Vorsicht bei Updates des Moduls. Zumindest früher wurde die Datei dann überschrieben.
/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' ];
};
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
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
