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

49

您需要使用content_css设置TinyMCE的的设置自定义CSS文件（请确保该设置指向一个css文件的有效位置）。该文件将被插入在编辑器中的I帧头部其他所有CSS设置（从核心文件）后初始化TinyMCE的时候插入那里 - 因此你在你的文件放在将覆盖之前（由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", 
    ... 
});

来源

2010-12-13 09:36:00 Thariama

+1

我需要包括这个CSS。因为如果我插入同一页面，我的主页也会受到影响。在哪里插入这个CSS和如何访问它。 – 2010-12-13 09:40:54

+0

我很抱歉给出无关紧要的评论。这个对我有用。我已经改变了content.css的字体大小，谢谢你 – 2010-12-13 09:58:20

+0

很高兴能够帮助 – Thariama 2010-12-13 09:58:58

-1

据我所知，TinyMCE的继承对于实例<body>标签父标签定义字体大小

来源

2010-12-13 09:34:39

+0

如何改变这个解释我。 – 2010-12-13 09:36:27

+4

这是真的，但这是如何帮助解决问题？ – Thariama 2010-12-13 09:48:02

+0

@Thariama我认为这很明显 – JSON 2016-07-13 19:09:54

2

，或者想寻找所使用TinyMCE的CSS文件并更改font-size。例如，如果你使用简单的主题，然后去的地方是这样的：js/themes/simple/skins/default/content.css有改变font-size。为我工作。

来源

2011-09-12 11:43:06 krzyhub

5

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

来源

2014-08-22 06:35:08 KwangKung

+1

秒ed参数不通过某种方式 - “this”工作 – Srneczek 2015-12-27 09:39:09

+0

似乎不再工作在4.6（无论是ed还是这个：TypeError：undefined不是一个对象（评估'ed.onInit.add'） – Jonny 2017-05-09 19:00:07

0

在 tinymce/themes/advanced/skins/o2k7/content.css新增CSS

：

#tinymce { font-size: 15px;}

来源

2015-02-03 13:27:29

-1

这里是如何做到这一点无需任何编码

使用插件 'TinyMCE的高级'
激活它的设置。

更详细的说明here。

来源

2015-04-07 09:17:16 shadowoflight

19

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

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

这不仅仅是在“content.css”

来源

2015-04-13 06:17:03

+0

this.execCommand “fontSize”，false，“12px”）; 对我来说不适用于tmce 4（google chrome 51） this.getBody（）。style.fontSize ='12px'; from KwangKungs answer – Max 2016-06-08 15:52:35

+0

this导致不必要的滚动到输入....如何避免 – 2016-10-16 12:11:31

1

改变属性值的更好的方法，我会yust离开这个位置，用tinyMCE的4，现在是：

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

来源

2016-03-17 13:11:25 Georg

0

一种选择是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非常简单。

来源

2016-09-04 20:49:42

9

刚加入这一行的选项

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

来源

2016-10-21 13:26:49 user3721605

+1

对于v3.5这个类为我工作：'.mceContentBody'。 – Wtower 2017-03-02 20:41:29

+0

这是在TinyMCE 4.6.1中为我做的最简单的方法 – 2017-06-29 17:05:31

0

只需编辑

TinyMCE的/主题/高级/毛皮/ o2k7/content.css

并在此行更改字体大小：

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

来源

2017-01-18 08:22:47 HRN

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

回答

相关问题