web-dev-qa-db-fra.com

Comment changer la taille de police par défaut dans tinymce?

J'utilise jquery tinymce editor. La taille de police par défaut est 10. J'aime modifier la taille de la police par défaut. Comment puis je faire ça,

jquerytinymcewysiwyg
32
Mohan Ram

Vous devez utiliser le paramètre content_css de tinymce pour définir votre propre fichier css (assurez-vous que ce paramètre pointe vers un emplacement valide d'un fichier css). Ce fichier sera inséré dans l’éditeur iframes en-tête après l’initialisation de tinymce après l’introduction de tous les autres paramètres css (fichiers du noyau) - ainsi, tous les paramètres que vous placez dans votre fichier écraseront les paramètres définis auparavant (par tinymce). 

Exemple: Définition de la taille de police par défaut sur 11px. Contenu d'un fichier css personnalisé (je l'ai nommé content.css dans mon installation):

body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
}

Comment utiliser ce paramètre:

tinyMCE.init({
 ...
 // you do not need to include it yourself, tinymce will do this for you, 
 // but you will need to give tinymce the location of your css file
 content_css : "http://www.myserver.com/css/content.css", 
     ...
});
53
Thariama

J'ai utilisé dans mon projet de cette façon 

tinymce.init({
  selector:"#txt1",
  setup : function(ed)
  {
    ed.on('init', function() 
    {
        this.execCommand("fontName", false, "tahoma");
        this.execCommand("fontSize", false, "12px");
    });
  }  
});

C'est le meilleur moyen de changer les valeurs de propriété dans 'content.css'

20
Nishad Up

Il suffit d'ajouter cette ligne aux options

content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",

alors ça ressemble à ça 

tinymce.init({
    selector: "textarea",theme: "modern",width: '100%',min_height:350 ,menubar:false,
     content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
    browser_spellcheck : true,
    plugins: 
    [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
    ],
   toolbar1: " undo redo preview code | \n\
                 link  bold italic underline | hr | image responsivefilemanager media |unlink anchor  | ",
   image_advtab: true ,

   external_filemanager_path:"/tinymce/filemanager/",
   filemanager_title:"Responsive Filemanager" ,
   relative_urls: false,
    remove_script_Host : false,
   external_plugins: { "filemanager" : "/tinymce/filemanager/plugin.min.js"}
 });
12
user3721605
<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
            setup : function(ed)
            {
                // set the editor font size
                ed.onInit.add(function(ed)
                {
                ed.getBody().style.fontSize = '10px';
                });
            },
            });
</script>
5
KwangKung

Ou trouvez simplement le fichier css utilisé par tinymce et changez font-size. Par exemple, si vous utilisez un thème simple, allez quelque part comme ceci: js/themes/simple/skins/default/content.css et changez font-size. Travailler pour moi.

2
krzyhub

Je vais laisser ça ici, avec tinyMCE 4 c'est maintenant:

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

Une option est content_style où vous pouvez ajouter des CSS supplémentaires à l'éditeur.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: "div, p { font-size: 15px; }"
});

Malheureusement, vous ne pouvez pas définir body sans !important en raison de l'ordre dans lequel ils définissent le css.

De plus, je ne permets pas aux gens de changer la taille de la police - et cela risque de mal tourner. 

Cela m'a aidé à changer la taille «par défaut» telle qu'elle était affichée, mais vous devez faire preuve de prudence si vous laissez les gens changer la taille de la police après cela. 

Pour moi, cette approche rapide et sale était tout ce dont j'avais besoin car le code HTML que je modifie est très simple.

0
Simon Weaver

dans tinymce/themes/advanced/skins/o2k7/content.css ajouter css:

#tinymce {  font-size: 15px;}
0
Dung Vu

Il suffit de modifier 

tinymce/themes/advanced/skins/o2k7/content.css

et changez la taille de la police à cette ligne:

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
0
HRN