Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor 4 - How to set default font?

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

like image 488
EpokK Avatar asked May 02 '13 13:05

EpokK


People also ask

How to set default font family & size in CK editor?

You've to do 3 steps of work to set the CK Editor default Font family & Size. Edit your content.css in the CKEditor folder. Change the Font-family & font-size as per your need in Body → This will set your default font family. body { font-family:Georgia; }.

How do I enable JavaScript in CKEditor?

In Drupal 7, go to the configuration options of CKEditor in your admin area (admin/config/content/ckeditor) press the "edit" button for the profile that you want to add this option to, and add the code in the "Advanced Options" -> "Custom JavaScript configuration".

How to add fonts to inline editor?

For inline editor, you need to set it in main page CSS file. NOTE: There are ways to force particular fixed set of fonts inside the editor (even when pasting different fonts from external resources) but they require usage of Advanced Content Filter (ACF) and transformations. If you wish to learn more about ACF please see below links:

Can I use a custom font in the content designer?

However you can add a custom font to the list of fonts in the content designer (this functionality was implemented in the 7.16.0 version). Please review this article where the whole process of adding a custom font is described and you will be able to use custom fonts in the content designer.


1 Answers

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

like image 90
Zee Avatar answered Oct 17 '22 17:10

Zee