ckeditor (wysiwig) : Eigene Klassen definieren zur Verendung im Editor

Tja, der Eintrag ist schon ein Dreivierteljahr alt, aber ich will hier dennoch anschließen. Ich habe allerdings keine Lösung, sondern die gleiche Frage in grün: Wie kommen meine eigenen Style-Anweisungen in das Style-Dropdown?
Recherchen im Internet haben mir diese Frage nicht in aller Klarheit beantworten können. Wenn ich richtig liege, kommen die Styles ("Blue Title, Red Title, etc") per default zunächstmal aus der Datei /sites/all/libraries/ckeditor/plugins/styles/styles/default.js
Die Datei sites/all/libraries/ckeditor/ckeditor.styles.js scheint mir geeignet um dort meine Änderungen vorzunehmen (und die defaults zu überschreiben). Ist ja alles schon im JS vorbereitet und lediglich auskommentiert. Nur wie teile ich dem CKEditor mit, dass er künftig diese ckeditor.styles.js nehmen soll? Wo kann ich auf diese JS-Datei verweisen, bzw. wo müsste ich sie platzieren? In den Moduleinstellungen unter admin/config/content/wysiwyg/profile/filtered_html/edit kann ich CKEditor lediglich auf CSS-Dateien hinweisen, es ist jedoch keine Pfadangabe für die JS-Datei vorgesehen.

Ich verwende
D 7.12
WYSIWYG 7.x-2.1
und habe den CKEditor über sites/all/libraries
eingebunden (also nicht als Modul!)

Ich danke sehr für Hinweise!

Beste Grüße,
Leonardt

Hi,
Es ist ja schon etwas spät daher habe ich den text nur überflogen... wie ich es verstanden habe sollen im DropDown (Styles) eigene Klassen verwendet werden.
Das kann selbst direkt über das Modul konfiguriert werden geht ganz einfach (Wysiwyg profiles)

Als erstes muss unter "Anzeigen Buttons and plugins" das DropDown Aktiviert werden ist ja schon geschehen.
Unter dem Punkt "CSS-Einstellungen" gibt es eine Textarea (ganz unten) "CSS classes"

Hier kannst du frei Klassen eintragen
Name meiner Klasse=rot
Name meiner Klasse=blau

Die Klasse wird nun in deiner CSS Datei deines Themes angegeben
.rot { color:red;}

Im Dropdown tauchen diese Klassen nun auf, hoffe konnte dir hier ein wenig weiterhelfen ;)

LG
Norman

Hallo Norman,

danke für die Antwort! Ich bin allerdings nicht weiter... Die Vergabe von CSS-Klassen funktioniert bei mir nicht, ich habe exakt die Anleitung befolgt. Abgesehen davon bezog sich meine Frage ja auf die JS-Datei. Hast Du vielleicht noch einen weiteren Tipp? Das wäre super, danke :-)

Liebe Grüße,
Leonardt

Hi Leonardt,
wie ich es dir beschrieben habe funktioniert es 100% habe es heute noch bei einem Projekt gebraucht, ich versuche es noch mal etwas genauer darzustellen.

Ich benutze das Modul Wysiwyg dieses lässt sich sehr gut konfigurieren.
Als Editor nutze ich den Tiny sollte aber bei CK genau so laufen.

Hab dir mal paar Screener gemacht so kannst du es mit deinen Einstellungen vergleichen.
So ist es die beste schnellste und einfachste Lösung.

Bild

Natürlich müssen die angegeben Classes noch in deinem Theme angegeben werden.
Sollen die eingestellten Werte auch schon direkt im Editor angezeigt werden, mache ich es immer so dass der
Editor auf eine eigene CSS Datei zugreift, in welcher die classes ebenfalls angegeben sind.
Dem Editor kannst du wie auf dem ersten Screnner zu sehen ist eine eigene CSS Datei zuweisen (Editor CSS).

Zur .js kenne ich auch nur diese Variante www.canvision.de/ckeditor-stile-anpassen wie du sie beschrieben hast ist aber nicht das Gelbe vom Ei.

Viel Erfolg

Gruß aus NRW
Norman

Hallo!

Ist zwar schon länger her der Thread, aber ich bastele auch gerade an diesem Problem.

Danke Norman für die ausführliche Beschreibung, aber das scheint beim CKEditor über das Wysiwyg-Modul so nicht zu funktionieren. Egal, was man an dieser Stelle als Styles einträgt, es erscheint nicht in der Dropdown-Liste. Dann bin ich über den CKEditor nochmal auf die Suche gegangen und habe folgendes gefunden:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles
Nun bin ich wirklich kein Profi in dieser Richtung, daher versuchte ich den einfachsten Weg, dort steht:

"By default, CKEditor uses the plugins/styles/styles/default.js file, which is a minified JavaScript file."

Und das stimmt meiner Meinung nach nicht! In dieser Datei finden sich nämlich andere Styles als die im Dropdown angezeigten, u.a. name:'Blue Title', name:'Red Title' etc.

Die Frage ist nun, wie ich bei den gefühlten 300 Config-, Plugin und JS-Dateien die Verbindung zu eben jener default.js herstellen kann. Ich habe mir in den letzten Stunden nen Wolf gesucht, Dateien testhalber gelöscht, hin- und hergeschoben und und und... Jedes Mal anschließend den Cache geleert und wieder feststellen müssen, dass das Style-Dropdown noch immer genauso aussieht.

Also: Wo und wie kann ich diese default.js verknüpfen?

Wäre sehr dankbar, wenn jemand die Lösung parat hätte.

Danke im Voraus und beste Grüße
Uli

As far as I know benutzt das WYSIWYG-Modul nicht die von dir erwähnten Dateien, sondern setzt auf eigene, um so die Kompatibilität her zu stellen. Alles was man im WYSIWYG ändern will sollte man entweder über die WYSIWYG-API machen, wozu es Beispieldateien im Modulordner gibt, oder aber man nimmt Änderungen am Style via CSS vor. Gerade was die Selectlisten, bzw. Dropdowns angeht kann das schon mal zu grauen Haaren führen, dass weiß ich aus eigener Erfahrung. Teilweise muss man da recht lange Ketten aus Klassen bilden, um die richtige zu erwischen. Da muss man wirklich sehr viel mit Firebug, WebDeveloper, SourceCode, usw. arbeiten. Spaß ist definitiv was anderes. Das ist im standalone vom CKeditor schon recht unlustig, wobei man da über die config.js gehen kann, aber im WYSIWYG-Modul ist es noch mal ne Nummer "härter". Ich kann da nur empfehlen mit Trial and Error zu arbeiten, zu testen, und im Zweifel auch mal mit !important arbeiten um zu sehen ob es so geht.

Das alles gesagt - Ich bin kein Experte was den cKeditor und das WYSIWYG-Modul angeht. Ich kann nur sagen, dass ich es so gemacht habe. Ich glaube die Select-Listen waren irgendwo hier versteckt:

Ah, okay, wenn WYSIWYG andere Dateien benutzt, wäre das definitiv logisch, war ich aber bisher nicht drauf gekommen. Danke, Genesis, für den Hinweis!

Ich habe mir jetzt angesichts der knappen Zeit einen Workaround gesucht, der in der Darstellung auch funktioniert (kann ich gerne bei Bedarf kurz erläutern), aber mit einem Problem: In der Editoransicht funktioniert er leider nicht, da ich nicht weiß, wo ich die dazugehörige CSS-Datei zum Definieren der Regeln finde. Als Voraussetzung gilt, dass ich in den WYSIWYG-Einstellungen "Editor Default CSS" auswähle. Aber wo finde ich diese "Editor Default CSS"? Firebug gibt mir darüber keine Informationen, die relevante CSS konnte ich auch nach intensiver Suche nicht finden.

Bitte nochmals untertänigst um Hilfe.

Danke und beste Grüße
Uli

Na gut das ich nen Abbo hab^^
Leider bin ich gerade auf dem Sprung, aber mal ein ganz andere Frage: Warum muss es der CK sein?
Mit dem Tiny funktioniert es 100% wie ich es mal beschrieben hatte... dieser bietet genau die selben Funktionen
und schreib auch den selben code. Also keine Nachteile, und ich persönlich finde er fügt sich rein Optisch auch
besser in das Admin Layout ein.

Also versuch doch mal nur aus Testzwecken den Tiny und dein Problem ist gelöst.

PS: Mit dem Firebug wirste die default css nicht finden, das DropDown mit redTitle usw ist in einer js zu finden... aber wo muss ich mal in ruhe schauen.

So nu muss ich aber los Gruß

Norman

Danke für Deine Nachricht!

Warum es der CK sein muss? Nunja, wie so oft: Die Zeit... Beim CK sind halt schon einige Erweiterungen und Plugins installiert, die ich unbedingt benötige. Und wenn ich jetzt den Editor switche, darf ich da wieder von Neuem auf die Suche gehen, und die Zeit habe ich einfach nicht... Wenn die Seite mal fertig ist, kann ich den Tiny vielleicht mal ausprobieren.

Da es mir insbesondere um verschiedene Klassen für Bilder geht, habe ich nun doch ein eigenes CSS im WYSIWYG-Modul zugewiesen und dort diese Klassen definiert. Die Klasse muss man im Editor zwar dann über das Media Modul manuell eintragen und so zuweisen (immernoch besser als im Quellcode eintragen), also ein bisserl unbequem im Vergleich zum Dropdown, aber es funktioniert wenigstens.

Danke für Eure Hilfe!

Uli

Hey,
von was für Plugins und Erweiterungen sprechen wir hier die du benötigst? Ich habe dein vorhaben allein über das Backend getestet
und musste feststellen das es nicht direkt mit dem CK funktioniert hat :(

Ich denke du machst dir das alles etwas schwer... Leg doch einfach mal ein neues Textformat an (FullHTML2 oder so) und lasse hier den Tiny laufen und schau Ihn dir mal an. Er bietet genau die selben funktionen wie der CK + dein gewünschtes DropDown mit css Klassen für Bilder und co.

Habs hier mal verdeutlicht:
Klick mich

Natürlich kannst du auch direkt ne eigene CSS Datei für den Editor angeben das läuft auch prima.
Gutes gelingen und nen schöne WE

Hallo.
Ich hatte auch das Problem mit dem CKEditor.
Hier eine Issues zu diesem Thema. Der Patch #22 war für mich die Lösung...
Bei der CSS Klassen habe ich folgendes eingetragen:
Hervorhebung blau=span.blue

In meiner style.css habe ich die Klasse .blue {color: blue;} eingetragen.
lg, bernsch

Hallo,

die Webseite soll die Schrift Optima haben. In der CSS-Datei vom Theme ist das auch schon drin, aber im ckeditor kann man die Schrift ja nicht auswählen, wie bringe ich diese da rein?

Vielen Dank für Eure Hilfe.

Viele Grüße

Marita Betz