CODEWITHSUNDEEP
javascripthtmlcssckeditorckeditor4.x
Senthil
Senthil

Reputation: 43

How to set default font in CKEditor 4

I'm trying to set a default font and font-size for the CKEditor 4

Found this in the CKEditor 4 documentation https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-font_style

Like I want to change the default font to "Comic Sans MS" and the font size to "48"

Tried like this, but not working

ckeditorConfig.font_style = {
  element:  'span',
  styles:  { 'font-family': 'Comic Sans MS' },
  overrides:  [ { element: 'font', attributes: { 'face': null } } ]
};

ckeditorConfig.fontSize_style = {
  element:  'span',
  styles:  { 'font-size': '48px' },
  overrides:  [ { element: 'font', attributes: { 'size': null } } ]
};

Found this from stack overflow, but no working examples How Can i change default font of Ckeditor?

Also setting a span on CKEditor's instanceReady is not helping Is there a way to set the default font and font-size in CKEditor?

----Update---

The above CKEditor config is overriding the CKEditor's Font drop-down option and not affecting the default font. Seems like it overrides the font selected from the drop-down to the one specified in the Config.

Is there any other way to set the default font for CKEditor 4.

Thanks in Advance.

Upvotes: 1

Views: 1698

Answers (1)

Senthil
Senthil

Reputation: 43

I got a solution for my use case. I had a block of code where the unwanted ckeditor bookmarks were cleaned up. Added a div with some inline styles specific to the font setting, to persist the font styles when thread is saved. For live UI changes, added a style to the ckeditor's parent div, to reflect the font styles while typing the content. ckeditorConfig.font_style was not useful.Used ckeditorConfig.font_defaultLabel to set the font drop down value of the ckeditor. I can't use the setData method to set styles, as it may obstruct some of the the existing code flow.

Upvotes: 1

Related Questions