Hinzufügen von benutzerdefinierten Stilen zu CKEditor

Question

Ich habe vor kurzem CKEditor zu meiner App hinzugefügt und ich möchte meine eigenen CSS-Stylesheets in den Editor aufnehmen, so dass ich sie im Editor auswählen kann.

Wie bewerkstellige ich das? Mein Code so sieht weit wie folgt aus:

<script type="text/javascript"> 

    CKEDITOR.replace('editor1',{ 
     uiColor : '#9AB8F3', 
    }); 

</script> 

Answer 1

Schauen Sie bitte auf @metavida Antwort für eine bessere Antwort als diese

<script type="text/javascript"> 

    CKEDITOR.replace('editor1',{ 

      uiColor : '#9AB8F3', 
      stylesSet.add('default', [ 
       { name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} }, 
       { name: 'My Custom inline style', element: 'q'} 
      ]);  
    }); 

</script> 

Obwohl, wenn Sie diese verwenden in mehr als einem Ort ist es Am besten schauen Sie sich dies in der Datei stylescombo \ styles \ default.js an und aktualisieren Sie Ihre Datei config.js entsprechend der API.

Answer 2

Wenig spät zur Party hier, aber die Standardstile sind in _source/plugins/styles/styles/default.js. Du könntest das als Style-Config benutzen und Styles hinzufügen und es würde effektiv anhängen.

Answer 3

<script type="text/javascript"> 
    // This code could (may be should) go in your config.js file 
    CKEDITOR.stylesSet.add('my_custom_style', [ 
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} }, 
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} } 
    ]); 
    // This code is for when you start up a CKEditor instance 
    CKEDITOR.replace('editor1',{ 
    uiColor: '#9AB8F3', 
    stylesSet: 'my_custom_style' 
    }); 
</script> 

Sie können auch die vollständige Dokumentation der stylesSet.add Syntax lesen:

• CKEditor 4 documentation
• CKEditor 3 documentation, wie Vincent erwähnt.
• CKEditor 4 How Do I Customize the Styles Drop-Down List?
• CKEditor 3 How Do I Customize the Styles Drop-Down List?

Answer 4

Wie bereits erwähnt wurde, gibt es eine Seite zu erklären, wie eine Reihe von custom styles einzurichten. Was das kleine Juwel auf dieser Seite versteckt (und nicht wirklich klar) ist, dass anstatt eine benannte Gruppe von Arten erstellen, können Sie die Stile inline in Ihrer Konfiguration definieren, wie folgt aus:

stylesSet : [ 
    { 
     name : 'Green Title', 
     element : 'h3', 
     styles : 
     { 
      'color' : 'Green' 
     } 
    } ], 

Answer 5

Dies funktioniert für mich

CKEDITOR.addCss('body{background:blue;}'); 

Answer 6

Der beste Weg ist dieses Plugin zu verwenden: http://ckeditor.com/addon/stylesheetparser

es Paste innerhalb der 'ckeditor/plugins' Verzeichnis, dann so etwas wie dieses sind in Ihrem ckeditor/config.js ':

config.extraPlugins = 'stylesheetparser'; 
config.contentsCss = '/css/inline-text-styles.css'; 
config.stylesSet = []; 

Wo '/css/inline-text-styles.css' ist ein Pfad zu Ihrem eigenen CSS-Ordner in Ihrem Webroot, außerhalb von ckeditor. Das erspart Ihnen das Mischen von CSS mit Javascript.