web-dev-qa-db-fra.com

Comment ajouter une nouvelle police dans tinymce editor?

Je souhaite add new font dans tinymce editor qui s'affiche dans font dropdown et s'applique au texte de l'éditeur.

J'essaie d'ajouter la police ttf dans le dossier des polices du dossier de thèmes avancés, ainsi que editor_template.js et d'ajouter css dans contect.css pour @ font-face.

J'ai le nom de la police dans la liste déroulante des polices. Mais quand j'applique à un texte, aucun effet de police sur ce texte.

Quel est le problème actuel, je ne peux pas trouver. J'espère que c'est un problème de chemin ou autre ...

fontstinymcefont-face
13
harsh4u

J'ai résolu le problème,

Vérifiez tous les problèmes possibles ci-dessous et corrigez-les pour ajouter une police dans l'éditeur TinyMCE. 

  • Créer un dossier de polices: tinymce/themes/advanced/ - s'il n'existe pas.

    1. Mettre les polices dans les polices "tinymce/themes/advanced/fonts/aphrodite_pro.ttf.

    2. Ajouter une police dans editor_template.js & editor_template_src.js inclure dans "theme_advanced_fonts"

      Ex: theme_advanced_fonts: "Aphrodite Pro=aphrodite pro",

  • Conservez la séquence de noms de police "theme_advanced_fonts" dans les deux fichiers js ci-dessus.

Partie la plus importante: "Aphrodite Pro" name est défini par nous, où "aphrodite pro" est le nom de la police.

Note Cela pourrait ne pas fonctionner dans TinyMCE version 4 ou supérieure. Consultez la nouvelle documentation: https://www.tinymce.com/docs/configure/content-formatting/#font_formats

7
harsh4u

En utilisant Google Fonts, je viens de résoudre ce problème en utilisant deux lignes (dans l'initialisation de TinyMCE):

content_css: ['https://fonts.googleapis.com/css?family=Gugi'],
font_formats: 'Arial Black=arial black,avant garde;Gugi=Gugi, cursive;Times New Roman=times new roman,times;',

La nouvelle police s'appelle Gugi et apparaîtra entre le noir arial et le nouveau roman

1
Ignacio Ara

J'ai étudié cette solution en installant la police Papyrus et cela fonctionne bien (sans @ font-face dans aucun fichier css), mais en recherchant avec plusieurs navigateurs sur un Mac (exécutant Lion), j'ai constaté que cela fonctionnait bien dans Safari et Firefox, l'option Papyrus n'apparaît pas dans la liste déroulante des polices de l'éditeur de texte dans Chrome. Je vois que d'autres personnes ont eu des problèmes avec Chrome dans des domaines connexes. Je ne sais donc pas si cela peut être résolu dans Chrome ou non.

J'ai ajouté Papyrus = Papyrus dans les deux fichiers .js, dans le même ordre de position relative, et ajouté le dossier de polices comme décrit, avec le fichier de police Papyrus.TTF (majuscules et minuscules, comme indiqué).

Dans Safari et Firefox, cela donne Papyrus dans la liste déroulante et la police Papyrus dans le texte de l'éditeur et sur la page du site Web, exactement comme il convient.

Mais pas dans Chrome car la police ne peut pas être choisie.

0
Brian

Vous devez définir le paramètre theme_advanced_fonts configuration en fonction de vos besoins . Au cas où vous auriez besoin d’ajouter la police à l’éditeur, iframe head contect.css avec @font-face est la bonne solution.

0
Thariama