TinyMCE - javascript 所见即所得可视化编辑器

TinyMCE - javascript 所见即所得可视化编辑器。
主页：http://tinymce.moxiecode.com/
API文档：http://tinymce.moxiecode.com/js/tinymce/docs/api/index.html
文档：http://wiki.moxiecode.com/index.php/TinyMCE:Index
中文手册：http://www.inpeck.com/TinyMceManual/
压缩版本(生产环境用)：http://wiki.moxiecode.com/index.php/TinyMCE:Compressor
1.特性：
1).Easy to integrate
2).Customizable
3).Browserfriendly
4).Lightweight
5).AJAX Compatible
6).International
7).Open Source

2.压缩版(GZip)安装(生产环境用)：
1).下载TinyMCE Compressor .NET
http://nchc.dl.sourceforge.net/project/tinymce/TinyMCE%20Compressor%20.NET/2.0.2/tinymce_compressor_net_2_0_2.zip
2).复制tiny_mce_gzip.js 和 tiny_mce_gzip.aspx 到tiny_mce(包含tiny_mce.js的)目录.
3).复制ICSharpCode.SharpZipLib.dll 到web 应用程序的bin 目录。
4).移除当前脚本标签<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
5).添加新的 GZip 脚本标签 <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce_gzip.js"></script>.
6).添加新的GZip版初始化调用将会告诉压缩器在输出中包含哪些文件。

初始化(initialization)例子：
The example below will pack both themes and all plugins into one file/steam. Remove the things you don't need or add you custom plugins to the settings below. Remember that the tinyMCE_GZ.init call must be placed in it's own script tag.
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
tinyMCE_GZ.init({
 plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
 themes : 'simple,advanced',
 languages : 'en',
 disk_cache : true,
 debug : false
});
</script>
<script type="text/javascript">
tinyMCE.init({
   .. your normal init ..
});
</script>
注意：
1).To remove a plugin, remember to remove it both from tinyMCE_GZ.init and TinyMCE.init.
2).To add a plugin, remember to add it both to the tinyMCE_GZ.init and the tinyMCE.init calls.

3.初始化配置参数说明：
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
所有的配置参数都放在tinyMCE.init() JavaScript 调用中。
mode : "textareas"
  textareas : 当页面加载完后，将所有textareas元素转换成为编辑器。
  specific_textareas : 略
  exact : 将确定的元素转换成为编辑器。由elements 选项指定，可以为divs 或者 textareas 元素。
  none : 不转换任何元素。稍后，你的页面可以调用tinyMCE.execCommand("mceAddControl", true, "id"); 函数将元素转换为编辑器。
 例子：
tinyMCE.init({
 ...
 mode : "exact",
 elements : "elm1,elm2"
});
<textarea id="elm1" ...

参考：http://www.iwms.net/n2065c17.aspx
关于编辑器中中文字体太小的问题：
修改：jscripts\tiny_mce\themes\advanced\skins\default\content.css 文件第一行：
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; margin:8px;}
font-size: 属性值即可，如果用的是另外一种主题，修改相应文件就可以了。

4.中文语言包
从 tinymce 官方网站下载的语言包，
安装后，却是繁体中文版本。

实在看着不爽，又重新转化了一下。

有需要的可以点击 tinymce Simplified Chinese pack 下载。

如果tinymce的中文字体大小显示不正常，可以搜索tinymce目录下的所有css文件中的 font-size:10px; 和 font-size:11px; 替换为 font-size:12px; 这样中文字体 宋体就能显示正常。

 在这里可以下载到TinyMCE3的中文包　http://services.moxiecode.com/i18n　下载时注意，是先勾选前面的小方框，再按下方的Download按钮，而不是那个XML。
可 惜是繁体的，我制作了一个简体中文包，因为TinyMCE要求语言代号必须遵守ISO 639-1的国际编码标准，中文的代号只能是zh，而且不分简体和 繁体。为了不覆盖原有的繁体包，我也耍了一下小滑头，将语言包代号写为ch，传了上去。嘿嘿，ch代表的语言是“Chamorro/夏莫洛语”，估计夏莫 洛人暂时还没有用TinyMCE吧，大家要简体中文包就下那个页面中的Chamorro语吧，哈哈。
安装时，将下载的压缩包中的文件解压到javascript/tiny_mce目录中，提示有同名文件选覆盖即可。
使用时，在页面的tinyMCE初始化语句 tinyMCE.init 中加上一行 language : ”ch”,　即可。

完全按钮配置：

tinyMCE.init({
     //  基本选项： 
    mode :  " textareas " ,
    theme :  " advanced " ,
    language :  " zh " ,   // 中文语言包
    plugins :  " safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager " , 

     //  主题选项 (Theme options)
   theme_advanced_buttons1 :  " save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect " ,    // 工具栏第二行的按钮,| 为按钮分隔符
   theme_advanced_buttons2 :  " cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor " ,  // 工具栏第三行的按钮
   theme_advanced_buttons3 :  " tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen " ,     // 工具栏第三行的按钮
   theme_advanced_buttons4 :  " insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage " ,   // 工具栏第四行的按钮
   theme_advanced_toolbar_location :  " top " ,    // 工具按钮栏的位置，
   theme_advanced_toolbar_align :  " left " ,    // 工具按钮栏水平对齐方式
   theme_advanced_statusbar_location :  " bottom " ,    // 编辑器状态栏位置
   theme_advanced_resizing :  true,    // 设置是否可以改变编辑器大小
   theme_advanced_fonts: "宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Arial=arial,helvetica,sans-serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", //设置字体
  theme_advanced_resize_horizontal: false   //设置是否允许水平方向上改变大小
});