Menu

Comment intégrer Typekit à CKEditor

Publié en Janvier 2014 - Développement web

ckeditor-et-typekit

Le problème lorsque l'on utilise Typekit avec un WYSIWYG, est qu'il est appelé via Javascript, contrairement à Google Font par exemple qui l'est en CSS avec un @import url('...').

De ce fait, il faut l'appeler lors de l'instantiation de l'éditeur. Mais avec CKEditor lorsqu'on clique sur le bouton "source" pour switcher entre le WYSIWYG et le code source brut, on perd la police Typekit car l'object CKEditor n'est plus "instancié" comme la première fois. En effet l'évènement "instanceReady" de CKEditor n'est utilisé que lors de la première instantiation de l'éditeur sur la page.

L'astuce est d'utiliser l'évènement "mode" en plus de "instanceReady". Le code donne ceci :

CKEDITOR.on('instanceReady', function(ev) {
    var editor_instance = CKEDITOR.instances[ev.editor.name];
    typekitScript(editor_instance);
    
    editor_instance.on('mode', function(ev) {
        if (ev.editor.mode == 'wysiwyg') {
            typekitScript(editor_instance);
        }
    });
    
    function typekitScript(editor_instance) {
        var script = document.createElement('script');
        script.src = '//use.typekit.com/XXXXXXX.js';
        script.onload = function() {
            try{editor_instance.window.$.Typekit.load();}catch(e){}
        };
        editor_instance.document.getHead().$.appendChild(script);
    }
});

De cette manière on va "écouter" la création de la première instance mais aussi chaque retour sur le mode WYSIWYG pour réaffecter la police.