如何在Tinymce中更改默认字体大小？

Question

我正在使用jQuery TinyMCE编辑器。默认字体大小为10。我想更改默认字体大小。我该如何做到呢？

- Mohan Ram

---

如果你正在使用Django，请查看https://dev59.com/Zofca4cB1Zd3GeqPlqir#47181703 - openHBP

Answer 1

你需要使用tinymce的 content_css 设置来指定你自己的自定义CSS文件（确保该设置指向有效的CSS文件位置）。初始化tinymce时，此文件将插入编辑器iframe的head标签中，插入所有其他CSS设置（来自核心的文件）之后 - 因此您在文件中放置的所有设置都将覆盖之前进行的设置（由tinymce完成）。

例如： 将默认字体大小设置为11px。 自定义CSS文件的内容（我在我的安装中将其命名为“content.css”）：

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

如何使用此设置：

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", 
     ...
});

- Thariama

---

我需要把这段 CSS 放在哪里？如果我把它插入到同一页，我的主页面也会受到影响。那我应该把这段 CSS 插入到哪里？如何访问它？ - Mohan Ram

@Thariama，您如何为字体大小添加下拉菜单？ - meda

@meda：你在使用 tinyme3 还是 tinymce4？ - Thariama

@meda：没错，但我刚看到这个 :) 那你的问题解决了吗？ :) - Thariama

然而，当我使用Grunt时，我的CSS将会消失。如果我使用像Grunt或Gulp这样的任务运行器，这是行不通的。 - Ankit Tanna

Answer 2

我已经在我的项目中这样使用

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

这比仅更改“content.css”中的属性值更好。

- Nishad Up

---

this.execCommand("fontSize", false, "12px"); 在使用 Google Chrome 51 的 tmce 4 上对我无效。 但是，KwangKungs 的答案 this.getBody().style.fontSize = '12px'; 却有效。 - Max

很不幸，这会将焦点设置到编辑器。有没有办法避免这种情况？ - Mario Eis

@MarioEis有第四个参数接收{ skip_focus: true }。这似乎文档不太清楚，并且在6.3.1版本中不起作用。你是如何解决这个问题的？ - Minh Nghĩa

Answer 3

只需将此行添加到选项中即可

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

看起来是这样的

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

- Victor Oni

---

对于v3.5版本，这个类对我很有用：.mceContentBody。 - Wtower

这是在TinyMCE 4.6.1中对我来说最简单的方法。 - Autumn Leonard

Answer 4

<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>

- KwangKung

---

一些方式并没有传递第二个参数 - "this" 起了作用。 - Srneczek

似乎在4.6版本中不再起作用（无论是使用ed还是出现此错误: TypeError: undefined is not an object (evaluating 'ed.onInit.add')）。 - Jonny

Answer 5

我会留下这里，使用tinyMCE 4现在可以实现：

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

- Georg

---

它可以工作，但是：如果您将字体大小设置为12pt，然后在空编辑器窗口中按下退格键，它将重置为字体大小11（tinymce的默认值）。 - Jonny

Answer 6

或者找到被TinyMCE使用的CSS文件，然后更改font-size。例如，如果您正在使用简单主题，则可以前往此类似位置：js/themes/simple/skins/default/content.css，然后在那里更改font-size。这对我有效。

- krzyhub

Answer 7

这里的答案混合起来对我有用：

        base_url: '/tinymce',
        suffix: '.min',
        plugins: 'image link lists',
        menubar: false,
        toolbar: 'bold italic underline | bullist numlist | link unlink image | alignleft aligncenter alignright alignjustify',
        branding: false,
        image_uploadtab: true,
        contextmenu_never_use_native: true,
        setup : function(ed) {
            ed.on('init', function(ed) {
                this.getBody().style.fontSize = '12px';
            });
        }

- mrbangybang

---

你也可以通过这个代码 this.getBody().style.fontFamily = 'Proxima Nova Alt'; 添加字体。 - mrbangybang

Answer 8

在 tinymce/themes/advanced/skins/o2k7/content.css 中添加 CSS：

#tinymce {  font-size: 15px;}

- Dũng IT

Answer 9

一种选择是使用content_style，您可以向编辑器添加额外的CSS。

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

很遗憾，由于设置样式的顺序，您不能只将body设置为无关紧要的!important。

此外，我不允许人们更改字体大小 - 这可能会引起混乱。

这对我在改变“默认”大小方面有所帮助，但如果您让人们在此之后更改字体大小，则需要小心。

对我来说，这种快速而简单的方法就足够了，因为我正在编辑的HTML非常简单。

- Simon Weaver

Answer 10

以下方法适用于我：

CSS路径：

tinymce/js/tinymce/skins/lightgray/content.min.css

body{background-color:#fff;color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;

我将字体大小从11px改为了14px。

- TopQnA