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

【问题标题】：How to load TypeKit fonts into a CKEditor instance using jQuery如何使用 jQuery 将 TypeKit 字体加载到 CKEditor 实例中
【发布时间】：2012-01-16 20:34:15
【问题描述】：

我正在尝试通过 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 应该加载后收到成功警报，但我没有看到字体加载。知道我可能做错了什么吗？

【问题讨论】：

标签： javascript jquery ckeditor typekit

【解决方案1】：

这是我在互联网上挖掘 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);
    }
);

这里的技巧是使用来自 iframe 的 CKEditor 的“窗口”对象。

【讨论】：

因为 CKEditor 中的内容在 IFRAME 中，所以我收到 403 错误。您在套件设置中将什么设置为域？

【解决方案2】：

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

对此我的解决方案是在父窗口中设置document.domain，动态创建<script> 元素，将它们附加到iframe document 的<head>。

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

document.domain = "example.com";

2. 我用类似的行创建了脚本

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

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

3. 然后我将这些附加到 dom （我在我的项目中使用 jQuery，这就是我定位元素的方式）

head = jQuery('textarea.editor').ckeditorGet().document.getHead().$;
head.appendChild(script1);
head.appendChild(script2);

现在已应用 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
  });

也许有比 setTimeout(function(){ ... }, 0); 更好的方法（延迟 0 毫秒），但只留下 try{Typekit.load();}catch(e){} 并没有给 script1 足够的时间被浏览器附加和解释开始阻止。另请注意，我上面对sprintf() 的使用来自库（不是原生JS）。

【讨论】：