ProcessWire - Editor: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(40 dazwischenliegende Versionen von 8 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
Dieser Artikel bezieht sich auf den alten CKEditor. In neueren Versionen wird der TinyMCE Editor verwendet.
 +
 +
[[ProcessWire - TinyMCE Editor]]
 +
 +
'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
 
== Links ==
 
== Links ==
−
https://processwire.com/talk/topic/3023-module-ckeditor/
 
  
−
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
+
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/
 +
 +
[[CKEditor - Snippets]]
 +
 
 +
CHECKEN:
 +
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
 +
Automatische Konfiguration für alle CKEditor Felder
 +
 
 +
== Tipp - effektives Anpassen ==
 +
Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.
  
−
== Der CKEditor ==
+
== Der CKEditor in ProcessWire ==
 
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.
 
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==
+
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
−
Ist inzwischen in  
+
 
 +
== Konfiguration ==
 +
 
 +
=== Buttons ===
 +
Im Backend anpassen
 +
 
 +
=== Format Stile ===
 +
In der Feldkonfiguration unter
 +
Input > Format Tags
 +
 +
=== Eigene Styles ===
 +
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.
 +
 
 +
==== Styles Dropdown Feld im Editor aktivieren ====
 +
'''1. Styles Dropdown aktivieren'''
 +
 
 +
Feldkonfiguration unter CK Editor Toolbar
 +
Styles
 +
hinzufügen (am besten hinter Format)
 +
 
 +
==== Eigene Stildefinitionen in der Styles Datei ====
 +
''' 2.Styles Datei hinzufügen '''
 +
Datei unter Eigenes JS Styles Set angeben...
 +
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
 +
und Datei anlegen. Die sieht z.B. so aus:
 +
 
 +
<syntaxhighlight lang="javascript">
 +
  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)
 +
</syntaxhighlight>
 +
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.'''
 +
 
 +
Ausführliches Beispiel:
 +
 
 +
<syntaxhighlight lang="javascript">
 +
/* v1.2 */
 +
CKEDITOR.stylesSet.add( 'customstyles', [
 +
 
 +
/* Objektstile */
 +
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },
 +
 
 +
/* Blockstyles */
 +
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
 +
{ 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: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
 +
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
 +
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
 +
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
 +
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
 +
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
 +
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
 +
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
 +
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
 +
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},
 +
 
 +
/* Inline Styles */
 +
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
 +
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
 +
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
 +
{ 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: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
 +
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
 +
{ 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&ouml;scht', element: 'del' },
 +
{ name: 'Eingefügt', element: 'ins' },
 +
{ name: 'Zitat', element: 'cite' }
 +
]);
 +
 
 +
// Auch Code ist möglich:
 +
// add inline font-size from 12px to 48px
 +
for(var i = 12; i <= 48; i++) {
 +
    myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
 +
}
 +
</syntaxhighlight>
 +
 
 +
=== Extra Allowed Content ===
 +
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
 +
site->modules->InputfieldCKEditor->mystyle.js
 +
<syntaxhighlight lang="javascript">
 +
config.allowedContent = true;
 +
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
 +
CKEDITOR.dtd.$removeEmpty.i = 0;
 +
</syntaxhighlight>
 +
==== i Tag erlauben (Möglichkeit 2)====
 +
Siehe oben und erlaube
 +
// ALLOW <i></i>
 +
config.protectedSource.push(/<i[^>]*><\/i>/g);
 +
 
 +
==== ExtraAllowedContent Beispiel: Buttons erlauben ====
 +
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
 +
<pre>
 +
config.allowedContent = true;
 +
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
 +
CKEDITOR.dtd.$removeEmpty.i = 0;
 +
</pre>
 +
 
 +
== Aussehen des Editors anpassen ==
 +
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:
 +
 
 +
=== Styles Dropdown verbessern ===
 +
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/
 +
 
 +
==== 1. Styles im Dropdown verbessern ====
 +
 
 +
Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.
 +
 
 +
templates/modules/CKEditor/contents.css
 +
<syntaxhighlight lang="css">
 +
/* Styles to load in CKEditor for better usabilty */
 +
 
 +
.cke_panel_grouptitle {
 +
    position: sticky;
 +
    top: 0;
 +
    z-index: 99;
 +
  }
 +
 
 +
  html.cke_panel_container {
 +
    scroll-behavior: auto;
 +
  }
 +
 
 +
  html.cke_panel_container .cke_panel_listItem > a * {
 +
      margin: 0 !important;
 +
      font-size: 0.97rem !important;
 +
  }
 +
 
 +
  [data-list-style] li {
 +
    margin-bottom: 0.5rem;
 +
  }
 +
 
 +
  [data-list-style="decimal-leading-zero"] {
 +
    list-style-type: decimal-leading-zero;
 +
  }
 +
 
 +
  [data-list-style="upper-roman"] {
 +
    list-style-type: upper-roman;
 +
  }
 +
 
 +
  [data-list-style="checkmark"] {
 +
    color: inherit;
 +
    list-style: none;
 +
    padding-left: 1.25rem;
 +
  }
 +
 
 +
  [data-list-style="checkmark"] li {
 +
    position: relative;
 +
  }
 +
 
 +
  [data-list-style="checkmark"] li::before {
 +
    content: '\2714';
 +
    position: absolute;
 +
    left: -1.1rem;
 +
  }
 +
</syntaxhighlight>
 +
 
 +
== 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 ==
 +
Siehe auch
 +
https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/
 +
=== Tabellenmodul anpassen ===
 +
<syntaxhighlight lang="javascript">
 +
Here is another snippet that I use to get rid of unwanted table properties:
 +
 
 +
// Remove unwanted attributes from tables
 +
CKEDITOR.on('dialogDefinition', function(ev) {
 +
  var dialogName = ev.data.name;
 +
  var dialogDefinition = ev.data.definition;
 +
 
 +
  if (dialogName == 'table') {
 +
    var info = dialogDefinition.getContents('info');
 +
    info.remove('txtWidth');
 +
    info.remove('txtHeight');
 +
    info.remove('txtBorder');
 +
    info.remove('txtCellPad');
 +
    info.remove('txtSummary');
 +
    info.remove('txtCellSpace');
 +
    info.remove('cmbAlign');
 +
    var advanced = dialogDefinition.getContents('advanced');
 +
    advanced.remove('advStyles');
 +
    advanced.remove('advId'); //Id attribute
 +
    advanced.remove('advLangDir'); // writing direction
 +
    advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
 +
  }
 +
</syntaxhighlight>
 +
 
 +
Put this code inside your custom config.js
 +
 
 +
=== 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
 +
<pre>
 +
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
 +
</pre>
 +
'''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.
 +
<pre>
 +
p;h2;h3;h4;h5;h6;pre;address;div
 +
</pre>
 +
 
 +
''' 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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
 +
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
 +
 
 +
UIkit Beispiel
 +
<syntaxhighlight lang="javascript">
 +
/* v1.2 */
 +
CKEDITOR.stylesSet.add( 'customstyles', [
 +
 
 +
/* Objektstile */
 +
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },
 +
 
 +
/* Blockstyles */
 +
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
 +
{ 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: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
 +
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
 +
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
 +
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
 +
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
 +
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
 +
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
 +
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
 +
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
 +
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},
 +
 
 +
/* Inline Styles */
 +
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
 +
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
 +
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
 +
{ 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: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
 +
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
 +
{ 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&ouml;scht', element: 'del' },
 +
{ name: 'Eingefügt', element: 'ins' },
 +
{ name: 'Zitat', element: 'cite' }
 +
]);
 +
</syntaxhighlight>
 +
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
 +
<syntaxhighlight lang="javascript">
 +
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' }
 +
]);
 +
</syntaxhighlight>
 +
 
 +
''' Stile im Editor einbinden '''
 +
 
 +
=== DIV-Stile ===
 +
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
 +
<pre>
 +
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
 +
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor
 +
 
 +
PWImage, Table, HorizontalRule, SpecialChar
 +
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
 +
</pre>
 +
 
 +
== Weiter Forum Beispiele ==
 +
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/
 +
 
 +
 
 +
== Konfiguration CKEditor in PW (alt)==
 +
 
 
  /sites  
 
  /sites  
 
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in  
 
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in  
Zeile 71: Zeile 411:
  
 
=== Eigene Styles ===
 
=== Eigene Styles ===
−
Eigene Stile zur Auswahl im Styles Dropdown
+
Eigene Stile zur Auswahl im '''Styles''' Dropdown
−
  site->modules->InputfieldCKEditor->mystyle.js
+
  site->modules->InputfieldCKEditor->mystyles.js
−
Example:
+
anpassen.
−
<pre>
+
Im Backend den Pfad hinzufügen (siehe Beispiel unten)
−
/**
 
−
  * 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'} },
 
−
  ]);
 
−
</pre>
 
  
−
http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet
 
  
 
=== Konfigurationsbeispiele ===
 
=== Konfigurationsbeispiele ===
Zeile 118: Zeile 442:
  
 
==== Custom Editor CSS File ====
 
==== Custom Editor CSS File ====
−
Für die im Editor angezeigten Stile
+
Für die '''im Editor angezeigten Stile'''
 
  site/modules/InputfieldCKEditor/contents.css
 
  site/modules/InputfieldCKEditor/contents.css
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
Zeile 142: Zeile 466:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 
==== Custom Editor JS File ====
 
==== Custom Editor JS File ====
 +
 
Für die Auswahlfelder in der '''Toolbar'''
 
Für die Auswahlfelder in der '''Toolbar'''
−
  mystyles:/site/modules/InputfieldCKEditor/mystyles.js
+
  customstyles:/site/modules/InputfieldCKEditor/mystyles.js
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
   CKEDITOR.stylesSet.add( 'mystyles', [
 
   CKEDITOR.stylesSet.add( 'mystyles', [
Zeile 160: Zeile 486:
 
   config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
 
   config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
 
</syntaxhighlight>
 
</syntaxhighlight>
−
=== 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 hinzufügen ==
 +
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
 +
Readme im Plugins Ordner
 +
=== Beispiel DIV Plugin ===
 +
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
 +
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.
  
−
=== Plugins ===
+
# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
−
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.
+
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
−
 
+
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.
−
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===
 
−
==== Backend ====
 
−
Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen:
 
−
 
 
−
'''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. Hiermit kann man Stile für kom
 
−
<pre>
 
−
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
 
−
NumberedList, BulletedList, -, Blockquote
 
−
PWLink, Unlink, Anchor
 
  
−
PWImage, Table, HorizontalRule, SpecialChar
+
== Probleme beheben ==
−
PasteText, PasteFromWord,-,Undo,Redo
+
=== Bilder - width Attribut beschränkt auf max. 1200px ===
−
Scayt, -, Sourcedialog
 
−
</pre>
 
−
'''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.
+
Suchbegriffe: CKEditor Bilder max 1200
−
<pre>
 
−
p;h2;h3;h4;h5;h6;pre;address
 
−
</pre>
 
  
−
''' Styles festlegen '''
+
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
 +
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
 +
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
 +
There look for this bit... "HTML.MaxImgLength";i:1200
 +
Change 1200 to your desired maximum value.
  
−
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:
+
=== Cursor springt an den Anfang zurück ===
−
mystyles:/site/modules/InputfieldCKEditor/mystyles.js
 
  
−
Standardbeispiel
+
=== Eigene Styles funktionieren nicht ===
−
<syntaxhighlight lang="javascript">
+
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
−
CKEDITOR.stylesSet.add( 'mystyles', [
+
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/
−
{ name: 'Inline Code', element: 'code' },
 
−
{ name: 'Inline Quotation', element: 'q' },
 
−
{ name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
 
−
{ name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
 
−
{ name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },
 
−
{ name: 'Small', element: 'small' },
 
−
{ name: 'Deleted Text', element: 'del' },
 
−
{ name: 'Inserted Text', element: 'ins' },
 
−
{ name: 'Cited Work', element: 'cite' }
 
−
]);
 
−
</syntaxhighlight>
 
−
Modifiziertes Beispiel
 
−
<syntaxhighlight lang="javascript">
 
−
CKEDITOR.stylesSet.add( 'mystyles', [
 
−
{ name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },
 
−
{ name: 'Klein', element: 'small' },
 
−
{ name: 'Gelöscht', element: 'del' },
 
−
{ name: 'Eingefügt', element: 'ins' },
 
−
{ name: 'Zitat', element: 'cite' }
 
−
]);
 
−
</syntaxhighlight>
 
  
−
== Weiter Forum Beispiele ==
+
=== Editor wird nicht mehr im Backend angezeigt ===
−
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/
+
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

Aktuelle Version vom 3. März 2025, 17:52 Uhr

Dieser Artikel bezieht sich auf den alten CKEditor. In neueren Versionen wird der TinyMCE Editor verwendet.

ProcessWire - TinyMCE Editor

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

Links[Bearbeiten]

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/

CKEditor - Snippets

CHECKEN: 

https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/

Automatische Konfiguration für alle CKEditor Felder

Tipp - effektives Anpassen[Bearbeiten]

Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.

Der CKEditor in ProcessWire[Bearbeiten]

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[Bearbeiten]

Buttons[Bearbeiten]

Im Backend anpassen

Format Stile[Bearbeiten]

In der Feldkonfiguration unter 

Input > Format Tags

Eigene Styles[Bearbeiten]

Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

Styles Dropdown Feld im Editor aktivieren[Bearbeiten]

1. Styles Dropdown aktivieren

Feldkonfiguration unter CK Editor Toolbar 

Styles

hinzufügen (am besten hinter Format)

Eigene Stildefinitionen in der Styles Datei[Bearbeiten]

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

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

Ausführliches Beispiel: 

/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ 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: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ 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: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ 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&ouml;scht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
    myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}

Extra Allowed Content[Bearbeiten]

Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der HTML Purifier filtert zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten. 

site->modules->InputfieldCKEditor->mystyle.js

config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;

i Tag erlauben (Möglichkeit 2)[Bearbeiten]

Siehe oben und erlaube 

// ALLOW 
config.protectedSource.push(/<i[^>]*><\/i>/g);

ExtraAllowedContent Beispiel: Buttons erlauben[Bearbeiten]

Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken. 

config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;

Aussehen des Editors anpassen[Bearbeiten]

Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

Styles Dropdown verbessern[Bearbeiten]

https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

1. Styles im Dropdown verbessern[Bearbeiten]

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css 

/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
    position: sticky;
    top: 0;
    z-index: 99;
  }
  
  html.cke_panel_container {
    scroll-behavior: auto;
  }
  
  html.cke_panel_container .cke_panel_listItem > a * {
      margin: 0 !important;
      font-size: 0.97rem !important;
  }
  
  [data-list-style] li {
    margin-bottom: 0.5rem;
  }
  
  [data-list-style="decimal-leading-zero"] {
    list-style-type: decimal-leading-zero;
  }
  
  [data-list-style="upper-roman"] {
    list-style-type: upper-roman;
  }
  
  [data-list-style="checkmark"] {
    color: inherit;
    list-style: none;
    padding-left: 1.25rem;
  }
  
  [data-list-style="checkmark"] li {
    position: relative;
  }
  
  [data-list-style="checkmark"] li::before {
    content: '\2714';
    position: absolute;
    left: -1.1rem;
  }

CKEditor allgemeines Wissen[Bearbeiten]

Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.

Konfiguration[Bearbeiten]

Toolbar[Bearbeiten]

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar


Plugins[Bearbeiten]

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[Bearbeiten]

Siehe auch 

https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/

Tabellenmodul anpassen[Bearbeiten]

 Here is another snippet that I use to get rid of unwanted table properties:

// Remove unwanted attributes from tables
CKEDITOR.on('dialogDefinition', function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if (dialogName == 'table') {
    var info = dialogDefinition.getContents('info');
    info.remove('txtWidth');
    info.remove('txtHeight');
    info.remove('txtBorder');
    info.remove('txtCellPad');
    info.remove('txtSummary');
    info.remove('txtCellSpace');
    info.remove('cmbAlign');
    var advanced = dialogDefinition.getContents('advanced');
    advanced.remove('advStyles');
    advanced.remove('advId'); //Id attribute
    advanced.remove('advLangDir'); // writing direction
    advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
  }

Put this code inside your custom config.js

Praktisches Beispiel 1[Bearbeiten]

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;div

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern: 

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

UIkit Beispiel 

/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ 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: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ 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: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ 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&ouml;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' }
]);

Stile im Editor einbinden

DIV-Stile[Bearbeiten]

Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc. 

Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog

Weiter Forum Beispiele[Bearbeiten]

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


Konfiguration CKEditor in PW (alt)[Bearbeiten]

/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 ?[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Eigene Stile zur Auswahl im Styles Dropdown 

site->modules->InputfieldCKEditor->mystyles.js

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


Konfigurationsbeispiele[Bearbeiten]

Im Adminbereich im content_main Feld:

CKEditor Toolbar[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner

Beispiel DIV Plugin[Bearbeiten]

Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style. Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

  1. Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
  2. Ordner in site/modules/InputfieldCKEditor/plugins kopieren
  3. Modul in den Field Settings aktivieren (evtl. geht auch config.extraPlugins = 'div'; in der config.js hinzuzufügen - nicht getestet.

Probleme beheben[Bearbeiten]

Bilder - width Attribut beschränkt auf max. 1200px[Bearbeiten]

Suchbegriffe: CKEditor Bilder max 1200 

https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/

Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder 

wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser

There look for this bit... "HTML.MaxImgLength";i:1200 Change 1200 to your desired maximum value.

Cursor springt an den Anfang zurück[Bearbeiten]

Eigene Styles funktionieren nicht[Bearbeiten]

  • customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
  • Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

Editor wird nicht mehr im Backend angezeigt[Bearbeiten]

Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&oldid=27272“