CKEditor 4 - How to set default font?

Question

I use CKEditor 4 and I want to set default font. I added "font_defaultLabel" with my font choice but it doesn't work ...

I found this solution on the Internet but it's a trick for me and not a true solution :

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

Can someone help me?

EpokK

Answer 1

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

Answer 2

CKeditor uses a default css file for it's content: contents.css You can change the used font(s) there. Just make sure you use the same css (or just the font) when displaying the CKeditor content without CKeditor.