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.csdn.net/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.csdn.net/Editor/tiny_mce/themes/advanced/skins/default/content.css

http://writeblog.csdn.net/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的样式的字体大小改成自己心意的字号吧。