web-dev-qa-db-ja.com

tinymceでデフォルトのフォントサイズを変更する方法は？

Jquery tinymceエディターを使用しています。デフォルトのフォントサイズは10です。デフォルトのフォントサイズを変更したいです。どうやってやるの、

jquerytinymcewysiwyg
34
Mohan Ram

content_css tinymceの設定を使用して、独自のカスタムcssファイルを設定する必要があります（この設定がcssファイルの有効な場所を指していることを確認してください）。このファイルは、tinymceを初期化するときに他のすべてのcss設定（コアからのファイル）が挿入された後、エディターiframesヘッドに挿入されます-したがって、ファイルに配置したすべての設定は、（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", 
     ...
});
56
Thariama

私はこの方法で私のプロジェクトで使用しました

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

これは、 'content.css'のプロパティ値を変更するよりも優れた方法です。

23
Nishad Up

この行をオプションに追加するだけです

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

または、tinymceで使用されているcssファイルを見つけてfont-size。たとえば、シンプルなテーマを使用している場合、次のような場所に移動します：js/themes/simple/skins/default/content.cssそしてそこに変更font-size。私のために働いています。

2
krzyhub

これをここに残しておきます。tinyMCE4では次のようになります。

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

1つのオプションはcontent_styleで、エディターにcssを追加できます。

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

残念ながら、CSSを設定する順序のため、!importantなしでbodyを設定することはできません。

また、私は人々がフォントサイズを変更することを許可していません-そして、これは恐らく行き詰まります。

これは、表示されている「デフォルト」サイズを変更するのに役立ちましたが、この後フォントサイズを変更できるようにする場合は注意する必要があります。

私が編集しているHTMLは非常にシンプルであるため、私にとってこの迅速で汚いアプローチが必要でした。

0
Simon Weaver

tinymce/themes/advanced/skins/o2k7/content.css cssを追加します。

#tinymce {  font-size: 15px;}
0
IT Vlogs

以下は私のために働いた：

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に変更しました。

0
TopQnA

編集するだけ

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

この行でフォントサイズを変更します：

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