Как загрузить шрифты TypeKit в экземпляр CKEditor с помощью jQuery - PullRequest
Новая
       26

Как загрузить шрифты TypeKit в экземпляр CKEditor с помощью jQuery

0 голосов
/ 17 января 2012

Я пытаюсь загрузить шрифты TypeKit в экземпляр CKEditor через jQuery. Вот мой код: 

$('.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, но не вижу загрузки шрифтов. Есть идеи, что я могу делать не так?

Ответы [ 2 ]

12 голосов
/ 05 сентября 2012

Вот что мне удалось собрать после 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.

1 голос
/ 07 июля 2012

CKEDITOR.scriptLoader, по-видимому, используется для загрузки ресурсов в родительское окно, не в iframe'd document. Это приводит к тому, что ваш код выше выполняется и повторно применяет шрифт Typekit к родительскому окну вместо iframe.

Мое решение для этого - установить document.domain в родительском окне, динамически создать <script> элементы, добавить их к <head> в iframe document.

1. Ваш Typekit имеет белый список доменов. CKEditor не будет устанавливать атрибут src тега <iframe>, чтобы он возвращал действительное значение в этом белом списке, если вы не укажете 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) .

...