Wie lässt sich den WYSIWYG-Editor mit Plugins erweitern?

Das Verhalten des WYSIWYG-Editors kann durch Plugins oder individuellen Erweiterungen mittels JavaScript nach belieben angepasst werden.

Die Konfiguration erfolgt über die Datei Wysiwyg.yml des jeweiligen Themes. Im Abschnitt Config können direkt https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html gesetzt werden. Beispiel:

Config:
  -    config.bodyId = 'mystyle'
  -    config.forcePasteAsPlainText = true;
  -    config.enterMode = CKEDITOR.ENTER_P;
  -    config.shiftEnterMode = CKEDITOR.ENTER_BR;

Im Abschnitt Code kann direkt JavaScript-Code eingefügt werden, welcher vor der Initialisierung des WYSIWYG-Editors ausgeführt werden kann. Beispiel:

Code:
  -     CKEDITOR.on('instanceReady', myCustomFn);
  -     CKEDITOR.on('dialogDefinition', myCustomDialogFn);

Komplettes Beispiel einer möglichen Wysiwyg.yml Datei:

Templates:  
-    title: Bild und Titel    image: /images/Wysiwyg/template1.gif    description: Bild mit einem Titel und Text, der das Bild umfliesst.    html: <h3><img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />Hier den Titel einfügen</h3><p>Hier den Text einfügen</p>  -    title: Zwei Spalten mit Titel    image: /images/Wysiwyg/template2.gif    description: Zwei Spalten, die beide einen Titel und Text beinhalten.    html: <div class="row"><div class="col-md-6"><h2>Hier den Titel einfügen</h2>Hier den Text einfügen <br/> </div><div class="col-md-6"><h2 >Title</h2>Hier den Text einfügen <br/></div></div>Text goes here  -    title: Text und Tabelle    image: /images/Wysiwyg/template3.gif    description: Ein Titel mit Text und einer Tabelle.    html: <div style="width: 80%"><h3>Hier den Titel einfügen</h3><table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1"><caption style="border:solid 1px black"><strong> Hier den Tabellentitel einfügen</strong></caption><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table><p>Type the text here</p></div>Config:  -    config.bodyId = 'mystyle'  -    config.forcePasteAsPlainText = true;  -    config.enterMode = CKEDITOR.ENTER_P;  -    config.shiftEnterMode = CKEDITOR.ENTER_BR;Code:  -     CKEDITOR.on('instanceReady', myCustomFn);  -     CKEDITOR.on('dialogDefinition', myCustomDialogFn);