admin管理员组

文章数量:1294708

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(
      ".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
});

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?

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

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?

  • javascript
  • jquery
  • ckeditor
  • typekit
Share Improve this question asked Jan 16, 2012 at 20:34 craigmolivercraigmoliver 6,56212 gold badges51 silver badges90 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 13

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./MYKEY.js';
        $script.onload = function() {
            try{$editor_instance.window.$.Typekit.load();}catch(e){}
        };

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

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

CKEDITOR.scriptLoader appears to be used to load assets to the parent window, not into the iframe'd document. This causes your code above to execute and re-apply the Typekit font to the parent window instead of the iframe.

My solution for this is to set document.domain in your parent window, create <script> elements dynamically, append them to the <head> of the iframe document.

1. Your Typekit has a domain whitelist. CKEditor will not set set the <iframe> tag's src attribute to return a valid value in this whitelist unless you specify document.domain in your parent window to be a domain on that whitelist.

document.domain = "example.";

2. I created the scripts with lines like

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

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

3. I then append these to the dom (I use jQuery in my project, so that's how I target the element)

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

The Typekit fonts are now applied.

Modified for use within the CKEditor setup

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

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

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

Maybe there is a better way than the setTimeout(function(){ ... }, 0); (a 0ms delay), but leaving just the try{Typekit.load();}catch(e){} does not give script1 enough time to be appended and interpreted by the browser to begin blocking. Also note, my use of sprintf() above es from a library (not native JS).

本文标签： javascriptHow to load TypeKit fonts into a CKEditor instance using jQueryStack Overflow

版权声明：本文标题：javascript - How to load TypeKit fonts into a CKEditor instance using jQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741603642a2387845.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。