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

Question

I've been looking for a solution for this for a while now and the only fixes I found only affect the way the text is displayed in the editor itself and not how the generated text will look when sent/saved somewhere else. I'm talking CSS fixes and stuff like that.

I'm using CKEditor to compose and send emails trough our web application and while the css fixes change the font shown in the editor itself, the recieved emails are still displayed in TNR or whatever is inherited from the email client. Unless, of course, I change the font and size from the plugin for each paragraph.

From what I've noticed whenever you set the font and size from within the plugin, CKEditor creates a span (well, actually two, one with the font and one with the size) with the newly changed style (for example <span style="font: Arial"><span style="font-size: 12"></span></span>) and I figure I could just wrap the whole result in a span or div with my desired font and size styling, but that might interfere the users' templates and styles.

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

Answer 1

This is the only way I have found to force ck editor to create a default font. IE it wraps entered text in a (default) font span even if no font has been selected, and therefore will output 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 just one instance as well. Though I haven't tried that.

config.font_defaultLabel = 'Arial';

This will make the drop down default to 'Arial'. Though even this doesn't work the way I would hope. First, the editor must be activated (not just loaded) for the drop down to default. Then unlike a manual selection the value is not highlighted in the drop down box. It just displays.

Then add this below your default configuration options:

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

This will pre-populate the text area with the span you need. However you must include some character(s) in the span tag to force this 'hack' to work. So you're going to be stuck with something in your output you don't really want.The original version of this I found somewhere on the web used:

­

Which seems relatively innocuous.

I have looked and looked for a better way (and would love if someone knew one). Most people simply say capture the output and reformat it. That really wasn't an option for me. It may also be possible to accomplish this with a custom plugin. That too wasn't really viable for me.

Hope this helps someone save some time at least.

P.S. The original came from the support board at CK editor. Here is the link: forum

Answer 2

If you want to change style of text outside editor, then you have to style it... outside editor :). AFAIK in email stylesheets can't be used, so the thing that left you is wrapping with div having inline styles.

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

Next step would be to remove format combo from toolbar, because it's based on markup. For emails it'll be better to use styles combo, because you can define inline styles, tags and attributes that are applied with each style. Check styles.js.

Answer 3

Add this into your config.js File

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

Then it will be changed when your CKEditor was triggered.