如何使用jQuery将TypeKit字体加载到CKEditor实例中

问题描述：

我正在尝试通过jQuery将TypeKit字体加载到CKEditor的实例中。这是我的代码：

I'm trying to load TypeKit fonts into an instance of the CKEditor via jQuery. Here's my code:

$('.ck-blog textarea').ckeditor(function () {
    CKEDITOR.scriptLoader.load(
      "http://use.typekit.com/zku8fnp.js", 
      function (success) { 
        Typekit.load(); 
        alert(success); }, 
      null, 
      true);
},
{
    resize_enabled: false,
    skin: 'kama',
    height: '500px',
    toolbarCanCollapse: false,
    toolbar_Full: toolbar,
    forcePasteAsPlainText: true,
    autoGrow_onStartup: true,
    templates_replaceContent: false,
    extraPlugins: 'autogrow,wordcount',
    removePlugins: 'resize',
    contentsCss: '/areas/admin/content/css/ckeditor-blog.css',
    templates_files: ['/areas/admin/scripts/ckeditor-templates.js'],
    autoParagraph: false
});

在TypeKit应该加载后我收到成功警报但我没看到字体加载。知道我可能做错了吗？

I'm getting the success alert after TypeKit is supposed to load but I am not see the fonts load. Any idea what I may be doing wrong?

答

这是我在通过互联网挖掘3小时后成功组建的：

Here what I've managed to assemble after 3 hours of digging over Internet:

CKEDITOR.on(
    'instanceReady',
    function(ev) {
        var $script = document.createElement('script'),
            $editor_instance = CKEDITOR.instances[ev.editor.name];

        $script.src = '//use.typekit.com/MYKEY.js';
        $script.onload = function() {
            try{$editor_instance.window.$.Typekit.load();}catch(e){}
        };

        $editor_instance.document.getHead().$.appendChild($script);
    }
);

这里的诀窍是使用来自iframe的CKEditor的窗口对象。

Trick here is to use CKEditor's "window" object, that comes from iframe.

如何使用jQuery将TypeKit字体加载到CKEditor实例中

相关推荐