Question

我正在尝试通过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后获得成功警报，但我看不到字体加载。知道我可能做错了吗？

Answer 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的“窗口”对象。

Answer 2

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

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

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

document.domain

2。我使用

这样的行创建了脚本

document.domain = "example.com";

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

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

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

现在应用了Typekit字体。

修改后在CKEditor设置中使用

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

也许有比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 }); （延迟0毫秒）更好的方式，但只留下setTimeout(function(){ ... }, 0);并没有给try{Typekit.load();}catch(e){}足够的时间由浏览器追加并解释以开始阻止。另请注意，我对script1的使用来自库（非本机JS）。

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

2 个答案: