CKEditor eigenes CSS

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
cmb
Posts: 13423
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Wed Feb 29, 2012 6:36 pm

Hallo Gert,
Gert wrote:jedenfalls verhalten sich TinyMCE und CKEditor derart unterschiedlich bezüglich der Styles, dass man diesbezüglich keine allgemeingültige Empfehlung für Template Designer rausgeben kann. Das muss sich jeder, der damit arbeiten will, selbst zurechtrücken in der stylesheet.css.
Ja, das ist wohl leider so. Oder man definiert die gewünschten Styles gleich in der/den init_*.js Datei(en). Das ist eigentlich recht einfach machbar, und dann werden wirklich nur die gewünschten Styles dort angezeigt. Doku für tinyMCE bzw. CKEditor.

Wäre vielleicht gut, solche Informationen mal an zentraler Stelle (XH-Wiki oder help.htm) zu sammeln.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Gert
Posts: 3075
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

Re: CKEditor eigenes CSS

Post by Gert » Wed Feb 29, 2012 8:10 pm

cmb wrote:Oder man definiert die gewünschten Styles gleich in der/den init_*.js Datei(en).
Dann sind sie aber nicht mehr Template-spezifisch. In einem hellen Template will ich meist einen dunklen Rahmen um ein Bild, in einem dunklen Template einen hellen.

Bestimmte Vorstellungen sind halt mit Konfektionsware nicht realisierbar, da muss man halt zum Schneider, und das ist auch gut so, davon lebe ich, ich bin der Schneider ;)

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

cmb
Posts: 13423
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Wed Feb 29, 2012 8:37 pm

Hallo Gert,

das war als alternative Möglichkeit gedacht, wie der Änderungsschneider seine Arbeit durchführen kann: entweder Änderung an Template/Stylesheet oder am JS.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Martin
Posts: 346
Joined: Thu Oct 23, 2008 11:57 am
Contact:

Re: CKEditor eigenes CSS

Post by Martin » Wed Feb 29, 2012 9:52 pm

Hallo Christoph,
Christoph wrote:PS: Und beim tinyMCE muss man wissen, dass Blocklevel-Stile nur zugewiesen werden können, wenn der ganze Block selektiert ist ...
das stimmt aber, glücklicherweise, so nicht. Man muss ihm die Stile nur als Block-Stile mitteilen: Siehe TinyMCE-Doku, hier und hier. Dann muss nur der Cursor drinstehen. Damit kann man dann auch für den Anwender (Kunden) sehr komfortabel den Editor für die gewünschten (Absatz-)Formate einrichten - und das ganze für die Textverarbeitung irrelevante CSS-Klassengedöns außen vor lassen. (In den TinyMCE-inits steckt ein auskommentiertes Beispiel für ein paar Formate.)

Aber, wie Gert schon sagte, das ist dann Maßschneiderei. Die von den downloadbaren Templates nicht geleistet werden kann, aber dazugehört, wenn man einem Kunden eine Seite einrichtet.

LG

Martin

cmb
Posts: 13423
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Wed Feb 29, 2012 10:10 pm

Hallo Martin,

danke für die Richtigstellung. Ich hatte mich noch nicht wirklich mit den style_formats beschäftigt, sondern bisher nur auf das automatische Parsen der Stylesheets verlassen.
Martin wrote:Die von den downloadbaren Templates nicht geleistet werden kann
Na ja, sie könnte schon geleistet werden. Aber das würde für die Designer bedeuten, das wenigstens für 2 Editoren (wer weiß, vielleicht kommen ja noch andere) auszuarbeiten. Und vielleicht ist es sowieso besser, das anwenderspezifisch einzurichten, je nachdem wieviele Stile der User auch nutzt.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

Re: CKEditor eigenes CSS

Post by wsim123 » Sat Jun 06, 2015 10:42 am

Ich habe ein kleines anderes Problem mit ckeditor Cmsimple xh 2.1

Ich will ein Pluginmodul wie beispielsweise codetag hinzufügen von http://ckeditor.com/addon/codeTag
und bekomme den Hinweis config.extraPlugins = 'codeTag'; einzufügen. In cmsipmle muss ich dann das Plugin unter
ckeditor\plugins einfügen und bei ckeditor/config.js config.extraPlugins = 'codeTag'; n eintragen.
Da steht aber sonst nicht von anderen plugins...

Also in init_minimal.js zb.

Code: Select all

   { name: 'insert',      items : [ 'Image','Codetag','codeTag' ] },
	// '/',
        { name: 'styles',      items : [ 'Styles','Format' ] },
        { name: 'tools',       items : [ 'About' ] }
einfügen. Es rührt sich aber nichts - weder mit grossem noch mit kleinem C - auch nicht bei nur einem Codetag Eintrag oder einem anderen Plugin. Was muss ich genau tun ?
Last edited by wsim123 on Sun Jun 07, 2015 11:09 am, edited 1 time in total.

cmb
Posts: 13423
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Sat Jun 06, 2015 11:30 am

wsim123 wrote:In cmsipmle muss ich dann das Plugin unter
ckeditor\plugins einfügen und bei ckeditor/config.js config.extraPlugins = 'codeTag'; n eintragen.
Der extraPlugins Eintrag muss nicht in ckeditor/config.js erfolgen, sondern in plugins/ckeditor/init/init_*.js. In welcher der vier Dateien hängt davon ab, welche "Toolbar" in der Pluginkonfiguration ausgewählt ist (Voreinstellung ist full). In diesen Dateien gibt es am Ende bereits die entsprechende Zeile:

Code: Select all

        extraPlugins : 'CMSimpleSave' //no komma after last entry
Christoph M. Becker – Plugins for CMSimple_XH

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

Re: CKEditor eigenes CSS

Post by wsim123 » Sat Jun 06, 2015 2:59 pm

cmb wrote:
wsim123 wrote:In cmsipmle muss ich dann das Plugin unter
ckeditor\plugins einfügen und bei ckeditor/config.js config.extraPlugins = 'codeTag'; n eintragen.
Der extraPlugins Eintrag muss nicht in ckeditor/config.js erfolgen, sondern in plugins/ckeditor/init/init_*.js. In welcher der vier Dateien hängt davon ab, welche "Toolbar" in der Pluginkonfiguration ausgewählt ist (Voreinstellung ist full). In diesen Dateien gibt es am Ende bereits die entsprechende Zeile:

Code: Select all

        extraPlugins : 'CMSimpleSave' //no komma after last entry
Das hatte ich auch schon probiert.... Wenn ich unten etwas eintrage ist das Menü verschwunden. Diese Module hätten dann auch keine feste Platzzuordnung, Dort wird eigentlich remove eingetragen. (http://sdk.ckeditor.com/samples/toolbar.html - > custom toolbar )
Irgendwie müssten dann die in den toolbarGroups aufgelisteteten Module doch bevorzugt im System auftauchen.

Code: Select all

  toolbarGroups: [
				{"name":"basicstyles","groups":["basicstyles"]},
				{"name":"links","groups":["links"]},
Wenn ich zB. divarea hinzufüge taucht es (ich verwende erst einmal die Minimalversion) nicht auf, auch nicht wenn ich div durch divarea ersetze . Zwischen den verschiedenen Versionen bestehen doch eigentlich nur Eintragsunterschiede in den Kategorie-js und mehr oder weniger Gruppen.
Vieleicht weiss nur Herr Hirmler als Author des Moduls weiter ? (Ich wollte codetag, divarea, codemirror,googledocs, html5validation, inserthtml4x,footnotes , liststyle, base64image u.a. einbinden). footnotes taucht zb in der full-Version mit 72 Gruppen gar nicht auf.
Vielleicht hat es auch etwas mit fehlenden Icons zu tun bzw. mit dem css der Skin wie mono etc.

Holger
Site Admin
Posts: 3239
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: CKEditor eigenes CSS

Post by Holger » Mon Jun 08, 2015 10:34 pm

cmb wrote:Der extraPlugins Eintrag muss nicht in ckeditor/config.js erfolgen, sondern in plugins/ckeditor/init/init_*.js. In welcher der vier Dateien hängt davon ab, welche "Toolbar" in der Pluginkonfiguration ausgewählt ist (Voreinstellung ist full).
Genau so ist es. Und zusätzlich muss der Button für das neue Plugin manuell in die Toolbar eingegeben werden (das geht leider beim Konzept mit den init*.js von XH wohl nicht anders umzusetzen).

Ich würde aber anders vorgehen und zuallererst einmal den Editor updaten und dann auch nicht Einzel-Plugins in eigenen Ordnern installieren (siehe weiter unten).

Das eigentliche Editor-Update hatte ich extra einfach für den User gemacht, denn ich möchte nicht mit jeder neuen CKEditor-Version ein XH-Plugin-Update machen.
Alle Zusatzdateien, wie das wichtige "CMSimpleSave" - Plugin, sind außerhalb der Ordnerstruktur des Editor-Cores und deshalb lassen sich komplette Updates des Editors komfortabel erledigen.

Die Prozedur ist eigentlich ganz einfach:
im Plugin ist eine Datei "build-config.js" enthalten (Ordner /plugins/ckeditor/ckeditor/).
Diese Datei enthält die Beschreibung aller installierten Plugins (und eines Skins) des CKEditors.
Auf der Seite http://ckeditor.com/builder ist oben rechts ein Button, um diese Datei vom lokalen Rechner hochzuladen.
Danach einfach evtl. noch ein anderes Skin, bzw. die gewünschten Sprachen) auswählen und dann den aktualisierten Editor als ZIP herunter laden.
Auf diese Weise sind dann schon automatisch alle bisher installierten Plugins des Editors enthalten.
Die neuen Dateien aus dem ZIP - bzw. den ganzen CKEditor-Ordner - dann einfach im XH-Plugin ersetzen (Ordner /plugins/ckeditor/ckeditor/*.* löschen und neue Dateien einspielen).
Das war's.
Außerdem erhält man auf diese Weise eine einzige komprimierte JS-Datei, in der auch alle Plugins enthalten sind, anstatt einer komplexen Ordnerstruktur mit mehreren (unkomprimierten) Dateien und Unterordnern je Plugin.

Will man auch mehrere Skins lokal installieren, muss man den Download lediglich mit einem anderen Skin wiederholen (ausgewählte Einträge bleiben erhalten).
Danach dann im XH-Plugin nur den Skin-Ordner des weiteren Downloads unterhalb von /plugins/ckeditor/ckeditor/skins/ hinzufügen.
Die verfügbaren Skins und Sprachen werden vom XH-Plugin automatisch erkannt.

Auf oben genannte Weise lässt sich ganz einfach der bisherige Editor in vollem Umfang aktualisieren.

Will man weitere Plugins in den Editor integrieren, wählt man sie einfach im Builder zusätzlich aus.
Die Datei "build-config.js" ist bei jedem Download mit im ZIP-Archiv enthalten und kann / sollte beim nächsten Update entsprechend wiederverwendet werden.

Allerdings ist beim CKEditor für CMSimple_XH noch ein kleiner Fallstrick enthalten, wenn man zusätzliche Plugins integriert:
Die in den /inits/init*.js - Dateien definierten Toolbars können die neu dazu gekommenen Plugins nicht automatisch erkennen und integrieren.
Zwar kann der CKEditor das eigentlich, aber damit wäre das XH eigene Konzept der verschiedenen Toolbars so nicht machbar - denke ich.
Man muss die Buttons der Zusatzplugins also manuell in die Toolbar der jeweiligen init*.js - Datei eingeben. Danach sollten sie spätestens nach löschen des Browser-Caches sichtbar und funktionsfähig sein.

User, die ein eigenes Editor-Setup mit vielen Zusatz-Plugins verwenden, sollten vielleicht eine zusätzliche init-irgendwas.js mit der angepassten Toolbar-Konfiguration anlegen. So bleibt die Sache dann auch updatesicher, wenn es mal ein neues XH-Plugin gibt, was ja spätestens wegen der Anpassung an den Editorbrowser mit XH 1.7 fällig wird.
Auch wäre es einen Versuch wert, eine Art "init-auto.js" zu integrieren. Sie müsste dann so sein, dass alle vom Builder integrierten Plugins automatisch in der Toolbar auftauchen. Man verliert dann zwar die Kontrolle was alles wo angezeigt wird, aber eine angepasste Editorvariante wäre so leichter machbar :? .
Vielleicht genügt es fast schon, wenn man die Auswahl der aktuellen Toolbar und die komplette Toolbar-Definiton aus der init-full.js löscht?

Einfach einmal testen und folgenden Code als init_auto.js im Ordner /plugins/ckeditor/inits abspeichern:

Code: Select all

{

    baseHref : '%BASE_HREF%',
    contentsCss : '%STYLESHEET%',
    //remove default styles
    stylesSet : [],
    height : '%EDITOR_HEIGHT%',
    defaultLanguage : 'en',
    language : '%LANGUAGE%',
    skin: '%SKIN%',
    
    entities : false,
    entities_latin : false,
    entities_greek : false,
    entities_additional : '', // '#39' (The single quote (') character.) 
    
    //Filebrowser - settings
    filebrowserWindowHeight : '70%' ,
    filebrowserWindowWidth : '80%' ,

    %FILEBROWSER%
    
    //removePlugins : 'autogrow',
        extraPlugins : 'CMSimpleSave' //no komma after last entry

}
 
Wenn man dieses Setup dann im CKEditor-Plugin auswählt, sieht man sämtliche Buttons aller enthaltenen Plugins in der automatisch generierten Toolbar.
Leider sind dann so auch unnütze Dinge, wie zum Beispiel Vorschau, Drucken und leider auch der nicht kompatible Save-Button sichtbar.
Aber da könnte man noch einmal etwas Finetuning im Builder machen. Vielleicht lässt sich da noch einiges an unnützen Plugins abwählen. Ansonsten müsste man in der init_auto.js "removePlugins" verwenden.
Ich behalte das mal im Blick und komme beim nächsten Update darauf zurück.

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

Re: CKEditor eigenes CSS

Post by wsim123 » Tue Jun 09, 2015 10:18 am

Holger wrote:
cmb wrote:Der extraPlugins Eintrag muss nicht in ckeditor/config.js erfolgen, sondern in plugins/ckeditor/init/init_*.js. In welcher der vier Dateien hängt davon ab, welche "Toolbar" in der Pluginkonfiguration ausgewählt ist (Voreinstellung ist full).
Genau so ist es. Und zusätzlich muss der Button für das neue Plugin manuell in die Toolbar eingegeben werden (das geht leider beim Konzept mit den init*.js von XH wohl nicht anders umzusetzen).

Ich würde aber anders vorgehen und zuallererst einmal den Editor updaten und dann auch nicht Einzel-Plugins in eigenen Ordnern installieren (siehe weiter unten).

Das eigentliche Editor-Update hatte ich extra einfach für den User gemacht, denn ich möchte nicht mit jeder neuen CKEditor-Version ein XH-Plugin-Update machen.
Alle Zusatzdateien, wie das wichtige "CMSimpleSave" - Plugin, sind außerhalb der Ordnerstruktur des Editor-Cores und deshalb lassen sich komplette Updates des Editors komfortabel erledigen.

Die Prozedur ist eigentlich ganz einfach:
im Plugin ist eine Datei "build-config.js" enthalten (Ordner /plugins/ckeditor/ckeditor/).
Diese Datei enthält die Beschreibung aller installierten Plugins (und eines Skins) des CKEditors.
Auf der Seite http://ckeditor.com/builder ist oben rechts ein Button, um diese Datei vom lokalen Rechner hochzuladen.
Danach einfach evtl. noch ein anderes Skin, bzw. die gewünschten Sprachen) auswählen und dann den aktualisierten Editor als ZIP herunter laden.
Auf diese Weise sind dann schon automatisch alle bisher installierten Plugins des Editors enthalten.
Die neuen Dateien aus dem ZIP - bzw. den ganzen CKEditor-Ordner - dann einfach im XH-Plugin ersetzen (Ordner /plugins/ckeditor/ckeditor/*.* löschen und neue Dateien einspielen).
Das war's.
Außerdem erhält man auf diese Weise eine einzige komprimierte JS-Datei, in der auch alle Plugins enthalten sind, anstatt einer komplexen Ordnerstruktur mit mehreren (unkomprimierten) Dateien und Unterordnern je Plugin.

Will man auch mehrere Skins lokal installieren, muss man den Download lediglich mit einem anderen Skin wiederholen (ausgewählte Einträge bleiben erhalten).
Danach dann im XH-Plugin nur den Skin-Ordner des weiteren Downloads unterhalb von /plugins/ckeditor/ckeditor/skins/ hinzufügen.
Die verfügbaren Skins und Sprachen werden vom XH-Plugin automatisch erkannt.

Auf oben genannte Weise lässt sich ganz einfach der bisherige Editor in vollem Umfang aktualisieren.

Will man weitere Plugins in den Editor integrieren, wählt man sie einfach im Builder zusätzlich aus.
Die Datei "build-config.js" ist bei jedem Download mit im ZIP-Archiv enthalten und kann / sollte beim nächsten Update entsprechend wiederverwendet werden.

Allerdings ist beim CKEditor für CMSimple_XH noch ein kleiner Fallstrick enthalten, wenn man zusätzliche Plugins integriert:
Die in den /inits/init*.js - Dateien definierten Toolbars können die neu dazu gekommenen Plugins nicht automatisch erkennen und integrieren.
Zwar kann der CKEditor das eigentlich, aber damit wäre das XH eigene Konzept der verschiedenen Toolbars so nicht machbar - denke ich.
Man muss die Buttons der Zusatzplugins also manuell in die Toolbar der jeweiligen init*.js - Datei eingeben. Danach sollten sie spätestens nach löschen des Browser-Caches sichtbar und funktionsfähig sein.

User, die ein eigenes Editor-Setup mit vielen Zusatz-Plugins verwenden, sollten vielleicht eine zusätzliche init-irgendwas.js mit der angepassten Toolbar-Konfiguration anlegen. So bleibt die Sache dann auch updatesicher, wenn es mal ein neues XH-Plugin gibt, was ja spätestens wegen der Anpassung an den Editorbrowser mit XH 1.7 fällig wird.
Auch wäre es einen Versuch wert, eine Art "init-auto.js" zu integrieren. Sie müsste dann so sein, dass alle vom Builder integrierten Plugins automatisch in der Toolbar auftauchen. Man verliert dann zwar die Kontrolle was alles wo angezeigt wird, aber eine angepasste Editorvariante wäre so leichter machbar :? .
Vielleicht genügt es fast schon, wenn man die Auswahl der aktuellen Toolbar und die komplette Toolbar-Definiton aus der init-full.js löscht?

Einfach einmal testen und folgenden Code als init_auto.js im Ordner /plugins/ckeditor/inits abspeichern:

Code: Select all

{

    baseHref : '%BASE_HREF%',
    contentsCss : '%STYLESHEET%',
    //remove default styles
    stylesSet : [],
    height : '%EDITOR_HEIGHT%',
    defaultLanguage : 'en',
    language : '%LANGUAGE%',
    skin: '%SKIN%',
    
    entities : false,
    entities_latin : false,
    entities_greek : false,
    entities_additional : '', // '#39' (The single quote (') character.) 
    
    //Filebrowser - settings
    filebrowserWindowHeight : '70%' ,
    filebrowserWindowWidth : '80%' ,

    %FILEBROWSER%
    
    //removePlugins : 'autogrow',
        extraPlugins : 'CMSimpleSave' //no komma after last entry

}
Wenn man dieses Setup dann im CKEditor-Plugin auswählt, sieht man sämtliche Buttons aller enthaltenen Plugins in der automatisch generierten Toolbar.
Leider sind dann so auch unnütze Dinge, wie zum Beispiel Vorschau, Drucken und leider auch der nicht kompatible Save-Button sichtbar.
Aber da könnte man noch einmal etwas Finetuning im Builder machen. Vielleicht lässt sich da noch einiges an unnützen Plugins abwählen. Ansonsten müsste man in der init_auto.js "removePlugins" verwenden.
Ich behalte das mal im Blick und komme beim nächsten Update darauf zurück.
...............
Das init_auto.js liefert zwar alle Buttons, aber der testweise installierte Codepad bleibt weiter aussen vor.

im ckeditor-script steht auch etwas vom bottom - toolbar :

Code: Select all

CKEDITOR.replace( 'editor1', {
			toolbarLocation: 'bottom',
			// Remove some plugins that would conflict with the bottom
			// toolbar position.
			removePlugins: 'elementspath,resize'
		} );
Die Datei build-config.js ist laut Inhalt nur nebenbei erstellt und unwichtig. Ein Eintrag von Codetag dort hilft auch nicht.

Post Reply