TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，支持市面上所有流行的浏览器，包括IE6+和Fifox1.5+，该编辑器有JavaScript编写而成，功能配置灵活简单，同时该编辑器也是WordPss默认的编辑器，同时TinyMCE可以很方便的在可视化模式与HTML模式进行切换，TinyMCE是一个根据LGPLlicense协议发布的自由软件，你可以把它用于商业应用。
我们可以先看看该款编辑器的外观界面：
使用方法
1、简单调用
TinyMCE的安装非常简单，只需要下载TinyMCE包并载入tinymce.min.js，代码如下所示：
htmlheadscriptsrc="js/tinymce.min.js"/scriptscripttinymce.init({selector:textaa});/script/headbodytextaaYourcontenthe./textaa/body/html
、使用参数
我们也可以自定义编辑按钮：
scriptsrc="tinymce/tinymce.min.js"/scriptscripttinymce.init({selector:"textaa",plugins:["advlistautolinklistslinkimagecharmapprintpviewanchor","searchplacevisualblockscodefullscen","insertdatetimemediatablecontextmenupastemoxiemanager"],toolbar:"insertfileundodo
styleselect
bolditalic
alignleftaligncenteralignrightalignjustify
bullistnumlistoutdentindent
linkimage"});/scriptformmethod="post"action="somepage"textaaname="content"style="width:%"/textaa/form
配置参数
TinyMCE是以名称－值属性方式传递给tinyMCE的init方法来控制着程序的全局行为。所有的键及可能的键值如下表所示。注意，用[]括起来的名称是可选的，不是必须的设置。
1、基本配置
、主题高级配置
调用函数
1、execCommand
user_interface–申明某命令是否会显示用户界面。True/False选项。value–要传递给命令的值。例如，插入链接时，它就是链接的URL。
返回：无
示例：ahf="javascript:tinymce.execCommand(Bold);"[Dobold]/a
、insertLink
语法：tinyMCE.insertLink(hf,target);
描述：此方法在当前选定编辑器实例的鼠标位置插入一个链接，或者用新的数据来更新已有链接。当你创建自己的主题时，此方法应在插入链接的弹出窗口中的OK按钮按下时被调用。
参数：
hf–链接的地址/URL。target–链接的目标。
返回：无
、insertImage
语法：tinyMCE.insertImage(src,alt,border,hspace,vspace,width,height,align,title,onmouseover,onmouseout);
描述：此方法在当前选定编辑器实例的鼠标位置插入图像，或者用新的数据来更新已有图像。当你创建自己的主题时，此方法应在插入图像的弹出窗口中的OK按钮按下时被调用。
参数：
src–图像地址。alt–图片的替代文字。border–图像边框。hspace–图像水平间距。vspace–图像垂直间距。width–图像宽。height–图像高。align–图像对齐方式。title–图像链接的标题。onmouseover–图像在鼠标放上去时的事件处理。onmouseout–图像在鼠标移开时的事件处理。
返回：无
4、triggerNodeChange
语法：tinyMCE.triggerNodeChange();
描述：当编辑器发生外部变化时此方法被调用。然后此方法回调主题的”handleNodeChangeCallback”方法。
参数：None
返回：无
5、getContent
语法：tinyMCE.getContent();
描述：此方法返回当前选定编辑器中的HTML内容。如果没有任何选定编辑器，该方法返回null。
参数：None
返回：当前选定编辑器中的HTML内容或者null。
6、setContent
语法：tinyMCE.setContent(html);
描述：此方法设定当前选定编辑器的HTML内容。
参数：
html–要设定的HTML源代码。
返回：None.
7、getEditorInstance
语法：tinyMCE.getEditorInstance(editor_id);
描述：此方法通过editor_id返回某个编辑器实例。
参数：
editor_id–要获取的编辑器实例。
返回：编辑器实例(TinyMCEControl)。
8、importThemeLanguagePack
语法：tinyMCE.importThemeLanguagePack([theme]);
描述：此方法导入主题中特定的语言包。自定义主题中可以调用此方法。
参数：
[theme]–当前主题名称。此选项可选，默认为全局的”theme”设定。此参数在主题插件中非常有用。
返回：None.
9、importPluginLanguagePack
语法：tinyMCE.importPluginLanguagePack(plugin,valid_languages);
描述：此方法导入插件中特定的语言包。自定义插件中可以调用此方法。
参数：
plugin–当前插件的名称。
valid_languages–以逗号分隔的所支持语言包列表。
返回：None.
10、applyTemplate
语法：tinyMCE.applyTemplate(html);
描述：此方法替换主题中的设置及语言变量。
参数：
html–要替换主题变量的HTML代码。
返回：转换后的HTML代码。
11、openWindow
语法：tinyMCE.openWindow(template,[args]);
描述：此方法通过从指定的template参数中获取width,height及html数据来打开新窗口。数组参数args中包含要替换的变量名。
还有一些自定义的窗口参数：
mce_placevariables–启用/禁用HTML文档中的语言/变量替换。默认启用。mce_windowsize–启用/禁用弹出窗口的自动size特征，默认启用。参数：template–Name/Value数组，以width,height,html和file为键。[args]–包含要替换变量名的Name/Value数组。模板文件中的键值变量被参数列表所替换。
例如：image.php?src={$src}被替换为：image.php?src=image.gif。
返回：None.
1、getWindowArg
语法：tinyMCE.getWindowArg(name,[default_value]);
描述：此方法根据name返回窗口参数，它可以用在主题中的弹出窗口中，以获取对话框中的参数。
参数：
name–要获取的窗口参数的名称。[default_value]–窗口参数丢失时返回的默认值。
返回：窗口参数的值。
1、setWindowArg
语法：tinyMCE.setWindowArg(name,value);
描述：此方法根据name设定窗口参数，例如它在某插件调用其他插件时非常有用。
参数：
name–要设置的窗口参数。value–窗口参数中要设置的值。
返回：窗口参数值。
14、getParam
语法：tinyMCE.getParam(name,[default_value],[strip_whitespace]);
描述：此方法返回TinyMCE的配置参数。
参数：
name–要获取的窗口参数名。[default_value]–窗口参数丢失时返回的默认值。[strip_whitespace]–如果为真，所有返回值中的空白字符将会被除去。默认：false。
如何获取
官方网站
下载地址
在线demo