Les polices Google et TinyMCE

Question

Est-ce que les polices google peuvent être utilisées avec tinyMCE? Comment cela peut-il être fait?

Answer 1

Oui, c'est possible, je vais décrire deux façons d'y parvenir.

Way # 1: Exemple: google Cantarell police à l'aide propre plugin

Pour le faire fonctionner, vous devrez write your own tinymce plugin et placer ce code dans l'en-tête tinymce iframes. Utilisez l'événement onInit dans votre propre plugin pour l'ajouter.

Cela ressemblera à:

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

De plus, vous devez ajouter la police souhaitée à votre css afin de l'appliquer. Vous pouvez utiliser le tinmyce init parameter content_css. Il vous devez spécifier quelque chose comme:

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

Way # 2: Exemple: google Cantarell police en utilisant la déclaration font-face

Vous pouvez download the font directement à partir des polices google.

Placez le fichier de police (c'est-à-dire Cantarell-Regular.ttf) quelque part sur votre serveur (sachez que IE (Internet Explorer) a généralement besoin de fichiers eot). Maintenant, tout ce que vous devez faire est d'utiliser une déclaration @ font-face dans votre content_css

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

et l'appliquer à un élément css. Exemple:

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

Answer 2

Il existe également un autre moyen, probablement le plus simple, d'insérer des polices google dans tinyMCE.

En tinyMCE.init préciser comme suit:

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

Et puis à tinymce_stylesheet.css vous pouvez utiliser toutes les polices que vous avez importé de Google.

Un autre conseil: au lieu d'écrire une nouvelle feuille de style à partir de zéro, dupliquer le fichier:

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

... et changer la famille de polices.

Answer 3

C'est plus facile maintenant après la mise à jour de WordPress 3.9. Vous n'avez pas besoin de toucher les fichiers de base de WordPress. Utilisez simplement le code suivant pour inclure de nouvelles polices dans votre éditeur de publication.

Lire plus de tutoriel détaillé à partir d'ici.

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

Answer 4

J'ai finalement résolu mon problème. Après la recherche de plus de deux heures et pas de solution.

Je viens d'ajouter une police-face dans TinyMCE CSS.

Faites ceci:

1 - Téléchargez votre police google et passé sur votre dossier de polices (chemin que vous voulez) 2 - Aller à tinymce \ js \ tinymce \ skins \ GrisClair et ouvert content.min. css

ajouter

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

en première ligne avant "corps".

qui va être comme ça

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

et nous sommes ici !!!! Vous l'avez, simple mais HARRRRRRRRD à trouver! Profitez-en et partagez cette solution.

Answer 5

Je sais que c'est une vieille question, mais ma suggestion, surtout si vous souhaitez utiliser plus de 1 polices Web dans votre contenu édité avec TinyMCE, vous pouvez:

1. Ajouter les polices sélectionnées Fron Google WebFonts (ou un autre fournisseur de la police - @font-face pour cela)
2. Définir les classes de sélection dans votre feuille de style
3. Ajouter les classes comme custom format selectors dans votre configuration de TinyMCE (par exemple .font-1.).

Vous pouvez également spécifier vrai à l'style_formats_merge TinyMCE option de configuration, qui ajoutera vos styles personnalisés aux valeurs par défaut TinyMCE, plutôt que de les écraser.

Voici un exemple de la façon dont il regarde un CMS j'ai développé (ici je n'ajouté le homard Deux font, mais efficacement de nombreuses polices pourrait être ajouté si nécessaire):

Donc, en Javascript, une partie de ma configuration ressemble à:

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

et dans le style de mon site (ou thème), j'ai ajouté:

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

Answer 6

Encore plus facile à faire tinymce iframe pour charger une Google police, y compris des styles différents ou poids est de remplacer par des virgules avec la version codée url %2C

donc plutôt quelque chose comme ceci:

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

serait quelque chose comme ceci:

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

tinymce ignorera la virgule encodée et chargera la police correctement.