Caratteri Google e TinyMCE

Question

I font google possono essere utilizzati con tinyMCE? Come si può fare?

Answer 1

Sì, questo è possibile, descriverò due modi per ottenere ciò.

Way # 1: Esempio: Google Font Cantarell utilizzando proprio plug

Per farlo funzionare è necessario write your own tinymce plugin e inserire questo codice nel TinyMCE iframe intestazione. Usa l'evento onInit nel tuo plugin per aggiungerlo.

Questa sarà simile:

ed.onInit.add(function(){ 
    with(document.getElementById(iframe_id).contentWindow) 
    {   
     var h=document.getElementsByTagName("head"); 
     var newStyleSheet=document.createElement("link"); 
     newStyleSheet.rel="stylesheet"; 
     newStyleSheet.href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin"; 
     h[0].appendChild(newStyleSheet); 
    } 
    }); 

Inoltre si dovrà aggiungere il carattere desiderato per il CSS in modo da applicarla. È possibile utilizzare lo tinmyce init parameter content_css. C'è necessario specificare qualcosa di simile:

p { font-family: 'Cantarell', arial, serif; } 

Way # 2: Esempio: Google Font Cantarell utilizzando dichiarazione font-face

È possibile download the font direttamente dal font google.

Posizionare il file del font (ad esempio Cantarell-Regular.ttf) da qualche parte sul server (tenere presente che IE (Internet Explorer) in genere richiede file eot). Ora tutto quello che dovete fare è usare una dichiarazione @ font-face in content_css

@font-face {font-family: "my_own_family"; src: url("http://mydomain.com/fonts/Cantarell-Regular.ttf");} 

e applicarlo ad un elemento CSS. Esempio:

p { font-family: 'my_own_family', helvetica, arial, serif; } 

Answer 2

C'è anche un altro, probabilmente il modo più semplice per inserire i caratteri di google in tinyMCE.

In tinyMCE.init specificare quanto segue:

content_css : "/tinymce_stylesheet.css,http://fonts.googleapis.com/css?family=Sanchez" 

E poi nel tinymce_stylesheet.css è possibile utilizzare qualsiasi tipo di carattere è stata importata da Google.

Un ultimo suggerimento: Invece di scrivere nuovo foglio di stile da zero, duplicare il file:

tiny_mce/themes/advanced/skins/default/content.css 

... e cambiare il font-family lì.

Answer 3

Ora è più semplice dopo l'aggiornamento di WordPress 3.9. Non è necessario toccare i file core di WordPress. Basta usare il seguente codice per includere nuovi caratteri sul tuo editor di post.

Leggi tutorial più dettagliato da qui.

http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/

Answer 4

ho finalmente risolto il mio problema. Dopo la ricerca più di due ore e nessuna soluzione.

Ho appena aggiunto font-face in TinyMCE CSS.

fare questo:

1 - Scarica il vostro font google e passato sulla vostra cartella dei font (Ogni percorso che si desidera) 2 - Vai alla TinyMCE \ js \ tinymce \ skins \ lightgray e aperto content.min. css

aggiungere

@font-face { 
    font-family: Questrial; 
    src: url("fontfolder/yourfont.ttf"); 
} 

in prima linea prima di "corpo".

che sta per essere come quello

@font-face { 
    font-family: Questrial; 
    src: url("../../../../../../font/questrial.ttf"); 
}body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-s............. 

ed eccoci qui !!!! Hai capito, semplice ma HARRRRRRRRD da trovare! Goditela e condividi questa soluzione.

Answer 5

Mi rendo conto che è una vecchia questione, ma il mio suggerimento, soprattutto se si desidera utilizzare carattere più di 1 Web nel contenuti editati con TinyMCE, allora si potrebbe:

1. Aggiungere i caratteri selezionati fron Google WebFonts (o altro fornitore di carattere - utilizzare @font-face per questo)
2. definire le classi di selezione nel foglio di stile
3. aggiungere le classi come custom format selectors nella configurazione TinyMCE (ad es .font-1.).

È inoltre possibile specificare vero per l'opzione di configurazione TinyMCE style_formats_merge, a cui si aggiungeranno i vostri stili personalizzati alle impostazioni di TinyMCE, piuttosto che li sovrascrive.

Ecco un esempio di come appare su un CMS che ho sviluppato (qui ho aggiunto solo il carattere Lobster Due, ma efficacemente molti font potrebbero essere aggiunti, se necessario):

così in Javascript, parte della mia configurazione simile a:

tinymce_options = { 
    style_formats_merge: true, 
    style_formats = [{ 
    title: "Theme", 
    items: [{ 
     title: "Fonts", 
     items: [ 
     { title: "1. Lobster Two", inline: "span", classes: "font-1"} 
     ] 
    }, { 
     title: "Styles", 
     items: [ 
     /* here add further theme styles if needed... */ 
     ] 
    }] 
    }] 
}; 

e nello stile del mio sito web (o tema), ho aggiunto:

.font-1 { font-family:'Lobster Two'; } 

Answer 6

Ancora più facile da fare TinyMCE iframe per caricare un font Google compresi gli stili o pesi diversi è quello di sostituire virgola con la versione URL codificato %2C

così invece qualcosa di simile:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400,700' });

sarebbe qualcosa del genere:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400%2C700' });

tinymce ignorerà la virgola codificata e caricherà il carattere correttamente.