Estilos e Typekit do editor

10

Meu site usa o kit de tipos para pegar fontes personalizadas, que funcionam no frontend.

Eu gostaria de colocar isso nos meus estilos de editor no back-end. No entanto, não sei como faria isso. O Typekit usa um trecho de incorporação js em vez de um trecho de incorporação de face de fonte css.

Tom J Nowell
fonte
sugira que isso seja migrado para o stackoverflow - não é realmente um problema do WP.
anu
2
É porque eu sei como fazer typekit no caso geral. O que estou tentando fazer é colocá-lo no editor do WordPress. Se ele é movido sobre a Stack Overflow não vai ser apenas uma carga de pessoas que vão "hmmm mas este é um WordPress Pergunta = s"
Tom J Nowell

Respostas:

3

A solução de plug-in TinyMCE de Tom Nowell funciona de maneira brilhante, basta atualizar o JavaScript para usar o novo código assíncrono do Typekit . Depois de usar o novo código de incorporação assíncrona, o problema 403 desaparece e você terá o TinyMCE habilitado para Typekit sem problemas!

Tom reuniu todo o código em uma postagem no blog. Ele fez todo o trabalho pesado sobre isso, então dê a ele algumas visualizações de página e leia as especificações lá !

Chris Van Patten
fonte
Faz? (Eu perguntei e respondi = p) minha solução funcionaria se não fosse pela segurança, se eu pudesse definir o src do iframe como uma página em branco no mesmo domínio em que funcionaria, testarei o novo código assíncrono Apesar!
Tom J Nowell
Bem huzzah faz !! =]
Tom J Nowell
Você poderia modificar sua resposta com a versão atualizada do meu código apenas para completar?
Tom J Nowell
Eu escrevi um post no blog aqui: tomjn.com/150/typekit-wp-editor-styles com o código em gists, você tem uma conta no twitter em que posso lhe creditar por descobrir o bit assíncrono?
Tom J Nowell
Vou atualizar minha resposta para criar um link para sua postagem no blog. Você fez o trabalho pesado aqui!
Chris Van Patten
6

Eu contornei isso adicionando um plug-in tinymce, ele está quase lá, mas estou recebendo um 403 proibido quando ele tenta recuperar a fonte css do typekit:

js:

(function() {
    tinymce.create('tinymce.plugins.typekit', {
        init: function(ed, url) {
            ed.onPreInit.add(function(ed) {

                // Get the DOM document object for the IFRAME
                var doc = ed.getDoc();

                // Create the script we will add to the header asynchronously
                var jscript = "var TypekitConfig = {\n\
                    kitId: '*******'\n\
                    };\n\
                    (function() {\n\
                    var tk = document.createElement('script');\n\
                    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';\n\
                    tk.type = 'text/javascript';\n\
                    tk.async = 'true';\n\
                    tk.onload = tk.onreadystatechange = function() {\n\
                    var rs = this.readyState;\n\
                    if (rs && rs != 'complete' && rs != 'loaded') return;\n\
                    try { Typekit.load(TypekitConfig); } catch (e) {}\n\
                    };\n\
                    var s = document.getElementsByTagName('script')[0];\n\
                    s.parentNode.insertBefore(tk, s);\n\
                })();";

                // Create a script element and insert the TypeKit code into it
                var script = doc.createElement("script");
                script.type = "text/javascript";
                script.appendChild(doc.createTextNode(jscript));

                // Add the script to the header
                doc.getElementsByTagName('head')[0].appendChild(script);

            });

        },
        getInfo: function() {
            return {
                longname: 'TypeKit For TinyMCE',
                author: 'Tom J Nowell',
                authorurl: 'http://tomjn.com/',
                infourl: 'http://twitter.com/tarendai',
                version: "1.0"
            };
        }
    });
    tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();

PHP

add_filter("mce_external_plugins", "tomjn_mce_external_plugins");
function tomjn_mce_external_plugins($plugin_array){
    $plugin_array['typekit']  =  get_template_directory_uri().'/typekit.tinymce.js';
    return $plugin_array;
}
Tom J Nowell
fonte
Isso funcionou totalmente para mim. Requer um pouco de trabalho e paciência, mas funciona muito bem!
racl101
0

Você pode enfileirar o script para admin, então ele deve estar disponível para o seu editor.css

    add_action( 'admin_print_scripts', 'admin_typekit' );
    function admin_typekit( ) {
         global $pagenow;
         $arg = array( 'post.php', 'post-new.php', 'page-new.php', 'page.php' );
         if ( ! in_array( $pagenow, $arg ))
                return; ?>

          <script type="text/javascript">
              (function () {
                 var config = {
               kitId:'xxxxxx',
               scriptTimeout:3000
               };
               var h = document.getElementsByTagName("html")[0];
               h.className += " wf-loading";
               var t = setTimeout(function () {
               h.className = h.className.replace(/( |^)wf-loading( |$)/g, "");
               h.className += " wf-inactive"
               }, config.scriptTimeout);
               var tk = document.createElement("script");
               tk.src = '//use.typekit.net/' + config.kitId + '.js';
               tk.type = "text/javascript";
               tk.async = "true";
               tk.onload = tk.onreadystatechange = function () {
           var a = this.readyState;
            if (a && a != "complete" && a != "loaded")return;
               clearTimeout(t);
                try {
                  Typekit.load(config)
                } catch (b) { } };
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(tk, s)
             })();
             </script>

   <?php }

Editar:

Atualizado o código acima para o typekit, pois requer alguns js embutidos, como você mencionou. Também precisamos alterar a variável $ hook para $ pagenow, pois não estávamos usando admin_enqueue_scripts.

Chris_O
fonte
Não é tão simples como isso, é script embutido, mas se adicionando-o no admin é suficiente para o css para pegá-lo, então ele deve funcionar =]
Tom J Nowell
Isso realmente não funciona. Além de um ponto-e-vírgula ausente e um colchete, depois de corrigido, ele adiciona a fonte à tela de pós-edição, posso alterar a interface do WordPress, mas não posso usar a fonte nos estilos de editor. Meu conteúdo de postagem se recusa a usar as fontes typekit e, em vez disso, é exibido em qualquer fonte disponível nas próximas fontes substitutas.
Tom J Nowell
O JS-se pareceria necessidades inserindo os usos iframe tinyMCE, não o quadro principal que carrega o WordPress pós UI
Tom J Nowell
Consegui resolver o problema do arquivo CSS sendo proibido copiando o css para o meu editor-style.css. É uma correção super hackish, mas funcionou, depois que eu tentei praticamente tudo o resto.
Cole