[gelöst] eigener Stil im CKEditor

[jacobi22]

möchte für den CKEditor einen eigenen Stil haben, der eine Farbzuweisung und Fettschrift enthalten soll. Die Anweisungen einzeln sind kein Problem, aber geht das auch kombiniert?

[mr-fan]

ähm einfach eine Klasse zuweisen?

erstelle dir eine editor.styles.js im Template Ordner (oder Unterordner /editor)

und kopiere dir die aus dem Modul Pfad...suche nach den "Block Styles"

dann mach sowas in der Art:

Code:

CKEDITOR.addStylesSet( 'wb',
[
    /* Block Styles */

    // These styles are defined per editor.css in your template and can be found in "Format".
    /*
    { name : 'Paragraph'        , element : 'p' },
    { name : 'Heading 1'        , element : 'h1' },
    { name : 'Heading 2'        , element : 'h2' },
    { name : 'Heading 3'        , element : 'h3' },
    { name : 'Heading 4'        , element : 'h4' },
    { name : 'Heading 5'        , element : 'h5' },
    { name : 'Heading 6'        , element : 'h6' },
    { name : 'Preformatted Text', element : 'pre' },
    { name : 'Address'            , element : 'address' },
    */

    { name : 'Geile Formatierung'        , element : 'p',  attributes : { 'class' : 'brutale_css_klasse_gelb_fett' }  },

Ich nutze dieses Dropdownfeld (erscheint im CKE neben der normalen Stileliste...) für eigene Überschriften (zusätzliche Formatierungen mit Grafiken, Bilder CSS Klassen zuordnen, TOC Klassen zuordnen, Div Klassen für Hinweise, Warnungen, Info-boxen, usw. usw.

Gruß Martin

[jacobi22]

Danke dir erstmal!
hatte mit den CSS-Klassen experimentiert, aber irgendwie hats nicht funktioniert, das attributes hat mir gefehlt, nun gehts

Falls es wen interessiert, hab noch Formatierungen für Objekte (Bilder etc) gefunden

aktuell sieht es nun so aus (ich poste mal meine komplette editor.styles.js)

Code:

CKEDITOR.addStylesSet( 'wb',
[
{ name : 'Red Title', element : 'h3', styles : { 'color' : 'Red' } },
{ name : 'Grün 1', element : 'span',  attributes : { 'class' : 'gruen1' } },
{ name : 'Grün 2', element : 'span', attributes : { 'class' : 'gruen_b' } },
    /* Object Styles */
{ name : 'Image on Left', element : 'img', attributes : {'style' : 'padding: 5px; margin-right: 5px', 'border' : '2', 'align' : 'left' } },
{ name : 'Image on Right', element : 'img', attributes : {'style' : 'padding: 5px; margin-left: 5px', 'border' : '2', 'align' : 'right' } }

]);