Modifier le type/la taille de police par défaut dans TinyMCE

Question

Comment changer le type de police et la taille de police par défaut dans TinyMCE? J'utilise le skin avancé et j'ai changé le style body, td, pre dans default/content.css mais ça ne change pas.

Answer 1

Eh bien, il y a plusieurs content.css et un seul est utilisé pour le style de votre éditeur en fonction de vos paramètres de configuration .

Vous devez utiliser le content_css option de configuration et nommez un propre fichier css où vous pouvez remplacer les valeurs par défaut des éditeurs (le content.css que vous recherchiez récemment pour). Dans votre fonction init utiliser quelque chose comme

content_css: "http://localhost/css/my_tiny_styles.css", 

et my_tiny_styles.css ou tout autre fichier que vous utilisez vous choisissez

font-family: myfont1, myfont2, sans-serif; 

Answer 2

Voici une autre façon de résoudre ce problème.

En ajoutant vos propres styles personnalisés dans notre fichier CSS en définissant id tinymce.

#tinymce .mceContentBody p { 
    font-family: your_font_name !important; 
} 

Answer 3

Voici comment procéder sans toucher à CSS ou à tout autre code.

1. Utilisez le plug-in 'TinyMCE avancée'
2. activer dans les paramètres.

Instructions plus détaillées here.

Answer 4

Si vous voulez changer la valeur par défaut des boîtes de dépôt plutôt que le code CSS d'affichage uniquement, avec tinyMCE 4, il est maintenant:

setup : function(ed) { 
ed.on('init', function(ed) { 
    ed.target.editorCommands.execCommand("fontName", false, "Calibri"); 
    ed.target.editorCommands.execCommand("fontSize", false, "11pt"); 
}); 
} 

EDIT: ceci est l'option de configuration de la fonction init comme expliqué ici : https://www.tinymce.com/docs/configure/integration-and-setup/#setup

Answer 5

Pour les personnes ayant des troubles d'ajouter une feuille de style à cause de problèmes de chemin ou une raison quelconque, cela devrait le faire assez simple:

setup : function(ed) { 
    ed.on('init', function(){ 
     $(this.getDoc()).find('head').append('<style>p{margin:0;}</style>'); 
    }); 
} 

note J'ai utilisé jQuery, mais peut bien sûr être fait sans elle aussi bien.