Is there a way to set the default font and font size in CKEditor?

Question

I was looking for a solution for this for a while, and the only fixes I found only affect how the text is displayed in the editor itself, and not how the generated text will look when sent / saved elsewhere. I'm talking about CSS fixes and the like.

I use CKEditor to compose and send emails through our web application, and while css patches change the font shown in the editor itself, received emails are still displayed in TNR or inherited from the mail client. Unless, of course, I change the font and size from the plugin for each paragraph.

From what I noticed when you set the font and size from the plugin, CKEditor creates a span (well, actually two, one with a font and one with a size) with a new changed style (for example, <span style="font: Arial"><span style="font-size: 12"></span></span> ), and I suppose I can just wrap the whole result in a span or div with the desired font style and size, but this can interfere with user templates and styles .

Is there a way to set default text styles (as seen by the message recipient) from the module itself or will I have to come up with a hack to it.

Answer 1

This is the only way to force the ck editor to create a default font. IE wraps the entered text in a (default) font, even if no font is selected, and therefore displays formatted text. If you want the changes to be universal, add the following to config.js. Otherwise, it should be possible to add it to only one instance. Although I have not tried this.

 config.font_defaultLabel = 'Arial'; 

This will disable the default "Arial". Although even this does not work as I hope. First, the editor must be activated (and not just loaded) for the default drop-down list. Then, unlike manual selection, the value is not highlighted in the drop-down list. It just displays.

Then add this below the default configuration options:

 CKEDITOR.on( 'instanceReady', function( ev ) { ev.editor.setData('<span style="font-family:Arial, Verdana, sans-serif;">&shy;</span>'); }); 

This will pre-fill the text area with the required range. However, you must include some characters in the span tag to make this hack work. So you are going to be stuck with something in your release that you really don't want. The initial version of this I found somewhere on the Internet:

 ­ 

Which seems relatively harmless.

I looked and searched for the best way (and would like someone to know it). Most people simply claim to have captured the output and reformatted it. This is not an option for me. This can also be done with a custom plugin. It was also not viable for me.

I hope this helps someone save at least some time.

PS The original came from support in the CK editor. Here is the link: forum

Answer 2

If you want to change the style of the text outside the editor, then you need its style ... an external editor :). AFAIK in email styles cannot be used, so the rest of the thing is wrapped with a div with inline styles.

To have the same result in CKEditor, you have to edit contents.css and set the same styles for body as for div wrapper.

The next step is to remove the combo format from the toolbar, as it is based on markup. For letters, it is better to use a combination of styles, as you can define inline styles, tags, and attributes that apply to each style. Check out styles.js .

Answer 3

Add this to your config.js file

  CKEDITOR.config.font_defaultLabel = 'Arial'; CKEDITOR.config.fontSize_defaultLabel = '20'; 

It will then be modified when your CKEditor has been started.