How to Set Default Font-Size on Ckeditor

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

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;">­</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

How Can i change default font of Ckeditor?

Per the docs these all seem to be defined in plugins/font/plugin.js.

{Object} CKEDITOR.config.font_style
The style definition to be used to apply the font in the text.
Defined in: plugins/font/plugin.js.

config.font_style =    {        element  : 'span',        styles  : { 'font-family' : '#(family)' },        overrides : [ { element : 'font', attributes : { 'face' : null } } ]    };

How to set default font in CKEditor 4

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.

CKEditor 4 - How to set default font?

you can use ckeditor's dataprocessor to modify (for example) paragraphs with your choice for font-size, font-family, this will affect any paragraph entered into ckeditor be it pasted, written or changed in the source; something like this:

CKEDITOR.on('instanceReady', function( ev ) {
  ev.editor.dataProcessor.htmlFilter.addRules({
    elements: {
      p: function (e) { e.attributes.style = 'font-size:' + fontsizevariable + 'px; font-family:' + fontfamilyvariable + ';'; }
    }
  });
});

same for dataProcessor.dataFilter

But if you intend to view html created outside of your environment, these rules might make it a real mess

---

Related Topics