如何更改tinymce中的默认字体大小？答案

【问题标题】：How to change default font size in tinymce?如何更改tinymce中的默认字体大小？
【发布时间】：2010-12-13 09:30:28
【问题描述】：

我正在使用 jquery tinymce 编辑器。默认字体大小为 10。我喜欢更改默认字体大小。我该怎么做呢，

【问题讨论】：

如果你正在使用 django，请查看stackoverflow.com/a/47181703/7639622

【解决方案1】：

您需要使用 tinymce 的 content_css 设置来设置您自己的自定义 css 文件（确保此设置指向 css 文件的有效位置）。在初始化 tinymce 时，在所有其他 css 设置（来自核心的文件）插入到编辑器 iframe 头之后，该文件将插入到编辑器中 - 因此您在文件中放置的所有设置都将覆盖之前所做的设置（通过 tinymce）。

示例： 将默认字体大小设置为 11 像素。自定义 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", 
     ...
});

【讨论】：

我需要在哪里包含这个 css。因为如果我在同一页面中插入，我的主页也会受到影响。在哪里插入这个 css 以及如何访问它。
很抱歉给了不必要的 cmets。这个对我有用。我直接在 content.css 中更改了字体大小，谢谢
很高兴能够提供帮助
@Thariama 你如何为字体大小添加下拉菜单
@meda: 是的，但我刚才看到了这个 :) 你的问题解决了吗？ :)

【解决方案2】：

我在我的项目中使用过这种方式

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

这比仅仅更改 'content.css' 中的属性值更好

【讨论】：

this.execCommand("fontSize", false, "12px");在 tmce 4 上使用 (google chrome 51) this.getBody().style.fontSize = '12px' 对我不起作用；来自KwangKungs的回答。
不幸的是，这将焦点放在了编辑器上。这可以避免吗？

【解决方案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"}
 });

【讨论】：

对于 v3.5，这个类对我有用：.mceContentBody。
这是在 TinyMCE 4.6.1 中为我做的最简单的方法

【解决方案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>

【讨论】：

第二个 ed 参数没有以某种方式传递 - “这个”有效
在 4.6 中似乎不再工作（无论是 ed 还是 this：TypeError: undefined is not an object (evalating 'ed.onInit.add')

【解决方案5】：

或者只是找到tinymce使用的css文件并更改font-size。例如，如果您使用简单的主题，然后去这样的地方：js/themes/simple/skins/default/content.css 并在那里更改font-size。为我工作。

【讨论】：

【解决方案6】：

我将把它留在这里，现在是 tinyMCE 4：

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

【讨论】：

它可以工作，但是：如果你设置 f.e.将 fontSize 设置为 12 pt，然后在一个空的编辑器窗口中按 back-delete，它将重置为 fontSize 11（tinymce 的默认值）。

【解决方案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';
            });
        }

【讨论】：

您也可以使用 this.getBody().style.fontFamily = 'Proxima Nova Alt'; 添加字体系列

【解决方案8】：

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

#tinymce {  font-size: 15px;}

【讨论】：

【解决方案9】：

一个选项是content_style，您可以在其中向编辑器添加额外的 CSS。

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

不幸的是，您不能只设置 body 而不设置 !important，因为它们设置 css 的顺序。

此外，我不允许人们更改字体大小 - 这很可能会出问题。

这有助于我更改查看时的“默认”大小，但如果您让人们在此之后更改字体大小，则需要小心。

对我来说，我只需要这种快速而肮脏的方法，因为我正在编辑的 HTML 非常简单。

【讨论】：

【解决方案10】：

简单编辑

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

并在这一行更改字体大小：

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

【讨论】：

【解决方案11】：

以下对我有用：

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 变成了 14ox。

【讨论】：

【解决方案12】：

要更改 TinyMCE 中的默认字体大小，您可以在初始化脚本中使用 content_css 或 content_style（或两者的组合），具体取决于您的用例。

content_css 可用于加载特定样式表。

例如（在名为 mycontent.css 的文件中的 body 元素上设置 font-size）：

content_css : '/mycontent.css'

content_style 可用于调整（或覆盖）编辑器正在使用的样式表的某些部分，无论是默认编辑器 CSS 还是您使用 content_css 指定的样式表。

例如：

content_style: 'body { font-size: 12px; }'

【讨论】：

【解决方案13】：

设置默认字体大小：添加这些选项。使用版本：4.8.5 (2018-10-30)

fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 18pt", 
content_style: "body {font-size: 9pt;}"

【讨论】：

【解决方案14】：

据我所知，TinyMCE 继承了为父标签定义的字体大小，例如<body> 标签

【讨论】：

如何改变，解释一下。
@Thariama 我认为这很明显

【解决方案15】：

这里是如何在没有任何编码的情况下做到这一点

使用插件“TinyMCE Advanced”
在设置中激活它。

更详细的说明here。

【讨论】：