5

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

EpokK
  • 38,062
  • 9
  • 61
  • 69

3 Answers3

13

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

ColmanJ
  • 457
  • 2
  • 12
  • 28
Zee
  • 901
  • 10
  • 21
  • I just want to launch the same command that can be run via the font toolbar. – EpokK May 06 '13 at 09:02
  • Aaaaaand you just saved my day! Inline styles are required for email content to render properly everywhere. It's sad that ckeditor doesn't support this use case well. Thanks a lot. – Clément Prévost Apr 25 '16 at 12:32
0

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.

Willem
  • 5,364
  • 2
  • 23
  • 44
  • Yes but if your font family is a variable, how do you do ? – EpokK May 02 '13 at 13:51
  • Where does that variable come from, is it a per user setting or something? Then your solution of setting a font might be the best solution; you'll want to save that font with the input. – Willem May 02 '13 at 13:55
  • I find it sad that it is not possible to properly configure the font in CKEditor. And when I think that this object is not free ... Finally this is another story. – EpokK May 02 '13 at 13:59
  • I guess setting the default font to a variable is just not needed in 99% of the cases. Also CKeditor is free to use: http://ckeditor.com/about/license, maybe you mean CKfinder or another of their products? – Willem May 02 '13 at 14:52
  • CKEditor isn't free for business use. I need to set font-family to each initialization of the editor. I use this object for a webmail. – EpokK May 03 '13 at 05:28
  • It IS free actually for commercial use: http://stackoverflow.com/questions/6305276/is-it-possible-to-use-ckeditor-in-commercial-web-site but if you want to make changes to the source that you don't share or just want to use a commercial license that's fine too. – Willem May 03 '13 at 07:47
0

Simply place this below your original CKEDITOR JS, and change the font-size to whatever you like. This works for me, hope it does for you!

CKEDITOR.on( 'instanceReady', function( ev ) {
 ev.editor.setData('<span style="font-size:48px;">&shy;</span>');
});
Mark
  • 39
  • 5