WBCE CMS Forum

christoph

Member

Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Hallo zusammen,

es ist das erste mal das ich hier nachfrage und hoffe das ich auch richtig bin.
Ich möchte im CKeditor die Toolbar mit eigenen Schaltflächen erweitern wo ich mit einem Klick HTML Code oder PHP Code im Editor einfügen kann den ich selber zusammenstelle.

Warum? Ganz einfach, ich habe über ein eigenes Templat Bootstrap eingebunden und würde nun gerne mit einem Klick einen Button (und viele andere Komponenten) einfügen und dazu benötige ich z. Bsp. für einen roten Button folgenden Code:

<a class="btn  btn-danger  btn-lg" href="url.de">https://url.de</a>

Klar kann ich dies auch mit dem LinkEditor machen aber es gibt noch viel mehr Möglichkeiten, die ich gerne im Editor haben möchte, was Bootstrap zur Verfügung stellt. Ich habe auch mit Bootstrap ein Template programmiert das ein "onepager" ist und über Scrolling läuft.
Deshalb wäre es praktisch wenn ich den CKEditor entsprechend anpassen könnte.

Vielleicht nicht möglich aber falls es irgendwo eine Anleitung gibt oder jemand mir helfen kann wäre ich sehr dankbar.

Ich habe Websitebaker CE 1.6.1 mit dem CKDeveloper Editor 4.

Gruß Christoph

webbird

Administrator

Re: Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Auf der Homepage des CKE gibt es eigentlich alles, was Du brauchst.

https://ckeditor.com/docs/ckeditor4/lat … index.html

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

christoph

Member

Re: Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Danke erst mal,

die Seite kenne ich, aber ich dachte unter Website Baker CE wurde der CKEditor speziell angepasst?
Also die entsprechenden js oder css Dateien gibt es nicht oder sind in einem anderen Ordner gespeichert.
Z. Bsp wo ist die Datei plugin.js?
In der Dokumentation von ckeditor.com wird erklärt:

    ckeditor root/
        plugins/
            abbr/
                icons/
                    abbr.png
                dialogs/
                    abbr.js
                plugin.js

Wo sind diese Daten unter Website Baker CE?

Oder verstehe ich da etwas falsch?

Gruß Christoph

florian

Administrator

Re: Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Zunächst: Bitte hör auf "WebsiteBaker CE" zu schreiben, damit machst Du Dir weder hier noch bei den Kollegen™ Freunde. Dieses Projekt hier heißt schon seit geraumer Zeit einfach nur "WBCE".

Die ganz normale Standardstruktur des CKE beginnt bei WBCE unter /modules/ckeditor/ckeditor. Plugins werden als Unterverzeichnisse im Verzeichnis modules/ckeditor/ckeditor/plugins angelegt, und in diesen ist dann jeweils eine plugin.js sowie ggf. die Sprach- und Grafikdateien des jeweiligen Plugins.
Beispiel: Das standardmäßig mit ausgelieferte Plugin "Shybutton", das einen bedingten Trennstrich (&shy;) einfügt:
https://github.com/WBCE/CKEditor/tree/m … bshybutton

Das heißt, für den roten Button müsstest Du also z.B. .../ckeditor/plugins/redbutton anlegen und da dann plugin.js usw. erstellen.
Ich sage aber gleich dazu, dass das möglicherweise nicht so funktioniert, wie Du Dir das wünschst, weil der CKE teilweise sehr restriktiv ist, was eingefügten Code betrifft. Was er nicht kennt oder als syntaktisch "falsch" beurteilt, schmeißt er raus bzw. verkrüppelt es, so dass es nicht mehr funktioniert.

Clientseitig PHP-Code einfügen funktioniert sowieso nicht. Das müsstest Du über Droplets lösen (Admintools > Droplets). Es ist mMn einfacher, ein Droplet für den Button zu erstellen, das dann im CKE einfach aufgerufen würde mit [[redbutton?text=Jetzt bestellen&Link=irgendwas]], und da wäre dann eben auch PHP-Code möglich.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

christoph

Member

Re: Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Danke für den Hinweis werde nur noch "WBCE" verwenden, war mir nicht bewußt.

Dann danke für Deine Bemühungen und ich werde es genauer ansehen und ich sehe eine Chance es zu benutzen.
Sollte es laufen werde ich es der Community zur Verfügung stellen.
Ich habe in der Zwischenzeit Bootstrap 5 im WBCE eingebunden und einen onepager erstellt was gut läuft.

Danke nochmals ich berichte wenn es läuft.

berny

Member

Re: Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Droplets sind mächtig aber trotzdem einfach zu machen.

christoph

Member

Re: Ckeditor Toolbar erweitern mit eigenen Schaltflächen und Code

Ich habe nun doch Droplets genommen läuft genau so gut.

Danke für den Hinweis