3

I want to configure the font drop-down menu of the CKEditor and add additional fonts there.

The Fonts are locally available, and shall be usable for PDFLetters etc. Has anyone made any Progress with that? It seems possible to add fonts to CKEditor..?

I found this thread, but whenever I edit the GUI Preferences, the file crm-ckeditor-config.js hasn't been generated. Instead only /civicrm/persist/crm-ckeditor-default.js is available.

5

We had some more luck with the integrated UI configuration of CKeditor, and after some trial and error we came up with the following solution:

In the following documentation I will assume that the fonts, files and configurations will be put in /sites/default/files/civicrm/persist/ and /sites/default/files/civicrm/persist/customfonts. The persist folder can be configured for multiple CMSs, I am using drupal.

The configuration file can be configured via the UI at /civicrm/admin/ckeditor. Add the fonts plugin on top if not already done. Under advanced options add a customConfig, and add a custom configuration file. I would use something like /sites/default/files/civicrm/persist/crm-ckeditor-custom.js

This can be copied and extended from the already generated crm-ckeditor-default.js in the same folder. Be aware that if the path is added, "/" characters will be escaped. Sadly multiple times, so be careful when saving the form!

In the custom configuration you can now add CKEditor configuration, according to their API documentation. For the fonts to be added, a fonts.css file needs to be created, with the default @fontface syntax and the added to the configuration like this:

config.contentsCss = "/sites/default/files/civicrm/persist/customfonts/fonts.css";

And the font names needs to be extended as well:

config.font_names = "Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif;Indie Flower/Indie Flower";

This is the list of pre-configured fonts, and a new fonts Indie Flower (as an example) is added. The syntax is [Display name]/[Font Name]

Afterwards the directory could look something like this:

 sites/default/files/civicrm/persist
  - crm-ckeditor-custom.js
  - customfonts
    - IndieFlower.woff2
    - IndieFlower.woff
    - IndieFlower.ttf
    - IndieFlower.svg
    - IndieFlower.eot
    - fonts.css

Then a message template has to be created (civicrm/admin/messageTemplates/add?action=add&reset=1), and the fonts.css has to be included:

<link href="https://my.example.domain/sites/default/files/civicrm/persist/customfonts/fonts.css" rel="stylesheet" />

The webserver needs to be configured as well to allow CORS Header, either by a .htaccess file or for nginx:

<IfModule mod_headers.c>
  <FilesMatch ".(eot|ttf|otf|woff|svg)">
        Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

location ~ ^/sites/default/files/civicrm/persist/customfonts/.+\.(eot|ttf|woff|woff2|svg)$ { 
    add_header Access-Control-Allow-Origin "*"; 
}

Then, when creating an Email or a PDF the template has to be selected, and the text can be created by wysiwyg. Email Clients can then load the fonts, and pdf generators can use the fonts.

  • 1
    Please see github.com/civicrm/civicrm-core/pull/11747 to fix the double-escaping problem. Leave a review on the PR to facilitate us merging the fix into the next release of CiviCRM :) – Coleman Mar 2 '18 at 1:58
  • Excellent news! It seems like it is already being merged? Tim and Seasmus seem to like it! ;) – Phil_B Mar 2 '18 at 15:54
  • 1
    Yes it got merged. Thanks for identifying that bug. – Coleman Mar 2 '18 at 17:07
2

I had use the method in one of the forum to add font in ckeditor. I did this by creating an extension and used hook_civicrm_coreResourceList().

Ref: https://civicrm.org/blog/colemanw/big-changes-to-wysiwyg-editing-in-47

HTH

Pradeep

  • I see, seems a bit much just for adding a font, but I'll try during the week and give feedback. Thanks for the hints, appreciate it! – Phil_B Jan 15 '18 at 15:37
  • My pleasure.. cheerz – Pradeep Nayak Jan 15 '18 at 15:41
  • We did it a bit differently, see my answer below. I think it makes more sense to use the existing configuration option, and deal with them if that makes sense! ;) – Phil_B Mar 1 '18 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.