在线编辑器TinyMCE使用方法和定制为中文版的步骤

在线编辑器TinyMCE使用方法和定制为中文版的步骤


1. 下载地址
http://tinymce.moxiecode.com/download.php
下载“Main package”
解压到：/js/目录下。其文件将在：/js/jscripts/tiny_mce/下。


2. 用html测试
建立一个htm文件：/js/test.htm，内容如下：
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({mode : "textareas"});
</script>
<!-- /tinyMCE -->
<form action="" method="post">
<textarea name="content"><a href="ooo.com">woofdjs</a></textarea>
<input type="submit" value="确定"/>
</form>


3. 用php测试在线编辑。
获取内容：$_POST['content']。


4. 用cakephp测试，在controller中获取内容：
$content = $this->params['form']['content'];


5. 安装中文版。
在http://tinymce.moxiecode.com/download_i18n.php
打钩选择语言：Chinese。
点击“Download”下载中文语言包(tinymce_lang_pack.zip)。
解压后将其中的文件对应放到/js/jscripts/tiny_mce/下面的对应目录里面。
其实就是一些zh.js文件。


修改javascript代码：
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
language : "zh"
});
</script>


6. 配置tinymce，适合自己的要求。
修改调用tinyMCE.init的参数：
tinyMCE.init({
mode : "textareas",
theme : "simple",
language : "zh",
//定义工具栏的位置
theme_simple_toolbar_location : "top",
//定义工具栏工具的对其方式
theme_simple_toolbar_align : "left",
//定义输入框下方是否显示状态栏，默认不显示
theme_simple_statusbar_location : "bottom",
//定义是否可以改变输入窗口大小
theme_simple_resizing : true
});


7. 对于中文来说，tinymce的默认字体太小，
解决方法是将主题的皮肤的css修改一下。
例如，将
/js/jscripts/tiny_mce/themes/simple/skin/default/content.css中的字体设置
修改一下：
body, td, pre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}


参考：
TinyMCE使用详解 http://www.iwms.net/n2065c17.aspx
http://www.iteye.com/topic/120648