tinyMCE使用详解
初始化
在初始化TinyMCE的时候，需要把以下代码加入到页面的HEAD标签中。
按以下例子中的设置，所有的TEXTAREA文本域在页面加载时将被转换成编辑器。
另外还有其他模块，我们将在后面详细讲述。
复制代码代码如下:
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
<!-- /tinyMCE -->
注意以上红色部分是tiny_mce.js脚本文件的位置，该文件中包含了编辑器所需要的全部代码，主题及语言包将在初始化时被加载。
蓝色部分是初始化调用，它生成TinyMCE的全局实例，其中的设置及名称－值属性将在以后描述。
设置
以名称－值属性方式传递给tinyMCE的init方法的设置控制着程序的全局行为。
所有的键及可能的键值如下表所示。
注意，用[]括起来的名称是可选的，不是必须的设置。
textareas - 页面加载时把所有TEXTAREA组件转换成编辑器.
specific_textareas - 将所有"mce_editable"属性值为true的TEXTAREA转换成编辑器.
exact - 只转换在"elements"设置中指定的确切组件.
TinyMCE自带三个内置的主题，它们是simple，default和advanced。
如果你想创建自己的主题，请仔细阅读文档的 主题 部分。
这些插件覆盖了主题模板中定义的功能。
插件逻辑应该包含在一个叫"editor_plugin.js"的文件中，它是插件目录中唯一被包含进来的文件。
例如："my_image_dialog,my_link_dialog".
如果你想创建自己的插件，请仔细阅读文档的 主题 部分。
中文用户建议您使用"zh-CN"
该列表中的元素可以是任何有id或name属性的HTML组件。
如果你想使用这个选项，将它设置为true.
该选项仅在"mode"被设置为"specific_textareas"时使用。
例如： a[href|target=_blank],strong/b,div[align],br.
以上例子告诉TinyMCE移除所有除了"a, strong, div"和"br"的组件，将元素b转换成strong，默认target设为"_blank"并保持href、target、align属性。
在匹配组件及属性的名称时可以使用像*,+,?这样的通配符。
字符：
第一个组件是会被用来输出的那个（即第二个组件被第一个替换）。
例如："target=_blank"
例如："border:0"
例如："target<_blank?_self"
特殊变量：
{$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选项时特别有用。
此选项在你仅仅想往默认列表中增添部分组件时相当有用。
格式与"valid_elements"一致。
如果设置为true，不需要的组件将被移除。
默认值即为true。
如果设置为true，将会校验CSS的class属性。
默认值即为true。
代表着HTML内容是否需要校验。
默认值为true。
此函数必须遵从以下的格式：func(url, node, on_save) ，返回转换后的URL。
此设置专为集成目的而设。
参数url代表要转换的地址，node代表包含URL的那个节点，on_save是一个布尔值（在用户提交表单时为真）。
如果设置为true，编辑器将把制表符（TAB）转换成缩进，除此外保持其他whitespace（空白字符、换行等）字符，就如同HTML标签中的PRE的效果。
默认值为false。
此函数获取选定链接的地址和目标，返回一个以"href", "target"和 "title"为collection名称的数组。
当使用新窗口时，为了兼容Mozilla，会在window.opener（d出窗口的母窗口，译者注）上调用tinyMCE.insertLink。
此函数获取选定图像的url并返回一个以src和alt为collection名称的数组。
当使用新窗口时，为了兼容Mozilla，会在window.opener上调用tinyMCE.insertImage。
函数格式：insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action).
函数格式：setupContentCallback(editor_id, node)，其中editor_id是编辑器的id，node是编辑器所在的body组件节点。
函数格式：save(id, content, node)，如果有特定返回值，其值将会被加到HTML表单组件上。
所以可以通过此函数来自定义用户转换逻辑。
该选项的默认值跟language选项一致。
如果设置为"html"，编辑器的输出将经过HTML编码处理。
例如：<将会变成<，依此类推。
默认值是空。
如果设置成true，像css文件路径等调试信息将会被显示。
如果设置成true，当边框设置成0的时候，为达到更好的视觉效果在编辑器中表格会有虚线出现。
默认值为true。
如果设置成true，将强制进行所有表单的"onsubmit"事件处理并引发保存。
此选项默认值为true。
如果设置成true，在"onunload"事件发生时，当前窗口会引发一个triggerSave调用。
此triggerSave调用不会做任何清理工作，因为它是用来处理 前进/后退 按钮的。
此选项默认值为true。
此选项强制编辑器将段落符号(P)替换成换行符(BR)。
此选项默认值为false。
（实验阶段）
如果打开此选项，在按下回车键（Enter）时Mozilla/Firefox浏览器会生成段落符号(P)，在按下Shift+Enter时会生成换行符(BR)。
此选项默认为true。
如果设置成true，绝对路径将被转换成相对路径。
默认值为true。
在设置成true的情况下，如果URL中的主机名、端口号跟编辑器当前所在一致，它们会被移除。
例如：编辑器所在站点为 http://www.somesite.com ，那么以下链接 http://www.somesite.com/somedir/somepage.html 将会被转换成 /somedir/somepage.html 。
如果relative_urls被设置成false，此选项默认为true。
如果设置成true，编辑器在失去焦点的时候就会出现一个烦人的警告框。
默认值为true。
这个选项指定了编辑器当前的默认文档。
注意如果此选项指定到一个域名，请添加协议前缀，并以斜杠结尾。
例如：http://www.somehost.com/mydir/
此选项可以使 撤消/重做 功能更加完善。
默认值为true。
默认允许。
此选项修正了MSIE中一个内容重复的bug。
默认启用，但是为了兼容性也可以禁用(false)。
可能的值为：ltr, rtl。
默认值: ltr（从左到右）。
此选项默认值为false。
注意：此 *** 作当前仅支持MSIE。
默认值为false。
默认值为false。
在使用此选项时记得要把风格属性应用在正确的组件上。
此选项默认值为false。
此选项一旦启用，当编辑器聚焦时，将自动重置。
默认值为false。
该列表以奇数项、偶数项区分，其中奇数项是被用来转换的字符代码，偶数项是代表那个字符代码的实体名称。
例如："8205,zwj,8206,lrm,8207,rlm,173,shy"。
此选项能让用户在默认的清理基础上有所扩展。
此函数调用跟默认的调用是分开的，它并不替换默认的清理函数，而仅仅是扩展。
点击 插件清理 查看更多细节。
可能的值为："top"和"bottom"。
默认值是"bottom"。
默认值是center。
格式如下："<title>=<class>;.."。
如果没有指定此选项，主内容部分的CSS类将会被自动导入。
例如："Header 1=header1;Header 2=header2;Header 3=header3"
例如："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_advaned_buttons3_add : "iespell".
例如：theme_advaned_buttons3_add_before : "iespell"。
例如："formatselect".
默认值为："none"
默认值：p,address,pre,h1,h2,h3,h4,h5,h6。
以下是一个较为复杂的初始化例子：
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "exact",
theme : "mytheme",
language : "se",
elements : "elm1,elm2"
});
</script>
<!-- /tinyMCE -->
函数 （供高级使用）
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。
但是tinyMCE也有自身一些特殊的命令如下表所示：
如果execCommand函数中有指定value参数，它的格式必须为name/value形式的数组，其中 name有以下选项：cols, rows, border, cellspacing, cellpadding。
border（边框）的默认大小为：0。
value是要移除的editor_id（编辑器ID），编辑器ID格式如下："mce_editor_<index>"。
也可以使用DOM组件的ID和表单名。
编辑器ID格式如下："mce_editor_<index>"。
也可以使用DOM组件的ID和表单名。
value的值是要给选定组件指派的css类名或者要新创建的span组件名称。
{$selection}变量由当前选定部分的文字内容替换。
为当前选定组件设置属性。
此命令的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'});
是否开启视觉帮助模式
插入名称锚点。
value是锚点的名称。
重置所有编辑器实例的设计模式状态。
在Firefox中，当编辑器被放在制表符中或者用style.display="none/block"来控制隐显的时候，此命令非常有用。
在编辑器重新显示时调用此命令。
选定value指定的节点/组件。
同时此命令会使编辑器滚动到此组件所在位置。
从当前节点以深度关系选择指定的节点/组件。
所以0值会选定当前聚焦的节点。
同时此命令会使编辑器滚动到此组件所在位置。
user_interface - 申明某命令是否会显示用户界面。
True/False选项。
value - 要传递给命令的值。
例如，插入链接时，它就是链接的URL。
返回： 无
示例：
语法： tinyMCE.insertLink(href, target);
描述：此方法在当前选定编辑器实例的鼠标位置插入一个链接，或者用新的数据来更新已有链接。
当你创建自己的主题时，此方法应在插入链接的d出窗口中的OK按钮按下时被调用。
参数：
href - 链接的地址/URL。
target - 链接的目标。
返回： 无
语法： tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);
描述：此方法在当前选定编辑器实例的鼠标位置插入图像，或者用新的数据来更新已有图像。
当你创建自己的主题时，此方法应在插入图像的d出窗口中的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 - 启用/禁用d出窗口的自动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返回窗口参数，它可以用在主题中的d出窗口中，以获取对话框中的参数。
参数：
name - 要获取的窗口参数的名称。
[default_value] - 窗口参数丢失时返回的默认值。
返回： 窗口参数的值。
语法： tinyMCE.setWindowArg(name, value);
描述：此方法根据name设定窗口参数，例如它在某插件调用其他插件时非常有用。
参数：
name - 要设置的窗口参数。
value - 窗口参数中要设置的值。
返回： 窗口参数值。
语法： tinyMCE.getParam(name, [default_value], [strip_whitespace]);
描述：此方法返回TinyMCE的配置参数。
参数：
name - 要获取的窗口参数名。
[default_value] - 窗口参数丢失时返回的默认值。
[strip_whitespace] - 如果为真，所有返回值中的空白字符将会被除去。
默认：false。
tinyMce使用心得
tinyMce是一款功能强大的基于js的富文本编辑器.
官方主页：http://www.tinymce.com/
现在最新的版本是3.4.7了
这款编辑器的功能几乎可以跟微软的office有的一比，毫不逊色。
编辑器里面的各项编辑工具都可以定制，大部分高级功能都是以插件的形式添加进来，开发使用者可以根据需要添加/删除自己的功能。
首先下载tinyMce的开发包(建议下载dev版本，里面有大量的实例，还可以查看源代码)
下载链接：https://www.jb51.net/codes/44180.html http://www.tinymce.com/download/download.php
然后在需要使用的Web页面添加tinyMce文件
<script type="text/javascript" src="common/tiny_mce/tiny_mce_src.js"></script>
只需要添加一个js文件即可，其他tinyMce需要的css和js它会自己加载。
然后在页面的<body>中放一个<textarea id="myRTE"></textarea>
最后使用tinyMce的init方法，在方法的配置里绑定那个textarea就可以了。
jsp页面代码
复制代码代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Word processor example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
// 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example word content CSS (should be your site CSS) this one removes paragraph margins
content_css : "css/word.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<!-- /TinyMCE -->
</head>
<body>
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h3>Word processor example</h3>
<p>
This page shows you how to configure TinyMCE to work more like common word processors.
There are more examples on how to use TinyMCE in the <a href="http://tinymce.moxiecode.com/examples/">Wiki</a>.
</p>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</textarea>
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
<script type="text/javascript">
if (document.location.protocol == 'file:') {
alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
</body>
</html>
另外所需的js文件全部在官网下载的tinymce_3.5_dev文件下的jscripts中
将此文件夹放到myeclipse中的webroot下即可
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）