I want to increase the font size of the rich text editor "ckeditor".

The first demo of this page () I am using. I want to make the font size of the body to say 44px.

I found this link !/api/CKEDITOR.config-cfg-toolbarGroups . It seems I can configure my font size from this page. But still could not point out which config is suitable to increase the font size.

I want to increase the font size of the rich text editor "ckeditor".

The first demo of this page (http://ckeditor./demo#toolbar) I am using. I want to make the font size of the body to say 44px.

I found this link http://docs.ckeditor./#!/api/CKEDITOR.config-cfg-toolbarGroups . It seems I can configure my font size from this page. But still could not point out which config is suitable to increase the font size.

• javascript
• html
• ckeditor
• rich-text-editor

6 Answers 6

you can use setStyles function :

CKEDITOR.replace('editor1', {
        on: {
          instanceReady: function (evt) {
              evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '72px'})
          }
        }
    }

Add a contents.css to modify the content displayed in the editor the default font and size:

body {
   font-family: Arial;
   font-size: 44px;
}

And setting :

config.font_defaultLabel = 'Arial';
config.fontSize_defaultLabel = '44px';
config.contentsCss

See the documentation :

• http://docs.ckeditor./#!/guide/dev_styles
• http://docs.ckeditor./#!/api/CKEDITOR.config-cfg-contentsCss

Open the contents.css inside the /ckeditor/ directory And you can change font-size:

 background-color: #ffffff;
 font-size:16px; /* Just added this */

• If you want to modify the content displayed in the editor, customize contents.css.
• If you want to add some new, pre-defined styles to style bo, see the official styles.js guide.
• If you develop a plugin which adds some features that need styling, use CKEDITOR.addCss() method.
• If you want to parse existing CSS file and use rules as pre-defined styles, see stylesheetparser plugin.

Just add this to your page

CKEDITOR.replace('editor1', {
          on: {
              instanceReady: function (evt) {
                  evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '18px', 'font-family': 'Verdana'})
              }
          }
      });

i am using ckeditor 4.4.6 and changing content.css works,please note that changing the 'body' class wont work , the '.cke_editable' class needs to be changed.