Fonts plugin: adding flexibility to include additional fonts (workaround & suggestion)

Hello,

I needed to add custom fonts to my editor instance and found a thread that described how to do it (http://stackoverflow.com/questions/1398342/adding-font-face-to-ckeditor). However, because of my setup (more on this below), this solution did not work, so I ended up making very small changes in the fonts plugin (would be nice if this solution is integrated to the plugin eventually).

I am using jQuery adapter to replace my textareas and using a custom configuration file since I do not want to modify CKEditor's code and prefer to keep things separated.

This is how I initialize my editor:

this.$("textarea").ckeditor(
                function(textarea) {
                    // Post-init code here
                },
                {customConfig: '../../js/ckeditor/config.js'}
            );

In my custom config.js:

CKEDITOR.config.font_names = 'MyCustomFont/MyCustomFont, sans-serif;';

I've tried adding my new font in my config file, however since this config gets loaded before the fonts plugin, any changes to CKEDITOR.config.font_names will be replaced by the fonts plugin later on.

Code from the fonts plugin:

CKEDITOR.config.font_names =  'Arial/Arial, Helvetica, sans-serif;' +
    'Comic Sans MS/Comic Sans MS, cursive;' +
    ...
 

Simple workaround

I modified the fonts plugin source to take into account any existing font definitions and modified the addCombo function so that it sorts all the entries before adding them.

In plugins.js for the fonts plugin:

CKEDITOR.config.font_names = ((CKEDITOR.config.font_names !== 'undefined')? CKEDITOR.config.font_names : "") +
    'Arial/Arial, Helvetica, sans-serif;' +
    'Comic Sans MS/Comic Sans MS, cursive;' +
   ...

For sorting, in the same file, after splitting the fonts string to get the names:

// Gets the list of fonts from the settings.
var names = entries.split( ';' ), values = [];
names.sort();
...
 

Hope this helps and can be integrated at some point into the plugin, it might be nice to be able to provide extra options to the plugin. Maybe a custom_fonts setting would work better, default fonts could be defined separately and users could define in CKEditor.config which fonts to use. Even adding a property to sort or not could be helpful in some cases.

Sample

CKEditor.config.customFonts = CKEditor.config.default_fonts +
    "custom fonts definitions would go here";

Cheers!