tinyMCE 使用汇总

心已赠人 2022-06-09 02:19 557阅读 0赞

tinymce的官网:

[http://www.tinymce.com/][http_www.tinymce.com]

1.tinymce的使用详解

[http://www.iwms.net/n2065c17.aspx][http_www.iwms.net_n2065c17.aspx]

初始化  
  
在初始化TinyMCE的时候，需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置，所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块，我们将在后面详细讲述。

<table> 
 <tbody> 
 <tr> 
 <td>&lt;!-- tinyMCE --&gt; &lt;script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript"&gt; tinyMCE.init({ mode : "textareas" }); &lt;/script&gt; &lt;!-- /tinyMCE --&gt;</td> 
 </tr> 
 </tbody> 
</table>

注意以上红色部分是tiny\_mce.js脚本文件的位置，该文件中包含了编辑器所需要的全部代码，主题及语言包将在初始化时被加载。  
  
蓝色部分是初始化调用，它生成TinyMCE的全局实例，其中的设置及名称－值属性将在以后描述。  
  
  
  
设置  
  
  
  
以名称－值属性方式传递给tinyMCE的init方法的设置控制着程序的全局行为。所有的键及可能的键值如下表所示。注意，用\[\]括起来的名称是可选的，不是必须的设置。

<table style="table-layout: fixed; word-wrap: break-word; background-color: rgb(17, 17, 17);"> 
 <tbody> 
 <tr> 
 <td colspan="2">常规设置</td> 
 </tr> 
 <tr> 
 <td>mode</td> 
 <td>Mode可以是以下几个值之一： textareas - 页面加载时把所有TEXTAREA组件转换成编辑器. specific_textareas - 将所有"mce_editable"属性值为true的TEXTAREA转换成编辑器. exact - 只转换在"elements"设置中指定的确切组件.</td> 
 </tr> 
 <tr> 
 <td>[theme]</td> 
 <td>指定要使用的主题名称，主题将被放在TinyMCE的themes目录下，默认为default。TinyMCE自带三个内置的主题，它们是simple，default和advanced。 如果你想创建自己的主题，请仔细阅读文档的 <a href="http://milo.core-systems.de/~stepan/tiny/tinymce/docs/zh_cn/themes.htm" rel="nofollow">主题</a> 部分。</td> 
 </tr> 
 <tr> 
 <td>[plugins]</td> 
 <td>此选项是一系列以逗号分隔的主题插件列表（例如，可以只用来扩展图像对话框）。这些插件覆盖了主题模板中定义的功能。插件逻辑应该包含在一个叫"editor_plugin.js"的文件中，它是插件目录中唯一被包含进来的文件。 例如："my_image_dialog,my_link_dialog". 如果你想创建自己的插件，请仔细阅读文档的 <a href="http://milo.core-systems.de/~stepan/tiny/tinymce/docs/zh_cn/themes.htm" rel="nofollow">主题</a> 部分。</td> 
 </tr> 
 <tr> 
 <td>[language]</td> 
 <td>TinyMCE中使用的语言包，这应该是像se,uk,us等诸如此类的FN代码，它被用来从"langs"目录中获取语言包，该设置的默认值为"uk". 中文用户建议您使用"zh-CN"</td> 
 </tr> 
 <tr> 
 <td>[elements]</td> 
 <td>以逗号分隔的用来转换成编辑器的组件列表，该选项仅在"mode"选项被设置成"exact"时使用。该列表中的元素可以是任何有id或name属性的HTML组件。</td> 
 </tr> 
 <tr> 
 <td>[ask]</td> 
 <td>当"mode"被设置成"textareas"或"specific_textareas"的时候，该选项被应用，询问用户输入框是否将被转换成编辑器。 如果你想使用这个选项，将它设置为true.</td> 
 </tr> 
 <tr> 
 <td>[textarea_trigger]</td> 
 <td>textarea（文本域）触发器的属性，默认值为"mce_editable"。 该选项仅在"mode"被设置为"specific_textareas"时使用。</td> 
 </tr> 
 <tr> 
 <td>[valid_elements]</td> 
 <td>以逗号分隔开的组件转换部分的列表。 例如： a[href|target=_blank],strong/b,div[align],br. 以上例子告诉TinyMCE移除所有除了"a, strong, div"和"br"的组件，将元素b转换成strong，默认target设为"_blank"并保持href、target、align属性。在匹配组件及属性的名称时可以使用像*,+,?这样的通配符。 字符： 
 <table> 
 <tbody> 
 <tr> 
 <td>,</td> 
 <td>各组件定义之间的分隔符。</td> 
 </tr> 
 <tr> 
 <td>/</td> 
 <td>两个同义组件之间的分隔符。第一个组件是会被用来输出的那个（即第二个组件被第一个替换）。</td> 
 </tr> 
 <tr> 
 <td>|</td> 
 <td>各属性定义之间的分隔符。</td> 
 </tr> 
 <tr> 
 <td>[</td> 
 <td>定义某组件的属性列表的开始符号。</td> 
 </tr> 
 <tr> 
 <td>]</td> 
 <td>定义某组件的属性列表的结束符号。</td> 
 </tr> 
 <tr> 
 <td>=</td> 
 <td>将属性的默认值设为特定值。例如："target=_blank"</td> 
 </tr> 
 <tr> 
 <td>:</td> 
 <td>将属性的值强行设为特定值。例如："border:0"</td> 
 </tr> 
 <tr> 
 <td>&lt;</td> 
 <td>校验某个属性的值。例如："target&lt;_blank?_self"</td> 
 </tr> 
 <tr> 
 <td>?</td> 
 <td>属性校验值之间的分隔符，见上。</td> 
 </tr> 
 </tbody> 
 </table> 特殊变量： {$uid} - 产生一个唯一ID号。 例如："p[id:{$uid}]". 此选项的默认值是以下模式： "a[href|target],strong/b[class],em/i[class],strike[class],u[class],p[class|align],ol,ul,li,br, img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style], table[border=0|cellspacing|cellpadding|width|height|class|align],tr[rowspan], td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align], address[class|align],h1[class|align],h2[class|align],h3[class|align], h4[class|align],h5[class|align],h6[class|align],hr". 要包含所有组件及属性，请使用 *[*] ，这在使用invalid_elements选项时特别有用。</td> 
 </tr> 
 <tr> 
 <td>[extended_valid_elements]</td> 
 <td>向"valid_elements"列表末尾添加可用组件。此选项在你仅仅想往默认列表中增添部分组件时相当有用。 格式与"valid_elements"一致。</td> 
 </tr> 
 <tr> 
 <td>[invalid_elements]</td> 
 <td>输出时需要排除在外的组件名称列表，以逗号分隔开。</td> 
 </tr> 
 <tr> 
 <td>[trim_span_elements]</td> 
 <td>True/False选项。如果设置为true，不需要的组件将被移除。默认值即为true。</td> 
 </tr> 
 <tr> 
 <td>[verify_css_classes]</td> 
 <td>True/False选项。如果设置为true，将会校验CSS的class属性。默认值即为true。</td> 
 </tr> 
 <tr> 
 <td>[verify_html]</td> 
 <td>True/False选项。代表着HTML内容是否需要校验。默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[urlconvertor_callback]</td> 
 <td>当清理进程处理URL的时候调用的函数名。此函数必须遵从以下的格式：func(url, node, on_save) ，返回转换后的URL。此设置专为集成目的而设。参数url代表要转换的地址，node代表包含URL的那个节点，on_save是一个布尔值（在用户提交表单时为真）。</td> 
 </tr> 
 <tr> 
 <td>[preformatted]</td> 
 <td>True/False选项。如果设置为true，编辑器将把制表符（TAB）转换成缩进，除此外保持其他whitespace（空白字符、换行等）字符，就如同HTML标签中的PRE的效果。默认值为false。</td> 
 </tr> 
 <tr> 
 <td>[insertlink_callback]</td> 
 <td>当执行"insertlink"命令时调用的函数名。此函数获取选定链接的地址和目标，返回一个以"href", "target"和 "title"为collection名称的数组。当使用新窗口时，为了兼容Mozilla，会在window.opener（弹出窗口的母窗口，译者注）上调用tinyMCE.insertLink。</td> 
 </tr> 
 <tr> 
 <td>[insertimage_callback]</td> 
 <td>当执行"insertimage"命令时调用的函数名。此函数获取选定图像的url并返回一个以src和alt为collection名称的数组。当使用新窗口时，为了兼容Mozilla，会在window.opener上调用tinyMCE.insertImage。 函数格式：insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action).</td> 
 </tr> 
 <tr> 
 <td>[setupcontent_callback]</td> 
 <td>当编辑器初始化时调用的函数名。函数格式：setupContentCallback(editor_id, node)，其中editor_id是编辑器的id，node是编辑器所在的body组件节点。</td> 
 </tr> 
 <tr> 
 <td>[save_callback]</td> 
 <td>当执行triggerSave（触发保存）命令被调用时调用的函数名。函数格式：save(id, content, node)，如果有特定返回值，其值将会被加到HTML表单组件上。所以可以通过此函数来自定义用户转换逻辑。</td> 
 </tr> 
 <tr> 
 <td>[docs_language]</td> 
 <td>TinyMCE文档中使用的语言，这应该是像se,uk,us等诸如此类的FN代码，它被用来从"&lt;theme&gt;/docs/&lt;lang&gt;"目录中获取文档。 该选项的默认值跟language选项一致。</td> 
 </tr> 
 <tr> 
 <td>[width]</td> 
 <td>编辑器的宽度，它默认的宽度是原先被替换的组件宽度。</td> 
 </tr> 
 <tr> 
 <td>[height]</td> 
 <td>编辑器的高度，它默认的高度是原先被替换的组件高度。</td> 
 </tr> 
 <tr> 
 <td>[content_css]</td> 
 <td>编辑窗口中要使用的CSS文件，其路径应该跟页面相关。</td> 
 </tr> 
 <tr> 
 <td>[popups_css]</td> 
 <td>像插入链接和图片时的弹出窗口中使用的CSS文件，其路径应该跟页面相关。</td> 
 </tr> 
 <tr> 
 <td>[editor_css]</td> 
 <td>编辑器使用的CSS文件，其路径应该跟页面相关。</td> 
 </tr> 
 <tr> 
 <td>[encoding]</td> 
 <td>编辑器的输出编码，此选项目前只能为"html"或者空。如果设置为"html"，编辑器的输出将经过HTML编码处理。 例如：&lt;将会变成&amp;lt;，依此类推。默认值是空。</td> 
 </tr> 
 <tr> 
 <td>[debug]</td> 
 <td>True/False选项。如果设置成true，像css文件路径等调试信息将会被显示。</td> 
 </tr> 
 <tr> 
 <td>[visual]</td> 
 <td>True/False选项。如果设置成true，当边框设置成0的时候，为达到更好的视觉效果在编辑器中表格会有虚线出现。 默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[visual_table_style]</td> 
 <td>用户可自定义表格的样式，默认值为："border: 1px dashed #BBBBBB"。</td> 
 </tr> 
 <tr> 
 <td>[add_form_submit_trigger]</td> 
 <td>True/False选项。如果设置成true，将强制进行所有表单的"onsubmit"事件处理并引发保存。此选项默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[add_unload_trigger]</td> 
 <td>True/False选项。如果设置成true，在"onunload"事件发生时，当前窗口会引发一个triggerSave调用。此triggerSave调用不会做任何清理工作，因为它是用来处理 前进/后退 按钮的。此选项默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[force_br_newlines]</td> 
 <td>True/False选项。此选项强制编辑器将段落符号(P)替换成换行符(BR)。此选项默认值为false。（实验阶段）</td> 
 </tr> 
 <tr> 
 <td>[force_p_newlines]</td> 
 <td>True/False选项。如果打开此选项，在按下回车键（Enter）时Mozilla/Firefox浏览器会生成段落符号(P)，在按下Shift+Enter时会生成换行符(BR)。此选项默认为true。</td> 
 </tr> 
 <tr> 
 <td>[relative_urls]</td> 
 <td>True/False选项。如果设置成true，绝对路径将被转换成相对路径。默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[remove_script_host]</td> 
 <td>True/False选项。在设置成true的情况下，如果URL中的主机名、端口号跟编辑器当前所在一致，它们会被移除。 例如：编辑器所在站点为 http://www.somesite.com ，那么以下链接 http://www.somesite.com/somedir/somepage.html 将会被转换成 /somedir/somepage.html 。 如果relative_urls被设置成false，此选项默认为true。</td> 
 </tr> 
 <tr> 
 <td>[focus_alert]</td> 
 <td>True/False选项。如果设置成true，编辑器在失去焦点的时候就会出现一个烦人的警告框。默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[document_base_url]</td> 
 <td>在将绝对路径转换成相对路径的时候会用到此文档的URL。这个选项指定了编辑器当前的默认文档。 注意如果此选项指定到一个域名，请添加协议前缀，并以斜杠结尾。例如：http://www.somehost.com/mydir/</td> 
 </tr> 
 <tr> 
 <td>[custom_undo_redo]</td> 
 <td>True/False选项。此选项可以使 撤消/重做 功能更加完善。默认值为true。</td> 
 </tr> 
 <tr> 
 <td>[custom_undo_redo_levels]</td> 
 <td>自定义最多可撤消操作的次数，默认是无限制。</td> 
 </tr> 
 <tr> 
 <td>[custom_undo_redo_keyboard_shortcuts]</td> 
 <td>如果使用，编辑器可以使用Ctrl+Z和Ctrl+Y快捷键来实现撤消和重做。默认允许。</td> 
 </tr> 
 <tr> 
 <td>[fix_content_duplication]</td> 
 <td>True/False选项。此选项修正了MSIE中一个内容重复的bug。默认启用，但是为了兼容性也可以禁用(false)。</td> 
 </tr> 
 <tr> 
 <td>[directionality]</td> 
 <td>此选项可以设置像阿拉伯语等语言的文字方向。可能的值为：ltr, rtl。默认值: ltr（从左到右）。</td> 
 </tr> 
 <tr> 
 <td>[auto_cleanup_word]</td> 
 <td>如果启用，从MS office/Word粘贴的HTML将会自动被清理。此选项默认值为false。 注意：此操作当前仅支持MSIE。</td> 
 </tr> 
 <tr> 
 <td>[cleanup_on_startup]</td> 
 <td>如果启用，在编辑器初始化时文本域及组件将会被清理。默认值为false。</td> 
 </tr> 
 <tr> 
 <td>[inline_styles]</td> 
 <td>如果启用，像width,height,vspace,hspace和align等属性将会被风格属性替代。默认值为false。 在使用此选项时记得要把风格属性应用在正确的组件上。</td> 
 </tr> 
 <tr> 
 <td>[convert_newlines_to_brs]</td> 
 <td>如果启用，所有的\n(新行)将会在编辑器启动时被转换成&lt;br /&gt;组件。此选项默认值为false。</td> 
 </tr> 
 <tr> 
 <td>[auto_reset_designmode]</td> 
 <td>因为在调用style.display的none/block方法来显示/隐藏某个TinyMCE编辑器的时候有bug，设计模式需要被重置。此选项一旦启用，当编辑器聚焦时，将自动重置。默认值为false。</td> 
 </tr> 
 <tr> 
 <td>[entities]</td> 
 <td>一张以字符代码来查找名称的表，该表中元素是以逗号分隔开的实体列表。该列表以奇数项、偶数项区分，其中奇数项是被用来转换的字符代码，偶数项是代表那个字符代码的实体名称。例如："8205,zwj,8206,lrm,8207,rlm,173,shy"。</td> 
 </tr> 
 <tr> 
 <td>[cleanup_callback]</td> 
 <td>自定义清理函数。此选项能让用户在默认的清理基础上有所扩展。此函数调用跟默认的调用是分开的，它并不替换默认的清理函数，而仅仅是扩展。点击 <a href="http://milo.core-systems.de/~stepan/tiny/tinymce/docs/zh_cn/themes.htm#cleanup" rel="nofollow">插件清理</a> 查看更多细节。</td> 
 </tr> 
 <tr> 
 <td colspan="2">主题的高级特定设置</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_toolbar_location]</td> 
 <td>此选项用来改变工具栏的默认位置。可能的值为："top"和"bottom"。默认值是"bottom"。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_toolbar_align]</td> 
 <td>此选项用来设置工具栏的对齐方式是left, center还是right。默认值是center。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_styles]</td> 
 <td>此选项可以用来增加风格下拉框中的CSS类和名称。格式如下："&lt;title&gt;=&lt;class&gt;;.."。 如果没有指定此选项，主内容部分的CSS类将会被自动导入。 例如："Header 1=header1;Header 2=header2;Header 3=header3"</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_buttons1]</td> 
 <td>工具栏上第一行要包含的按钮列表，以逗号分隔开。例如："bold,italic,underline"。 允许的按钮名称如下： bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator, col_before, col_after, delete_col, hr, removeformat, sub, sup, formatselect, fontselect, fontsizeselect, forecolor,charmap,visualaid,spacer,cut,copy,paste</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_buttons2]</td> 
 <td>同上，差别在于指定的是工具栏第二行。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_buttons3]</td> 
 <td>同上，差别在于指定的是工具栏第三行。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_buttons&lt;N&gt;_add]</td> 
 <td>向工具栏上特定的第N行中增加额外的控制/按钮。例如：theme_advaned_buttons3_add : "iespell".</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_buttons&lt;N&gt;_add_before]</td> 
 <td>向工具栏上特定的第N行的默认按钮前面增加额外的控制/按钮。例如：theme_advaned_buttons3_add_before : "iespell"。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_disable]</td> 
 <td>要禁用的按钮/组件的列表，以逗号分隔。例如："formatselect".</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_source_editor_width]</td> 
 <td>源文件编辑器窗口的宽度。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_source_editor_height]</td> 
 <td>源文件编辑器窗口的高度。</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_path_location]</td> 
 <td>组件路径列表的位置，可能的值为："top"或"bottom"。默认值为："none"</td> 
 </tr> 
 <tr> 
 <td>[theme_advanced_blockformats]</td> 
 <td>formatselect列表要屏蔽的格式列表，以逗号分隔开。默认值：p,address,pre,h1,h2,h3,h4,h5,h6。</td> 
 </tr> 
 </tbody> 
</table>

以下是一个较为复杂的初始化例子：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;!-- tinyMCE --&gt; &lt;script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript"&gt; tinyMCE.init({ mode : "exact", theme : "mytheme", language : "se", elements : "elm1,elm2" }); &lt;/script&gt; &lt;!-- /tinyMCE --&gt;</td> 
 </tr> 
 </tbody> 
</table>

**函数** **（供高级使用）**  
  
  
TinyMCE有一个全局实例，它能提供一些可从页面调用的公用函数。

--------------------

**语法：** tinyMCE.triggerSave(\[skip\_cleanup\]);  
  
**描述：**进行清除操作，并将编辑器内容移回到表单域中。tinyMCE通过向表单提交方法中增加触发器来自动调用此函数。  
  
**参数：**  
  
\[skip\_cleanup\] - 禁用保存触发器的清除功能，默认为false。(可选)  
  
  
**返回：** 无

--------------------

**语法：** tinyMCE.updateContent(form\_element\_name);  
  
**描述：**将表单组件的内容转移到编辑器中，此操作的功能跟triggerSave()正好相反。当你想动态改变编辑器内容时可以使用此方法。  
  
**参数：**  
  
form\_element\_name - 要获取内容的组件所在表单的名称。  
  
**返回：** 无

--------------------

**语法：** tinyMCE.execInstanceCommand(editor\_id, command, \[user\_interface\], \[value\]);  
  
**描述：**此方法通过editor\_id参数找到某个编辑器实例，在此编辑器上执行一个命令。  
  
**参数：**  
  
editor\_id - 编辑器实例的ID或者被替换后的组件id/名称。  
  
command - 要执行的命令。查看execCommand函数以获取更多细节。  
  
\[user\_interface\] - 是否使用用户界面。  
  
\[value\] - 执行命令时要传递的参数，例如：一个URL。  
  
**返回：** 无

--------------------

**语法：** tinyMCE.execCommand(command, \[user\_interface\], \[value\]);  
  
**描述：**此方法在选定编辑器中通过名称执行特定命令。  
  
**参数：**  
  
command - 要执行的命令，例如："Bold" or "Italic"。[你可以通过此连接来查看Mozilla Midas spec][Mozilla Midas spec]。但是tinyMCE也有自身一些特殊的命令如下表所示：

<table> 
 <tbody> 
 <tr> 
 <td>mceLink</td> 
 <td>打开插入链接对话框并插入链接。</td> 
 </tr> 
 <tr> 
 <td>mceImage</td> 
 <td>打开插入图像对话框并插入图像。</td> 
 </tr> 
 <tr> 
 <td>mceCleanup</td> 
 <td>从HTML代码中移除不需要的组件和属性。</td> 
 </tr> 
 <tr> 
 <td>mceHelp</td> 
 <td>打开文档页面。</td> 
 </tr> 
 <tr> 
 <td>mceInsertTable</td> 
 <td>在鼠标位置插入表格，默认尺寸为：2×2。如果execCommand函数中有指定value参数，它的格式必须为name/value形式的数组，其中 name有以下选项：cols, rows, border, cellspacing, cellpadding。border（边框）的默认大小为：0。</td> 
 </tr> 
 <tr> 
 <td>mceTableInsertRowBefore</td> 
 <td>在当前鼠标所在位置之前插入一行。</td> 
 </tr> 
 <tr> 
 <td>mceTableInsertRowAfter</td> 
 <td>在当前鼠标所在位置之后插入一行。</td> 
 </tr> 
 <tr> 
 <td>mceTableDeleteRow</td> 
 <td>将当前鼠标所在行删除。</td> 
 </tr> 
 <tr> 
 <td>mceTableInsertColBefore</td> 
 <td>在当前鼠标所在位置之前插入一列。</td> 
 </tr> 
 <tr> 
 <td>mceTableInsertColAfter</td> 
 <td>在当前鼠标所在位置之后插入一列。</td> 
 </tr> 
 <tr> 
 <td>mceTableDeleteCol</td> 
 <td>将当前鼠标所在列删除。</td> 
 </tr> 
 <tr> 
 <td>mceAddControl</td> 
 <td>向编辑器添加组件控制，此编辑器的id/name由value指定。</td> 
 </tr> 
 <tr> 
 <td>mceRemoveControl</td> 
 <td>通过editor_id名称来移除特定控制。value是要移除的editor_id（编辑器ID），编辑器ID格式如下："mce_editor_&lt;index&gt;"。 也可以使用DOM组件的ID和表单名。</td> 
 </tr> 
 <tr> 
 <td>mceFocus</td> 
 <td>使以value的值为ID的编辑器获得焦点。编辑器ID格式如下："mce_editor_&lt;index&gt;"。也可以使用DOM组件的ID和表单名。</td> 
 </tr> 
 <tr> 
 <td>mceSetCSSClass</td> 
 <td>设置CSS类属性，或者在选择框中创建新的span。value的值是要给选定组件指派的css类名或者要新创建的span组件名称。</td> 
 </tr> 
 <tr> 
 <td>mceInsertContent</td> 
 <td>在当前鼠标所在位置插入value的内容。</td> 
 </tr> 
 <tr> 
 <td>mceReplaceContent</td> 
 <td>将当前选定部分替换为value中的HTML代码。{$selection}变量由当前选定部分的文字内容替换。</td> 
 </tr> 
 <tr> 
 <td>mceSetAttribute</td> 
 <td>为当前选定组件设置属性。此命令的value应该是name/value数组，其参数如下： name - 要设置的属性名。 value - 要设置的属性值。 [targets] - 要增加属性的目标组件，默认为：p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address。 使用示例： tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});</td> 
 </tr> 
 <tr> 
 <td>mceToggleVisualAid</td> 
 <td>是否开启视觉帮助模式</td> 
 </tr> 
 <tr> 
 <td>mceAnchor</td> 
 <td>插入名称锚点。value是锚点的名称。</td> 
 </tr> 
 <tr> 
 <td>mceResetDesignMode</td> 
 <td>重置所有编辑器实例的设计模式状态。在Firefox中，当编辑器被放在制表符中或者用style.display="none/block"来控制隐显的时候，此命令非常有用。在编辑器重新显示时调用此命令。</td> 
 </tr> 
 <tr> 
 <td>mceSelectNode</td> 
 <td>选定value指定的节点/组件。同时此命令会使编辑器滚动到此组件所在位置。</td> 
 </tr> 
 <tr> 
 <td>mceSelectNodeDepth</td> 
 <td>从当前节点以深度关系选择指定的节点/组件。所以0值会选定当前聚焦的节点。同时此命令会使编辑器滚动到此组件所在位置。</td> 
 </tr> 
 </tbody> 
</table>

user\_interface - 申明某命令是否会显示用户界面。True/False选项。  
  
value - 要传递给命令的值。例如，插入链接时，它就是链接的URL。  
  
  
  
**返回：** 无  
  
  
  
**示例：**

<table> 
 <tbody> 
 <tr> 
 <td>&lt;a href="javascript :tinymce.execCommand('Bold');"&gt;[Do bold]&lt;/a&gt;</td> 
 </tr> 
 </tbody> 
</table>

--------------------

**语法：** tinyMCE.insertLink(href, target);  
  
**描述：**此方法在当前选定编辑器实例的鼠标位置插入一个链接，或者用新的数据来更新已有链接。当你创建自己的主题时，此方法应在插入链接的弹出窗口中的OK按钮按下时被调用。  
  
**参数：**  
  
href - 链接的地址/URL。  
  
target - 链接的目标。  
  
**返回：** 无

--------------------

**语法：** 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 - 图像在鼠标移开时的事件处理。  
  
**返回：** 无

--------------------

**语法：** tinyMCE.triggerNodeChange();  
  
**描述：**当编辑器发生外部变化时此方法被调用。然后此方法回调主题的"handleNodeChangeCallback"方法。  
  
**参数：** None  
  
**返回：** 无

--------------------

**语法：** tinyMCE.getContent();  
  
**描述：**此方法返回当前选定编辑器中的HTML内容。如果没有任何选定编辑器，该方法返回null。  
  
**参数：** None  
  
**返回：**当前选定编辑器中的HTML内容或者null。

--------------------

**语法：** tinyMCE.setContent(html);  
  
**描述：**此方法设定当前选定编辑器的HTML内容。  
  
**参数：**  
  
html - 要设定的HTML源代码。  
  
**返回：** None.

--------------------

**语法：** tinyMCE.getEditorInstance(editor\_id);  
  
**描述：**此方法通过editor\_id返回某个编辑器实例。  
  
  
  
**参数：**  
  
editor\_id - 要获取的编辑器实例。  
  
**返回：**编辑器实例(TinyMCEControl)。

--------------------

**语法：** tinyMCE.importThemeLanguagePack(\[theme\]);  
  
**描述：**此方法导入主题中特定的语言包。自定义主题中可以调用此方法。  
  
**参数：**  
  
\[theme\] - 当前主题名称。此选项可选，默认为全局的"theme"设定。此参数在主题插件中非常有用。  
  
**返回：** None.

--------------------

**语法：** tinyMCE.importPluginLanguagePack(plugin, valid\_languages);  
  
**描述：**此方法导入插件中特定的语言包。自定义插件中可以调用此方法。  
  
**参数：**  
  
plugin - 当前插件的名称。  
  
valid\_languages - 以逗号分隔的所支持语言包列表。  
  
**返回：** None.

--------------------

**语法：** tinyMCE.applyTemplate(html);  
  
**描述：**此方法替换主题中的设置及语言变量。  
  
**参数：**  
  
html - 要替换主题变量的HTML代码。  
  
**返回：** 转换后的HTML代码。

--------------------

**语法：** tinyMCE.openWindow(template, \[args\]);  
  
**描述：**此方法通过从指定的template参数中获取width, height及html数据来打开新窗口。数组参数args中包含要替换的变量名。  
  
还有一些自定义的窗口参数：  
  
mce\_replacevariables - 启用/禁用HTML文档中的语言/变量替换。默认启用。  
  
mce\_windowresize - 启用/禁用弹出窗口的自动resize特征，默认启用。  
  
**参数：**  
  
template - Name/Value数组，以width, height, html和file为键。  
  
\[args\] - 包含要替换变量名的Name/Value数组。模板文件中的键值变量被参数列表所替换。  
  
例如：image.php?src=\{$src\}被替换为：image.php?src=image.gif。  
  
**返回：** None.

--------------------

**语法：** tinyMCE.getWindowArg(name, \[default\_value\]);  
  
**描述：**此方法根据name返回窗口参数，它可以用在主题中的弹出窗口中，以获取对话框中的参数。  
  
**参数：**  
  
name - 要获取的窗口参数的名称。  
  
\[default\_value\] - 窗口参数丢失时返回的默认值。  
  
**返回：** 窗口参数的值。

--------------------

**语法：** tinyMCE.setWindowArg(name, value);  
  
**描述：**此方法根据name设定窗口参数，例如它在某插件调用其他插件时非常有用。  
  
**参数：**  
  
name - 要设置的窗口参数。  
  
value - 窗口参数中要设置的值。  
  
**返回：** 窗口参数值。

--------------------

**语法：** tinyMCE.getParam(name, \[default\_value\], \[strip\_whitespace\]);  
  
**描述：**此方法返回TinyMCE的配置参数。  
  
**参数：**  
  
name - 要获取的窗口参数名。  
  
\[default\_value\] - 窗口参数丢失时返回的默认值。  
  
\[strip\_whitespace\] - 如果为真，所有返回值中的空白字符将会被除去。默认：false。

2.添加图片上传功能

[http://blog.csdn.net/m13666368773/article/details/7242333][http_blog.csdn.net_m13666368773_article_details_7242333]

在TinyMCE 在处理富文本时，可以通过网站的相对路径录入图片地址。这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。

**实现思路**：

使用Ajax 进行图片上传，此上传方式可以更友好的实现TinyMCE 的图片上传扩展，

具体方法可以参考我的上一篇 [Jquery ajaxsubmit 上传图片][Jquery ajaxsubmit]。将Ajax上传图片集成到 TinyMCE 中，

主要是修改TinyMCE 目录下的 tinymce\\jscripts\\tiny\_mce\\plugins 的 advimage 插件。

了解TinyMCE的人应该知道 TinyMCE 类似 FireFox。 开发者是可以为其编写适合自己需求的插件。

所以只要稍稍修改 advimage 这个插件即可。我们为 advimage

目录下的image.htm 新增 jquery 图片异步提交代码：

1 
 
 
 
 <
 
 script type
 
 =
 
 "
 
 text/javascript
 
 "
 
 >
 
 
 
 2 
 
 
 
 function
 
 AjaxUploadPic() { 
 
 3 
 
 
 
 if
 
 ($(
 
 "
 
 #flUpload
 
 "
 
 ).val() 
 
 ==
 
 
 
 ""
 
 ) { 
 
 4 
 
 alert(
 
 "
 
 请选择一个图片文件，再点击上传。
 
 "
 
 ); 
 
 5 
 
 
 
 return
 
 ; 
 
 6 
 
 } 
 
 7 
 
 
 
 8 
 
 $(
 
 '
 
 #myForm
 
 '
 
 ).ajaxSubmit({ 
 
 9 
 
 beforeSubmit: 
 
 function
 
 () { 
 
 10 
 
 }, 
 
 11 
 
 success: 
 
 function
 
 (html, status) { 
 
 12 
 
 
 
 var
 
 result 
 
 =
 
 html.replace(
 
 "
 
 <PRE>
 
 "
 
 , 
 
 ""
 
 ); 
 
 13 
 
 result 
 
 =
 
 result.replace(
 
 "
 
 </PRE>
 
 "
 
 , 
 
 ""
 
 ); 
 
 14 
 
 
 
 if
 
 (html.indexOf(
 
 "
 
 格式
 
 "
 
 ) 
 
 >
 
 
 
 0
 
 ) { 
 
 15 
 
 alert(result); 
 
 16 
 
 
 
 return
 
 ; 
 
 17 
 
 } 
 
 18 
 
 $(
 
 "
 
 #src
 
 "
 
 ).val(result); 
 
 19 
 
 ImageDialog.showPreviewImage($(
 
 "
 
 #src
 
 "
 
 ).val()) 
 
 20 
 
 } 
 
 21 
 
 }); 
 
 22 
 
 
 
 23 
 
 } 
 
 24 
 
 }); 
 
 25 
 
 
 
 <
 
 /
 
 script>

[复制代码][Link 1]

当然了，flUpload 这个input type="file" 需要被form html标签包住同时为该form设置好

method="post" enctype="multipart/form-data"  action=url 属性。

程序截图如下：

![2010110209205168.gif][]

![2010110209235620.jpg][]

![2010110209243479.jpg][]

[http_www.tinymce.com]: http://www.tinymce.com/
[http_www.iwms.net_n2065c17.aspx]: http://www.iwms.net/n2065c17.aspx
[Mozilla Midas spec]: http://www.mozilla.org/editor/midas-spec.html
[http_blog.csdn.net_m13666368773_article_details_7242333]: http://blog.csdn.net/m13666368773/article/details/7242333
[Jquery ajaxsubmit]: http://blog.csdn.net/m13666368773/article/details/7242349
[Link 1]: http://www.cnblogs.com/ryanding/archive/2010/11/02/1866694.html
[2010110209205168.gif]: /images/20220609/ed1b90bc552d483982e97c7164890086.png
[2010110209235620.jpg]: /images/20220609/802216dcac414a3187751a9507c1fc17.png
[2010110209243479.jpg]: /images/20220609/cb93f1d565194c2e8c72ba8d532658f6.png