tiny_mce的使用，如何修改默认字体

tiny_mce是一个很不错的所见即所得的在线编辑器，安装容易，只需要引用几个js文件即可达到效果：csdn中的写文章的简单模式下的编辑器就是使用这个了。查看原代码你就会发现这样几行代码：

 

 <!-- TinyMCE --> <mce:script type="text/javascript" src="/editor/tiny_mce/tiny_mce.js" mce_src="editor/tiny_mce/tiny_mce.js"></mce:script> <mce:script type="text/javascript" src="/SyntaxHighlighter/jquery.highlighter.js" mce_src="SyntaxHighlighter/jquery.highlighter.js"></mce:script> <mce:script type="text/javascript" src="/SyntaxHighlighter/highlighter.js" mce_src="SyntaxHighlighter/highlighter.js"></mce:script> <mce:script type="text/javascript"><!-- //function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) //{ //var linkElm, imageElm, inst; // switch (command) { // case "mceSyntaxHL": // inst = tinyMCE.getInstanceById(editor_id); // alert("insert code after."); // return true; // case "mceImage": // inst = tinyMCE.getInstanceById(editor_id); // imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img"); // if (imageElm) // alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src")); // else // alert("Image dialog has been overriden."); // return true; // } // return false; // Pass to next handler in chain //} tinyMCE.init({ mode : "textareas", //elements : "ctl00$ctl00$cphContent$cphDoc$EntryEditor1$PlainComboEditor", editor_selector : "mceEditor", theme : "advanced", plugins : "syntaxhl,safari,pagebreak,style,advhr,advimage,advlink,iespell,insertdatetime,preview,searchreplace,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,inlinepopups", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,forecolor,backcolor,|,link,unlink,anchor,image,cleanup,|,syntaxhl,preview", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, remove_linebreaks : false, extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]", content_css : "/Editor/tiny_mce/css/word.css", language : "zh" //execcommand_callback : "myCustomExecCommandHandler" }); // --></mce:script> <!-- /TinyMCE -->

code 1.

Note:这里的<mce:script ...></mce:script>是csdn自定义的标签，其实和<script src="" type=""></script>效果一样。

当然这是tiny_mce的（advanced）高级模式，如果你只需要简单的文字编辑的话，如下图效果：

 

 

那么使用这样的（simple）简单模式的话，代码中tinyMCE.init(..);就不需要这么复杂了：只要：

tinyMCE.init({ mode : "textareas", editor_selector : "mceEditor", theme : "advanced" });

code 2.

就够了，实现是不是很简单啊。

csdn选择tiny_mce而放弃了fckeditor是明智的啊。

 

但是你在使用tiny_mce的时候可能会发现（csdn中没有），编辑器里的默认字体很小，有经验的会发现字体是10px的大小，使用起来不太爽，那么如何修改呢：

细心的人会发现在Code 1中有一段这样的代码：content_css : "/Editor/tiny_mce/css/word.css",

使用这个地址http://writeblog.youkuaiyun.com/Editor/tiny_mce/css/word.css把该css文件下载下来，可以发现：

body { background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; scrollbar-3dlight-color: #F0F0EE; scrollbar-arrow-color: #676662; scrollbar-base-color: #F0F0EE; scrollbar-darkshadow-color: #DDDDDD; scrollbar-face-color: #E0E0DD; scrollbar-highlight-color: #F0F0EE; scrollbar-shadow-color: #F0F0EE; scrollbar-track-color: #F5F5F5; } p {margin:0; padding:0;} td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } pre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } .example1 { font-weight: bold; font-size: 12px } .example2 { font-weight: bold; font-size: 12px; color: #FF0000 } .tablerow1 { background-color: #BBBBBB; } thead { background-color: #FFBBBB; } tfoot { background-color: #BBBBFF; } th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

该文件就是定义编辑器内容的默认字体等样式的了。

 

其实呢，该文件是用来覆盖默认样式的，实际定义编辑器样式的文件在：

http://writeblog.youkuaiyun.com/Editor/tiny_mce/themes/advanced/skins/default/content.css

http://writeblog.youkuaiyun.com/Editor/tiny_mce/themes/simple/skins/default/content.css

下，具体就要看你使用的模式了，是advanced还是simple的了。

例如simple下的默认样式：

 

body, td, pre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } body { background-color: #FFFFFF; } .mceVisualAid { border: 1px dashed #BBBBBB; } /* MSIE specific */ * html body { scrollbar-3dlight-color: #F0F0EE; scrollbar-arrow-color: #676662; scrollbar-base-color: #F0F0EE; scrollbar-darkshadow-color: #DDDDDD; scrollbar-face-color: #E0E0DD; scrollbar-highlight-color: #F0F0EE; scrollbar-shadow-color: #F0F0EE; scrollbar-track-color: #F5F5F5; }

发现了吗？在body, td, pre{... font-size:10px}要想一劳永逸，就把这里及高级模式下的content.css文件中body,td,pre的样式的字体大小改成自己心意的字号吧。