|
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。
功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是
PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。
500)this.width=500'>
上面是一个TinyMCE的实例，我将根据自己的使用心得来介绍一下相关的安装配置。
另外根据最新发布的TinyMCE_2.0.3_RC1(2006.2.13)，我做了一个TinyMCE中文精简版,美化了中文的显示和删除了多余的语言包并增加UTF8编码的中文包，具体修改说明见压缩包里的说明文件。
下载：TinyMCE中文精简版
Update(06/06/24):根据官方网站新的语言包做了更新。
1、首先将TinyMCE解压缩，会建立如下的目录结构：
/tinymce//tinymce/docs//tinymce/docs/zh_cn//tinymce/examples//tinymce/examples/zh_cn//tinymce/jscripts//tinymce/jscripts/tiny_mce//tinymce/jscripts/tiny_mce/langs//tinymce/jscripts/tiny_mce/plugins//tinymce/jscripts/tiny_mce/plugins/<plugin folders>/tinymce/jscripts/tiny_mce/themes//tinymce/jscripts/tiny_mce/themes/advanced//tinymce/jscripts/tiny_mce/themes/default//tinymce/jscripts/tiny_mce/themes/simple/
其中docs/目录下是TinyMCE的说明文档，examples/目录下是4个实例页面，而jscripts/目录下则是真正的JS文件。实际使用时候只需要将jscripts/目录上传到服务器上即可。
2、然后在需要使用TinyMCE的页面里加入如下的JS代码：
<!-- 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", theme : "advanced", language :"zh_cn" });</script><!-- /tinyMCE -->
这里假设页面与jscripts/处于同一目录下，否则请修改代码里的路径。
现在页面里所有的textarea元素就会被渲染成TinyMCE实例。
3、初始化配置介绍：
tinyMCE.init({ mode : "exact", elements : "example_textarea", theme : "advanced", language :"zh_cn", plugins : "flash,emotions,paste", theme_advanced_buttons1 : "bold,italic,underline, strikethrough, separator, forecolor,backcolor, fontselect,fontsizeselect", theme_advanced_buttons2_add_before: "cut,copy, pastetext,separator", theme_advanced_buttons2 : "undo,redo,separator,hr, link,unlink,image,flash,separator", theme_advanced_buttons2_add :"code,emotions,charmap", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "bottom", theme_advanced_toolbar_align : "center", relative_urls : false, remove_script_host : false});
mode与elements是搭配使用的，用来指定渲染name在elements中的HTML元素为TinyMCE编辑器（可以是DIV或者Textarea），比如：
mode : "exact",elements : "example_textarea"
也可以单独用 mode : "textareas",这样页面中所有的Textarea元素都会被渲染。theme 可以是advanced或者simple(受功能限制),也可以自定义主题。language 常用选择可以是：en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf8（和语言包名字对应）plugins 用来指定加载相应的插件，以提供特别功能theme_advanced_buttons
后面的数字用来指定工具栏的第几行，前3行可以不写，系统会自动用默认图标填在前3个工具栏，如果你不想显示前3行，可以像例子里面一样这样写：
theme_advanced_buttons3 :
"",_add_before后缀指在默认工具栏前面加图标，_add后缀指在默认工具栏后面加图标，具体每个按钮资料可以查看文档（/doc目录）。theme_advanced_toolbar_location和theme_advanced_toolbar_align很简单，一看就明白。relative_urls : false,remove_script_host :
false一般也配对使用，因为TinyMce会自动把本地链接改成相对链接的形式，比如会把绝对路径http:
//www.leexuan.com/2006/03/abc.html改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改
写了。
这个简单配置比较适合一般网站的应用，关于TinyMCE更强大的功能，可以研究下DOC文档。以上是本人的一些心得体会，如果有错误欢迎指正！
Update(06/06/24): 翻译了TinyMCE的用户手册(/doc目录)，关于配置的问题可以参考TinyMCE中文手册。 |
