it-swarm.dev

Como alterar o tamanho da fonte padrão no tinymce?

Eu estou usando o editor jquery tinymce. O tamanho da fonte padrão é 10. Eu gosto de mudar esse tamanho de fonte padrão. Como eu posso fazer isso,

32
Mohan Ram

Você precisa usar a configuração content_css do tinymce para definir um arquivo css personalizado (certifique-se de que essa configuração aponte para um local válido de um arquivo css). Este arquivo será inserido no editor iframes head depois que todas as outras configurações de css (arquivos do núcleo) forem inseridas ao inicializar o tinymce - assim, todas as configurações que você colocar no seu arquivo sobrescreverão as configurações feitas antes (pelo tinymce). 

Exemplo: Definir o tamanho de fonte padrão para 11px. Conteúdo de um arquivo css personalizado (eu o nomeei content.css na minha instalação):

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

Como usar esta configuração:

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

Eu usei no meu projeto dessa maneira 

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

Esta é a melhor maneira de alterar os valores das propriedades em 'content.css'

20
Nishad Up

Basta adicionar esta linha às opções

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

então parece que isso 

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 apenas encontre o arquivo css que é usado pelo tinymce e altere font-size. Por exemplo, se você estiver usando um tema simples, vá a um lugar como este: js/themes/simple/skins/default/content.css e mude font-size. Trabalhando para mim.

2
krzyhub

Vou deixar isso aqui, com tinyMCE 4 agora:

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

Uma opção é content_style, onde você pode adicionar CSS extra ao editor.

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

Infelizmente você não pode simplesmente definir body sem !important por causa da ordem em que eles definem o css.

Além disso, eu não permito que as pessoas alterem o tamanho da fonte - e isso provavelmente vai dar errado. 

Isso ajudou-me a mudar o tamanho 'padrão' como visto, mas você precisa ser cauteloso se permitir que as pessoas alterem o tamanho da fonte depois disso. 

Para mim, essa abordagem rápida e suja era tudo de que eu precisava, porque o HTML que estou editando é super simples.

0
Simon Weaver

em tinymce/themes/advanced/skins/o2k7/content.css add css:

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

Basta editar 

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

e mude o tamanho da fonte nesta linha:

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