aggiungere google font a Editor tinymce

[$Red]

ciao a tutti, mi servirebbe un aiutino per aggiungere i google fonts all'editor tinymce ho provato varie soluzioni ma senza successo, una volta scelti i fonts su google.com/fonts viene rilasciato il codice per utilizzarli ma sinceramente non riesco a farli comparire nel menu a tendina famiglia carattere di tinymce, qualcuno puo darmi qualche indicazione o suggerirmi una guida, ho cercato in rete ma non trovato nulla, grazie mille a tutti

[BelinBelan]

Ciao,


qui trovi tutto, devi scrivere un bel po' di codice però    anche se è per Wordpress, il concetto è identico 

[$Red]

ciao BelinBelan, grazie lo avevo visto quel post ma non ci ho capito molto, ho anche guardato questo video ma non mi trovo con le cartelle  cioè a me alcune cartelle viste nel video non ci sono

[BelinBelan]

Belin!


se non ci "capisci" con un tutorial in inglese, sei andato a cercarti un video in lingua cambogiana!!!


Uhmmm... a naso dovrebbe funzionare e la "logica" è questa:


indiviudi il font o i font


aggiungi il CSS necessario al Template


aggiungi i nomi dei font a Tiny 

[$Red]

Belin!
se non ci "capisci" con un tutorial in inglese, sei andato a cercarti un video in lingua cambogiana!!!

vabbhè si capiva guardandolo però cosa modificare 

aggiungi i nomi dei font a Tiny 

il problema è proprio questo non so come aggiungere i font a tiny nel menu a tendina  nel video si vede che modifica il file nella cartella media/editors/tinymce/jscript(da questa in poi a me non ci sono)/tiny_mce/themes/advanced/editor_template.js ed anche cercando il file non si trova  , per il template non penso ci siano problemi perche gantry utilizza google fonts

[BelinBelan]

Ok, se no potresti fare così:


crei un tuo css personalizzato con i vari font@face lo chiami editor.css


lo salvi dentro il tuo template creando le certelle : custom/css e dentro ci piazzi il file appena creato.


dal plugin gli dici che il percorso del nuovo css è quello appena creato


Torni a tinymce e ad ogni cosa che vuoi associ il nuovo stile/classe.... dovrebbe funzionare... io ho usato un css e ha funzionato

[$Red]

io ci provo da ore con il file editor-personale.css l'unica cosa che ottengo è la parte dove inserire il testo che diventa nera  anche ricopiandoci prima il css del file editor.css questi sono i codici che mi ha rilasciato google

Codice: [Seleziona]

@import url(http://fonts.googleapis.com/css?family=Purple+Purse|Rum+Raisin|Oranienbaum|Macondo+Swash+Caps|Carrois+Gothic+SC|Architects+Daughter|Denk+One|Chicle|IM+Fell+Great+Primer:400,400italic|Allan:400,700|Alegreya+Sans+SC:400,100,100italic,300,400italic,500,500italic,700,700italic,800,800italic,900,900italic|Amarante|Mouse+Memoirs|New+Rocker|Bad+Script);


font-family: 'Purple Purse', cursive;
font-family: 'Rum Raisin', sans-serif;
font-family: 'Oranienbaum', serif;
font-family: 'Macondo Swash Caps', cursive;
font-family: 'Carrois Gothic SC', sans-serif;
font-family: 'Architects Daughter', cursive;
font-family: 'Denk One', sans-serif;
font-family: 'Chicle', cursive;
font-family: 'IM Fell Great Primer', serif;
font-family: 'Allan', cursive;
font-family: 'Alegreya Sans SC', sans-serif;
font-family: 'Amarante', cursive;
font-family: 'Mouse Memoirs', sans-serif;
font-family: 'New Rocker', cursive;
font-family: 'Bad Script', cursive;

[BelinBelan]

Ok, ma li devi dichiarare anche nel template, per ogni font devi aggiungere nell'head:

Codice: [Seleziona]

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Poi dovrebbe funzionare    ma il file non lo chiami semplicemente: editor.css

[$Red]

niente a me non funzia sarò tonto che ne so  ho inserito i font famili in un css caricato nella cartella css di gantri e richiamato nel plugin sia cosi

Codice: [Seleziona]

font-family: 'Purple Purse', cursive;
font-family: 'Rum Raisin', sans-serif;
font-family: 'Oranienbaum', serif;
font-family: 'Macondo Swash Caps', cursive;
font-family: 'Carrois Gothic SC', sans-serif;
font-family: 'Architects Daughter', cursive;
font-family: 'Denk One', sans-serif;
font-family: 'Chicle', cursive;
font-family: 'IM Fell Great Primer', serif;
font-family: 'Allan', cursive;
font-family: 'Alegreya Sans SC', sans-serif;
font-family: 'Amarante', cursive;
font-family: 'Mouse Memoirs', sans-serif;
font-family: 'New Rocker', cursive;
font-family: 'Bad Script', cursive;che cosi

Codice: [Seleziona]

font-family: 'Purple Purse', cursive; 'Rum Raisin', sans-serif; 'Oranienbaum', serif;

'Macondo Swash Caps', cursive; 'Carrois Gothic SC', sans-serif; 'Architects Daughter',

cursive; 'Denk One', sans-serif; 'Chicle', cursive; 'IM Fell Great Primer', serif;

'Allan', cursive; 'Alegreya Sans SC', sans-serif; 'Amarante', cursive; 'Mouse Memoirs',

sans-serif; 'New Rocker', cursive; 'Bad Script', cursive;ho provato ad aggiungere anche la riga @import oppure rimuoverla, ho aggiunto nell'head del template

Codice: [Seleziona]

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Purple+Purse|Rum+Raisin|Oranienbaum|Macondo+Swash+Caps|Carrois+Gothic+SC|Architects+Daughter|Denk+One|Chicle|IM+Fell+Great+Primer:400,400italic|Allan:400,700|Alegreya+Sans+SC:400,100,100italic,300,400italic,500,500italic,700,700italic,800,800italic,900,900italic|Amarante|Mouse+Memoirs|New+Rocker|Bad+Script">o anche il singolo font ma niente nel menu di scelta font di tiny ho sempre e solo i soliti font 

edit: mi sono accorto ora che ho aperto il topic nella sezione 2.5 ma sono su joomla 3 se qualche mod mi sposta mi scuso per l'errore e grazie 

[BelinBelan]

uhmmm.. questa è una bella sfida!    ma giusto per togliersi anche l'ultimo dubbio... se cambi template?

[$Red]

il template admin?

[BelinBelan]

no quello del sito!   ma TinyMce dove lo stai testando? lato frontend o lato backend?

[$Red]

backend 

[BelinBelan]

Belin!   scusa ma come fai a vedere nel backend se, e spero sia così, le @import e tutto il resto sta nel template... frontend??? 

[$Red]

aspetta che misà che sono proprio un tonto.... ho cloudflare attivo metto in modalità sviluppo vediamo se era quello 

[$Red]

allora ho disattivato cloudflare, caricato un css editor.css con i font di google con inserito

Codice: [Seleziona]

font-family: 'Purple Purse', cursive; 'Rum Raisin', sans-serif; 'Oranienbaum', serif; 'Macondo Swash Caps', cursive; 'Carrois Gothic SC', sans-serif; 'Architects Daughter', cursive; 'Denk One', sans-serif; 'Chicle', cursive; 'IM Fell Great Primer', serif; 'Allan', cursive; 'Alegreya Sans SC', sans-serif; 'Amarante', cursive; 'Mouse Memoirs', sans-serif; 'New Rocker', cursive; 'Bad Script', cursive;
@import url(http://fonts.googleapis.com/css?family=Purple+Purse|Rum+Raisin|Oranienbaum|Macondo+Swash+Caps|Carrois+Gothic+SC|Architects+Daughter|Denk+One|Chicle|IM+Fell+Great+Primer:400,400italic|Allan:400,700|Alegreya+Sans+SC:400,100,100italic,300,400italic,500,500italic,700,700italic,800,800italic,900,900italic|Amarante|Mouse+Memoirs|New+Rocker|Bad+Script);o modificato l'index di gantry ed inserito

Codice: [Seleziona]

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Purple+Purse|Rum+Raisin|Oranienbaum|Macondo+Swash+Caps|Carrois+Gothic+SC|Architects+Daughter|Denk+One|Chicle|IM+Fell+Great+Primer:400,400italic|Allan:400,700|Alegreya+Sans+SC:400,100,100italic,300,400italic,500,500italic,700,700italic,800,800italic,900,900italic|Amarante|Mouse+Memoirs|New+Rocker|Bad+Script">risultato tinymce menu a tendina famiglia font frontend i soliti backend i soliti 

[BelinBelan]

ora che mi viene in mente...


ma le "classi" le hai create nel css???

[$Red]

io ho fatto solo quelle due cose Belin 

[BelinBelan]

io ho fatto solo quelle due cose Belin 

Belin! lo dico io! 


Una classe, una semplice classe chiamata che ne so: .pippo dove dentro gli metti lo stile che vuoi compreso il font...


A questo punto nel menu a tendina stile ti appare "pippo" e selezione del testo, gli dai la classe e... voilà! 

[$Red]

niente non ci riesco 

[giusebos]

qui c'è un interessante discussione
link:http://stackoverflow.com/questions/14170758/adding-new-fonts-to-tinymce-font-options

[$Red]

grazie giusebos gli do un'occhiata, comunque ho visto che per farli apparire nel menu a tendina si devono aggiungere sul file media/editors/tinymce/tinymce.min.js ma è un vero casino, ho fatto qualche test anche con jce che consente l'inserimento tramite la sua configurazione ma anche li ho un pò di difficolta