WordPress 编辑器 TinyMCE 介绍和使用方法详解
TinyMCE 是一个轻量级的基于浏览器的所见即所得编辑器，支持市面上所有流行的浏览器，包括 IE6+ 和 Firefox1.5+，该编辑器有JavaScript 编写而成，功能配置灵活简单，同时该编辑器也是 WordPress 默认的编辑器，同时 TinyMCE 可以很方便的在可视化模式与 HTML 模式进行切换，TinyMCE 是一个根据 LGPL license 协议发布的自由软件，你可以把它用于商业应用。
我们可以先看看该款编辑器的外观界面：
使用方法
1、简单调用
TinyMCE 的安装非常简单，只需要下载 TinyMCE 包并载入 tinymce.min.js，代码如下所示：
<html>
<head>
<script src="js/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body>
<textarea>Your content here.</textarea>
</body>
</html>2、使用参数
我们也可以自定义编辑按钮：
<script src="tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste moxiemanager"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>配置参数
TinyMCE 是以名称－值属性方式传递给 tinyMCE 的 init 方法来控制着程序的全局行为。所有的键及可能的键值如下表所示。注意，用[]括起来的名称是可选的，不是必须的设置。
1、基本配置
| mode | Mode可以是以下几个值之一：textareas – 页面加载时把所有TEXTAREA组件转换成编辑器.specific_textareas – 将所有”mce_editable”属性值为true的TEXTAREA转换成编辑器.exact – 只转换在”elements”设置中指定的确切组件. | ||||||||||||||||||
| [theme] | 指定要使用的主题名称，主题将被放在TinyMCE的themes目录下，默认为default。TinyMCE自带三个内置的主题，它们是simple，default和advanced。如果你想创建自己的主题，请仔细阅读文档的 主题部分。 | ||||||||||||||||||
| [plugins] | 此选项是一系列以逗号分隔的主题插件列表（例如，可以只用来扩展图像对话框）。这些插件覆盖了主题模板中定义的功能。插件逻辑应该包含在一个叫”editor_plugin.js”的文件中，它是插件目录中唯一被包含进来的文件。例如：”my_image_dialog,my_link_dialog”.如果你想创建自己的插件，请仔细阅读文档的主题部分。 | ||||||||||||||||||
| [language] | TinyMCE中使用的语言包，这应该是像se,uk,us等诸如此类的FN代码，它被用来从”langs”目录中获取语言包，该设置的默认值为”uk”.中文用户建议您使用”zh-CN” | ||||||||||||||||||
| [elements] | 以逗号分隔的用来转换成编辑器的组件列表，该选项仅在”mode”选项被设置成”exact”时使用。该列表中的元素可以是任何有id或name属性的HTML组件。 | ||||||||||||||||||
| [ask] | 当”mode”被设置成”textareas”或”specific_textareas”的时候，该选项被应用，询问用户输入框是否将被转换成编辑器。如果你想使用这个选项，将它设置为true. | ||||||||||||||||||
| [textarea_trigger] | textarea（文本域）触发器的属性，默认值为”mce_editable”。该选项仅在”mode”被设置为”specific_textareas”时使用。 | ||||||||||||||||||
| [valid_elements] | 以逗号分隔开的组件转换部分的列表。例如： a[href|target=_blank],strong/b,div[align],br.以上例子告诉TinyMCE移除所有除了”a, strong, div”和”br”的组件，将元素b转换成strong，默认target设为”_blank”并保持href、target、align属性。在匹配组件及属性的名称时可以使用像*,+,?这样的通配符。字符：
特殊变量： {$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选项时特别有用。 | ||||||||||||||||||
| [extended_valid_elements] | 向”valid_elements”列表末尾添加可用组件。此选项在你仅仅想往默认列表中增添部分组件时相当有用。格式与”valid_elements”一致。 | ||||||||||||||||||
| [invalid_elements] | 输出时需要排除在外的组件名称列表，以逗号分隔开。 | ||||||||||||||||||
| [trim_span_elements] | True/False选项。如果设置为true，不需要的组件将被移除。默认值即为true。 | ||||||||||||||||||
| [verify_css_classes] | True/False选项。如果设置为true，将会校验CSS的class属性。默认值即为true。 | ||||||||||||||||||
| [verify_html] | True/False选项。代表着HTML内容是否需要校验。默认值为true。 | ||||||||||||||||||
| [urlconvertor_callback] | 当清理进程处理URL的时候调用的函数名。此函数必须遵从以下的格式：func(url, node, on_save) ，返回转换后的URL。此设置专为集成目的而设。参数url代表要转换的地址，node代表包含URL的那个节点，on_save是一个布尔值（在用户提 交表单时为真）。 | ||||||||||||||||||
| [preformatted] | True/False选项。如果设置为true，编辑器将把制表符（TAB）转换成缩进，除此外保持其他whitespace（空白字符、换行等）字符，就如同HTML标签中的PRE的效果。默认值为false。 | ||||||||||||||||||
| [insertlink_callback] | 当执行”insertlink”命令时调用的函数名。此函数获取选定链接的地址和目标，返回一个以”href”, “target”和 “title”为collection名称的数组。当使用新窗口时，为了兼容Mozilla，会在window.opener（弹出窗口的母窗口，译者 注）上调用tinyMCE.insertLink。 | ||||||||||||||||||
| [insertimage_callback] | 当执行”insertimage”命令时调用的函数名。此函数获取选定图像的url并返回一个以src和alt为collection名称的数组。当使用新窗口时，为了兼容Mozilla，会在window.opener上调用tinyMCE.insertImage。函数格式：insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action). | ||||||||||||||||||
| [setupcontent_callback] | 当编辑器初始化时调用的函数名。函数格式：setupContentCallback(editor_id, node)，其中editor_id是编辑器的id，node是编辑器所在的body组件节点。 | ||||||||||||||||||
| [save_callback] | 当执行triggerSave（触发保存）命令被调用时调用的函数名。函数格式：save(id, content, node)，如果有特定返回值，其值将会被加到HTML表单组件上。所以可以通过此函数来自定义用户转换逻辑。 | ||||||||||||||||||
| [docs_language] | TinyMCE文档中使用的语言，这应该是像se,uk,us等诸如此类的FN代码，它被用来从”<theme>/docs/<lang>”目录中获取文档。 该选项的默认值跟language选项一致。 | ||||||||||||||||||
| [width] | 编辑器的宽度，它默认的宽度是原先被替换的组件宽度。 | ||||||||||||||||||
| [height] | 编辑器的高度，它默认的高度是原先被替换的组件高度。 | ||||||||||||||||||
| [content_css] | 编辑窗口中要使用的CSS文件，其路径应该跟页面相关。 | ||||||||||||||||||
| [popups_css] | 像插入链接和图片时的弹出窗口中使用的CSS文件，其路径应该跟页面相关。 | ||||||||||||||||||
| [editor_css] | 编辑器使用的CSS文件，其路径应该跟页面相关。 | ||||||||||||||||||
| [encoding] | 编辑器的输出编码，此选项目前只能为”html”或者空。如果设置为”html”，编辑器的输出将经过HTML编码处理。例如：<将会变成<，依此类推。默认值是空。 | ||||||||||||||||||
| [debug] | True/False选项。如果设置成true，像css文件路径等调试信息将会被显示。 | ||||||||||||||||||
| [visual] | True/False选项。如果设置成true，当边框设置成0的时候，为达到更好的视觉效果在编辑器中表格会有虚线出现。默认值为true。 | ||||||||||||||||||
| [visual_table_style] | 用户可自定义表格的样式，默认值为：”border: 1px dashed #BBBBBB”。 | ||||||||||||||||||
| [add_form_submit_trigger] | True/False选项。如果设置成true，将强制进行所有表单的”onsubmit”事件处理并引发保存。此选项默认值为true。 | ||||||||||||||||||
| [add_unload_trigger] | True/False选项。如果设置成true，在”onunload”事件发生时，当前窗口会引发一个triggerSave调用。此triggerSave调用不会做任何清理工作，因为它是用来处理 前进/后退 按钮的。此选项默认值为true。 | ||||||||||||||||||
| [force_br_newlines] | True/False选项。此选项强制编辑器将段落符号(P)替换成换行符(BR)。此选项默认值为false。（实验阶段） | ||||||||||||||||||
| [force_p_newlines] | True/False选项。如果打开此选项，在按下回车键（Enter）时Mozilla/Firefox浏览器会生成段落符号(P)，在按下Shift+Enter时会生成换行符(BR)。此选项默认为true。 | ||||||||||||||||||
| [relative_urls] | True/False选项。如果设置成true，绝对路径将被转换成相对路径。默认值为true。 | ||||||||||||||||||
| [remove_script_host] | True/False选项。在设置成true的情况下，如果URL中的主机名、端口号跟编辑器当前所在一致，它们会被移除。例如：编辑器所在站点为 http://www.somesite.com ，那么以下链接 http://www.somesite.com/somedir/somepage.html 将会被转换成 /somedir/somepage.html 。如果relative_urls被设置成false，此选项默认为true。 | ||||||||||||||||||
| [focus_alert] | True/False选项。如果设置成true，编辑器在失去焦点的时候就会出现一个烦人的警告框。默认值为true。 | ||||||||||||||||||
| [document_base_url] | 在将绝对路径转换成相对路径的时候会用到此文档的URL。这个选项指定了编辑器当前的默认文档。注意如果此选项指定到一个域名，请添加协议前缀，并以斜杠结尾。例如：http://www.somehost.com/mydir/ | ||||||||||||||||||
| [custom_undo_redo] | True/False选项。此选项可以使 撤消/重做 功能更加完善。默认值为true。 | ||||||||||||||||||
| [custom_undo_redo_levels] | 自定义最多可撤消操作的次数，默认是无限制。 | ||||||||||||||||||
| [custom_undo_redo_keyboard_shortcuts] | 如果使用，编辑器可以使用Ctrl+Z和Ctrl+Y快捷键来实现撤消和重做。默认允许。 | ||||||||||||||||||
| [fix_content_duplication] | True/False选项。此选项修正了MSIE中一个内容重复的bug。默认启用，但是为了兼容性也可以禁用(false)。 | ||||||||||||||||||
| [directionality] | 此选项可以设置像阿拉伯语等语言的文字方向。可能的值为：ltr, rtl。默认值: ltr（从左到右）。 | ||||||||||||||||||
| [auto_cleanup_word] | 如果启用，从MS office/Word粘贴的HTML将会自动被清理。此选项默认值为false。注意：此操作当前仅支持MSIE。 | ||||||||||||||||||
| [cleanup_on_startup] | 如果启用，在编辑器初始化时文本域及组件将会被清理。默认值为false。 | ||||||||||||||||||
| [inline_styles] | 如果启用，像width,height,vspace,hspace和align等属性将会被风格属性替代。默认值为false。在使用此选项时记得要把风格属性应用在正确的组件上。 | ||||||||||||||||||
| [convert_newlines_to_brs] | 如果启用，所有的\n(新行)将会在编辑器启动时被转换成<br />组件。此选项默认值为false。 | ||||||||||||||||||
| [auto_reset_designmode] | 因为在调用style.display的none/block方法来显示/隐藏某个TinyMCE编辑器的时候有bug，设计模式需要被重置。此选项一旦启用，当编辑器聚焦时，将自动重置。默认值为false。 | ||||||||||||||||||
| [entities] | 一张以字符代码来查找名称的表，该表中元素是以逗号分隔开的实体列表。该列表以奇数项、偶数项区分，其中奇数项是被用来转换的字符代码，偶数项是代表那个字符代码的实体名称。例如：”8205,zwj,8206,lrm,8207,rlm,173,shy”。 | ||||||||||||||||||
| [cleanup_callback] | 自定义清理函数。此选项能让用户在默认的清理基础上有所扩展。此函数调用跟默认的调用是分开的，它并不替换默认的清理函数，而仅仅是扩展。点击插件清理查看更多细节。 |
2、主题高级配置
| [theme_advanced_toolbar_location] | 此选项用来改变工具栏的默认位置。可能的值为：”top”和”bottom”。默认值是”bottom”。 |
| [theme_advanced_toolbar_align] | 此选项用来设置工具栏的对齐方式是left, center还是right。默认值是center。 |
| [theme_advanced_styles] | 此选项可以用来增加风格下拉框中的CSS类和名称。格式如下：”<title>=<class>;..”。如果没有指定此选项，主内容部分的CSS类将会被自动导入。例如：”Header 1=header1;Header 2=header2;Header 3=header3″ |
| [theme_advanced_buttons1] | 工具栏上第一行要包含的按钮列表，以逗号分隔开。例如：”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 |
| [theme_advanced_buttons2] | 同上，差别在于指定的是工具栏第二行。 |
| [theme_advanced_buttons3] | 同上，差别在于指定的是工具栏第三行。 |
| [theme_advanced_buttons<N>_add] | 向工具栏上特定的第N行中增加额外的控制/按钮。例如：theme_advaned_buttons3_add : “iespell”. |
| [theme_advanced_buttons<N>_add_before] | 向工具栏上特定的第N行的默认按钮前面增加额外的控制/按钮。例如：theme_advaned_buttons3_add_before : “iespell”。 |
| [theme_advanced_disable] | 要禁用的按钮/组件的列表，以逗号分隔。例如：”formatselect”. |
| [theme_advanced_source_editor_width] | 源文件编辑器窗口的宽度。 |
| [theme_advanced_source_editor_height] | 源文件编辑器窗口的高度。 |
| [theme_advanced_path_location] | 组件路径列表的位置，可能的值为：”top”或”bottom”。默认值为：”none” |
| [theme_advanced_blockformats] | formatselect列表要屏蔽的格式列表，以逗号分隔开。默认值：p,address,pre,h1,h2,h3,h4,h5,h6。 |
调用函数
1、execCommand
- user_interface – 申明某命令是否会显示用户界面。True/False 选项。
- value – 要传递给命令的值。例如，插入链接时，它就是链接的 URL。
返回： 无
示例：<a href="javascript:tinymce.execCommand('Bold');">[Do bold]</a>
2、insertLink
语法： tinyMCE.insertLink(href, target);
描述：此方法在当前选定编辑器实例的鼠标位置插入一个链接，或者用新的数据来更新已有链接。当你创建自己的主题时，此方法应在插入链接的弹出窗口中的OK按钮按下时被调用。
参数：
- href – 链接的地址/URL。
- target – 链接的目标。
返回： 无
3、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_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.
12、getWindowArg
语法： tinyMCE.getWindowArg(name, [default_value]);
描述：此方法根据name返回窗口参数，它可以用在主题中的弹出窗口中，以获取对话框中的参数。
参数：
- name – 要获取的窗口参数的名称。
- [default_value] – 窗口参数丢失时返回的默认值。
返回： 窗口参数的值。
13、setWindowArg
语法： tinyMCE.setWindowArg(name, value);
描述：此方法根据name设定窗口参数，例如它在某插件调用其他插件时非常有用。
参数：
- name – 要设置的窗口参数。
- value – 窗口参数中要设置的值。
返回： 窗口参数值。
14、getParam
语法： tinyMCE.getParam(name, [default_value], [strip_whitespace]);
描述：此方法返回 TinyMCE 的配置参数。
参数：
- name – 要获取的窗口参数名。
- [default_value] – 窗口参数丢失时返回的默认值。
- [strip_whitespace] – 如果为真，所有返回值中的空白字符将会被除去。默认：false。
如何获取
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论