如何使用jQuery將TypeKit字體加載到CKEditor實例中

我想通過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應該加載後的成功警報，但我沒有看到字體加載。任何想法我可能做錯了什麼？

來源

2012-01-16 craigmoliver

CKEDITOR.scriptLoader似乎用於將資產加載到父窗口，而不是放入iframe'd document。這會導致上面的代碼執行並將Typekit字體重新應用於父窗口而不是iframe。

我的解決方案是在您的父窗口中設置document.domain，動態創建<script>元素，將它們附加到iframe document的<head>。

1. Your Typekit有一個域名白名單。 CKEditor不會設置標記的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){}";

我那麼這些追加到DOM （我使用jQuery在我的項目，所以這就是我的目標的元件）

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

的Typekit字體現在是申請IED。

修改爲可使用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）。

來源

2012-07-07 18:09:42 deefour

這裏我所管理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中。

來源

2012-09-05 09:49:14 aik099

完美的作品！ – Sarvesh 2013-01-06 05:09:36

我似乎得到了403錯誤 – Neil 2013-05-28 05:03:42

因爲CKEditor中的內容在IFRAME中，我得到了403錯誤。您在套件設置中設置了哪些域名？ – Neil 2013-05-28 07:09:04

如何使用jQuery將TypeKit字體加載到CKEditor實例中

回答

相關問題