ProcessWire - Editor

HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)

Links

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

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.

Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Zum Teil funktionieren Sie aber ncoh. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten

Konfiguration

Buttons

Im Backend anpassen

Format Stile

In der Feldkonfiguration unter

Input > Format Tags

Eigene Styles

1. Styles Dropdown aktivieren

Feldkonfiguration unter CK Editor Toolbar

Styles

hinzufügen (am besten hinter Format)

2.Styles Datei hinzufügen Datei unter Eigenes JS Styles Set angeben...

customstyles:/site/modules/InputfieldCKEditor/mystyles.js

und Datei anlegen. Die sieht z.B. so aus:

  CKEDITOR.stylesSet.add( 'customstyles', [
   { 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)

Hinweis: Nicht mystyles:/site/... Verwenden das führt zu Problemen im Backend. Mal sind die Stile da mal nicht. Also z.B. customstyles in der Pfadangabe UND in der Datei verwenden.

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

Snippets

Praktisches Beispiel 1

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

Editor Toolbar einstellen

Interessant ist hier der Eintrag Styles. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen.

Guter Standard mit Tabellen und Styles Dropdown

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

Tags formatieren

Hier kann man festlegen welche Tags im Format Dropdown ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.

p;h2;h3;h4;h5;h6;pre;address

Styles festlegen

Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt Eigenes Editor-JS-Style-Set fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:

customstyles:/site/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel

CKEDITOR.stylesSet.add( 'customstyles', [
 /* Blockstyles */
 { name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
 { name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
 { name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
 { name: 'Heading Divider', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
 { name: 'Heading Line', element: 'h', attributes: { 'class': 'uk-heading-line' } },
 { name: 'Heading Bullet', element: 'h', attributes: { 'class': 'uk-heading-bullet' } },
 { name: 'Liste mit Kugel (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
 { name: 'Liste mit Linie (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-divide'}}
/* Inline Styles */
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

Hinweis: Span Elemente sind oft p Elementen vorzuziehen, da sie Inline angewendet werden können. So ist es möglich einen Muted Text innerhalb eines Absatzes einzusetzen.

Einfaches Beispiel

CKEDITOR.stylesSet.add( 'customstyles', [
 { name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
 { name: 'Klein', element: 'small' },
 { name: 'Gelöscht', element: 'del' },
 { name: 'Eingefügt', element: 'ins' },
 { name: 'Zitat', element: 'cite' }
]);

Weiter Forum Beispiele

https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

Konfiguration CKEditor in PW (alt)

/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->mystyles.js

anpassen. Im Backend den Pfad hinzufügen (siehe Beispiel unten)

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

customstyles:/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.