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

我正试图通过jQuery将TypeKit字体加载到CKEditor的一个实例中。这是我的密码：

$('.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加载后收到成功警报，但我没有看到字体加载。知道我做错了什么吗？

CKEDITOR.scriptLoader似乎用于将资产加载到父窗口，而不是加载到iframe的文档中。这会导致上面的代码执行，并将Typekit字体重新应用于父窗口，而不是iframe

我的解决方案是在父窗口中设置document.domain，动态创建元素，将它们附加到iframe文档的

一,。您的Typekit有一个域白名单。除非您在父窗口中将document.domain指定为该白名单上的域，否则CKEditor不会将标记的src属性设置为在此白名单中返回有效值

document.domain = "example.com";

二,。我创建了脚本，其中的行如下

script1      = document.newElement('script');
script1.src  = "https://use.typekit.com/MYKEY.js";

script2      = document.newElement('script');
script2.text = "try{Typekit.load();}catch(e){}";

三,。然后，我将它们附加到我在项目中使用jQuery的dom中，因此这就是我如何定位元素的方式

Typekit字体现在已应用

已修改以在CKEditor设置中使用

  editors.ckeditor(function(){
    var head         = this.document.getHead().$,
        script1      = document.newElement("script"),
        script2      = document.newElement("script");

    script1.src  = sprintf("https://use.typekit.com/%s.js", app_typekit_id);
    script2.text = "setTimeout(function(){ try{Typekit.load();}catch(e){} }, 0);";

    head.appendChild(script1);
    head.appendChild(script2);
  },
  {
    //... your custom config
  });

---

也许有比setTimeoutfunction{…}，0更好的方法；延迟0毫秒，但仅保留try{Typekit.load；}catch{}不会给script1足够的时间由浏览器追加和解释以开始阻塞。还要注意的是，我对上面sprintf的使用来自于一个不是本地JS的库。

这里是我在互联网上挖掘了3个小时后收集到的：

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);
    }
);

---

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

因为CKEditor中的内容在iframe中，所以我得到了一个403错误。您在套件设置中将什么设置为域？

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);
    }
);