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   //设置是否允许水平方向上改变大小
});

原文地址:https://www.cnblogs.com/weekend001/p/1563137.html