Comment intégrer Typekit à CKEditor

Publié le : 27 janvier 20143010 Vues
Comment intégrer Typekit à CKEditor

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.

Tags de l'article

Créée en 2009 et basée à Montpellier, l’agence WebLogin, est résolument tournée vers les Logiciels Libres.
L'agence est spécialisée dans la création de sites Internet et d'applications web, le webdesign, le référencement et la création d'identité visuelle originale. Nous vous proposons nos services pour développer votre présence et votre image sur Internet. Restons en contact :