Jquery tinymceエディターを使用しています。デフォルトのフォントサイズは10です。デフォルトのフォントサイズを変更したいです。どうやってやるの、
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",
...
});
私はこの方法で私のプロジェクトで使用しました
tinymce.init({
selector:"#txt1",
setup : function(ed)
{
ed.on('init', function()
{
this.execCommand("fontName", false, "tahoma");
this.execCommand("fontSize", false, "12px");
});
}
});
これは、 'content.css'のプロパティ値を変更するよりも優れた方法です。
この行をオプションに追加するだけです
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"}
});
<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>
または、tinymceで使用されているcssファイルを見つけてfont-size
。たとえば、シンプルなテーマを使用している場合、次のような場所に移動します:js/themes/simple/skins/default/content.css
そしてそこに変更font-size
。私のために働いています。
これをここに残しておきます。tinyMCE4では次のようになります。
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
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は非常にシンプルであるため、私にとってこの迅速で汚いアプローチが必要でした。
tinymce/themes/advanced/skins/o2k7/content.css
cssを追加します。
#tinymce { font-size: 15px;}
以下は私のために働いた:
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に変更しました。
編集するだけ
tinymce/themes/advanced/skins/o2k7/content.css
この行でフォントサイズを変更します:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}