CKEditor externes StylesSet

[DG70]

Ich würde gerne ein CKEditor StylesSet mit einer Libary "mitliefern" und diese dann im CKEditor verfügbar machen.

cke_style.png (13.39 KiB) 5260 mal betrachtet

cke_format.png (16.12 KiB) 5260 mal betrachtet

Wenn ich es richtig sehe gibt es für BlackCat nur eine Möglichkeit ein StylesSet einzubinden, es muß im Template JS Ordner liegen und auch den Namen vom Template haben. Oder gibt es noch andere Möglichkeiten?

Code: Alles auswählen

{
$config[] = array(
            'set_name' => 'stylesSet',
            'set_value' => DEFAULT_TEMPLATE.':'.CAT_URL.'/templates/'.DEFAULT_TEMPLATE.'/js/styles.js'
        );
}

Könnte man nicht beim StylesSet Namen etwas Globales wie "CAT_Styles" oder "custom_styles" an Stelle des Template Namens nehmen?
So müsste doch das Einbinden einer .js Datei über die @import Funktion möglich sein?

Cool wäre Name und Ort für ein externes StylesSet im wysiwyg Admin festlegen zu können ... vielleicht ein Feature für die Zukunft ...

[shadowcat]

Äh... den Ort kannst Du nicht einstellen, aber eine "custom.css" eigentlich schon... Wobei ich gestehen muss, dass ich das lang nicht getestet habe. Da die 1.4 ja noch nicht fertig ist, könnte das da noch rein. Ich muss aber erst mal nachschauen, wie das aktuell läuft...

[shadowcat]

Also da in dem Feld kann man mehrere CSS-Dateien kommasepariert angeben. Die werden dann in folgenden Verzeichnissen gesucht:

Code: Alles auswählen

            CAT_PATH.'/templates/'.DEFAULT_TEMPLATE.'/css/'.$variant,
            CAT_PATH.'/templates/'.DEFAULT_TEMPLATE.'/css/default',
            CAT_PATH.'/templates/'.DEFAULT_TEMPLATE.'/css',
            CAT_PATH.'/templates/'.DEFAULT_TEMPLATE,
            dirname(__FILE__).'/config/custom',
            dirname(__FILE__).'/config/default',

dirname(__FILE__) entspricht dem Verzeichnis CAT_PATH/modules/ckeditor4. Wenn Du also Deine Datei nach config/custom legst und im WYSIWYG-Admin nur den Namen einträgst, sollte sie geladen werden.

[DG70]

Oh evtl. habe ich mich falsch ausgedrückt ...
Ich meinte nicht ein StyleSheet in einer css Datei, da hattest du mir schon den Tipp mit der editor.css im Template gegeben.
Über @import dann auf die gewünschte Datei verweisen. Das klappt so gut.

Ich meine ein StyleSet aus einer js Datei einbinden und dort ist halt "nur" ein Dateiablageort festgelegt.
Zusätzlich muß das StyleSet einen Namen haben, hier festgelegt durch 'Set_value' => DEFAULT_TEMPLATE..

modules/ckeditor4/include.php Zeile 140-146:

Code: Alles auswählen

{
$config[] = array(
            'set_name' => 'stylesSet',
            'set_value' => DEFAULT_TEMPLATE.':'.CAT_URL.'/templates/'.DEFAULT_TEMPLATE.'/js/styles.js'
        );
}

In meiner style.js Datei musste ich den Namen 'bootswatch' (Name des Templates) eintragen, um die Block, Inline und Objekt Styles verwenden zu können.

Code: Alles auswählen

CKEDITOR.stylesSet.add( 'bootswatch', [
	/* Block Styles */

	{ name: 'BG Primary',	  	element: 'div', attributes: { 'class': 'bg-primary text-white' } },
	] );

So ist das Ganze nicht Global zu verwenden, jeder der diese Bootstrap Styles verwenden möchte müsste seinen Templatenamen selbst eintragen.
Da wäre ein Standardname wie "CAT_Styles" oder "custom_styles" (als Beispiel) einfacher oder halt die Möglichkeit es über den CKE Admin einzubinden (wie die CSS Datei).

[shadowcat]

Oh, okay, ganz anderes Thema... das ist ja jetzt ein CKE-Feature und kein BC-Feature. Daher ist das dann im WYSIWYG-Admin auch nicht so unbedingt gut aufgehoben, da der ja - zumindest theoretisch - auch für andere Editoren gedacht ist. Dass wir den TinyMCE nicht mehr pflegen liegt ja nur daran, dass den m.W. ohnehin nie jemand genutzt hat.

Ich habe dazu das hier gefunden:
https://ckeditor.com/docs/ckeditor4/lat ... -stylesSet

Spontan würden mir da mehrere Workarounds einfallen, aber ich muss auch gestehen, dass ich mich nicht mal daran erinnern kann, dass und warum und warum *so* ich das eingebaut habe. Vielleicht war das ja auch creativecat.

Ändere doch den Code in der include.php einfach mal. Z.B.:

'set_value' => 'CustomStyles:'.CAT_URL.'/templates/'.DEFAULT_TEMPLATE.'/js/styles.js'

Und dann entsprechend in der styles.js:

CKEDITOR.stylesSet.add( 'CustomStyles', [

@Matthias (creativecat): Du machst sicherlich mehr Templates als ich, hast Du das irgendwo verwendet? Ich definitiv nicht.

[shadowcat]

Noch ein paar Gedanken dazu...

Also wenn man das richtig automatisieren will, müßte ja das Backend "wissen", dass auf der jeweiligen Seite ein Bootstrap-basiertes Template verwendet wird - das Laden der zusätzlichen Styles bei Verwendung eines Templates, das nicht auf Bootstrap basiert, würde ja sonst nur zu Irritationen führen.

Dementsprechend macht die styles.js im Template-Verzeichnis grundsätzlich erst mal Sinn, andernfalls müßte man sich eine Variable mit dazugehöriger Logik ausdenken, was ziemlich kompliziert werden könnte.

Die - jetzt ja schon sowieso bei Vorhandensein automatisch geladene - styles.js aus dem Template-Verzeichnis könnte nun entweder via jQuery oder auch mittels Vanilla JS eine weitere styles.js aus dem lib_bootstrap laden, wo Du Deine Vorgaben machst, und diese dann sogar noch mit eigenen ergänzen.

Das heißt, die include.php lädt wie gehabt die styles.js aus dem Template, diese auch mit dem NAMEN dieses Templates. Und die so geladene styles.js lädt wiederum die aus dem lib-Verzeichnis, mit einem beliebigen styleSet Namen, z.B. "BootstrapBasics" oder so.

Ich muss das mal probieren...

[shadowcat]

Es scheint so, als könnte man mit stylesSet nur das Default-Set komplett ersetzen, aber nicht ergänzen. Mit dem Versuch, dort eine Liste anzugeben, bin ich gescheitert - da kommt ein total krauses Ergebnis bei raus.

Für dieses Ersetzen könnte ich eine Lösung zaubern. Diese würde aus einer Änderung in der include.php vom ckeditor4 Modul bestehen, die die styles.js im Template-Verzeichnis nicht mehr als stylesSet lädt, sondern via jQuery.get(). Der Inhalt dieser style.js wäre dann etwa:

Code: Alles auswählen

(function($) {
    $.get(CAT_URL+"/modules/lib_bootstrap_4/js/styles.js", function() {
        CKEDITOR.config.stylesSet = 'bootstrap';
    });
})(jQuery)

Und der Inhalt der styles.js im Bootstrap-Modul z.B.:

Code: Alles auswählen

CKEDITOR.stylesSet.add( 'bootstrap', [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );

[shadowcat]

Die Lösung für die Default-Styles vom CKE wäre natürlich, die in die styles.js vom lib_bootstrap mit aufzunehmen.

[shadowcat]

Hier mal zum Testen. Entpacken nach ./modules/ckeditor4. Die Inhalte der styles.js findest Du ja oben.

[DG70]

Sieht für mich gut aus

Beide Dateien ausgetauscht ...
- ohne styles.js im Template > Standardauswahl im Stil Dropdown (3xBlock / 14xInline Styles)
- mit styles.js im Template, aber ohne styles.js in der Libary > Standardauswahl im Stil Dropdown (3xBlock / 14xInline Styles)
Allerdings mit vorheriger Fehlermeldung "Requested page not found (404)"
- mit styles.js im Template und in der Libary > Bootstrap (custom) Auswahl im Stil Dropdown

Sorry für die verspätete Antwort, hatte die letzten Tage sehr wenig "Freizeit" ...