How can I customize the look of the h1,h2,h3, tag format of the CKEditor editor?

StackOverflow https://stackoverflow.com/questions/22486100

  •  16-06-2023
  •  | 
  •  

Question

How can I customize the look of the h1,h2,h3, tag fprmat of the CKEditor so that I can make them match my local CSS style of h1,h2,h3,etc .. The CSS file I use is boostrap.css Below is the config.js of the ckeditor

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    config.LinkUpload = false;
    config.LinkBrowser = false;

    config.skin = 'kama';

    config.Format   = 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
    config.FontName = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
    config.FontSize = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

    config.toolbar_Testimonial = [
                                    ['Bold','Italic','Underline','RemoveFormat']
                                 ];

    config.toolbar_KarlBell =  [
                                ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], 
                                ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
                                ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                                ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
                                ['OrderedList','UnorderedList','-','Outdent','Indent'],
                                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
                                ['Link','Unlink','Anchor'],
                                ['Image','Flash','Table','Rule','Smiley','SpecialChar'],
                                ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
                                '/',
                                ['Styles','Format','Font','FontSize'],
                                ['TextColor','BGColor']
                            ] ; 
    config.toolbar_KarlBell = [
                                    ['Format','Bold','Italic','Underline','BulletedList','NumberedList','Link']
                                 ];                        

};
Was it helpful?

Solution

the fast and dirty way is to include your css in the ckeditor css:

you /ckeditor/content.css should start with:

@import "/css/boostrap.css"; /*your site css*/

...

Note that the other content in the file will override some of your css declaration so remove them accordingly

content.css is what you need for customizing how ckeditor show its content during editing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top