方法 | 描述 | |
---|---|---|
execCommand( String cmd, * params... ) |
执行命令的通用接口 该方法的第一个参数是需要执行的命令。剩下的可选的参数根据每个命令的不同而有一些差异, 具体请参照相应的命令详情。 |
|
queryCommandState( String cmd ) |
查询给定命令在当前选区内的状态。
|
|
queryCommandValue() |
查询给定命令在当前选区内的值, 默认返回undefined。根据命令的不同其返回值也会不同。 |
|
以上列表中的方法对于每一个命令都是适用的。区别在于,对于不同的命令,其需要的参数可能会不同。 |
# | 命令 | 描述 |
---|---|---|
1 | anchor | 插入锚点 |
2 | autosubmit | 提交表单 |
3 | autotypeset | 对当前编辑器的内容执行自动排版, 排版的行为根据config配置文件里的“autotypeset”选项进行控制。 |
4 | bold | 字体加粗 |
5 | italic | 字体倾斜 |
6 | subscript | 下标文本,与“superscript”命令互斥 |
7 | superscript | 上标文本,与“subscript”命令互斥 |
8 | blockquote | 添加引用 |
9 | cleardoc | 清空文档 |
10 | touppercase | 把选区内文本变大写,与“tolowercase”命令互斥 |
11 | tolowercase | 把选区内文本变小写,与“touppercase”命令互斥 |
12 | customstyle | 根据config配置文件里“customstyle”选项的值对匹配的标签执行样式替换。 |
13 | directionality | 文字输入方向 |
14 | forecolor | 字体颜色 |
15 | backcolor | 字体背景颜色 |
16 | fontsize | 字体大小 |
17 | fontfamily | 字体样式 |
18 | underline | 字体下划线,与删除线互斥 |
19 | strikethrough | 字体删除线,与下划线互斥 |
20 | fontborder | 字体边框 |
21 | formatmatch | 格式刷 |
22 | horizontal | 插入分割线 |
23 | imagefloat | 图片对齐方式 |
24 | insertimage | 插入图片 |
25 | indent | 缩进 |
26 | insertcode | 插入代码 |
27 | inserthtml | 插入html代码 |
28 | insertparagraph | 插入段落 |
29 | justify | 段落对齐方式 |
30 | lineheight | 行距 |
31 | link | 插入超链接 |
32 | unlink | 取消超链接 |
33 | insertorderedlist | 有序列表,与“insertunorderedlist”命令互斥 |
34 | insertunorderedlist | 无序列表,与“insertorderedlist”命令互斥 |
35 | music | 插入音乐 |
36 | pagebreak | 插入分页符 |
37 | paragraph | 段落格式 |
38 | preview | 预览 |
39 | 打印 | |
40 | pasteplain | 启用或取消纯文本粘贴模式 |
41 | removeformat | 清除文字样式 |
42 | rowspacing | 设置段间距 |
43 | selectall | 选中所有内容 |
44 | source | 切换源码模式和编辑模式 |
45 | time | 插入时间,默认格式:12:59:59 |
46 | date | 插入日期,默认格式:2013-08-30 |
47 | undo | 撤销上一次执行的命令 |
48 | redo | 重做上一次执行的命令 |
49 | insertvideo | 插入视频 |
50 | webapp | 插入百度应用 |
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'autosubmit' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'autotypeset' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 3 4 5 6 7 | //editor是编辑器实例
//对当前选中的文本内容执行加粗操作
//第一次执行, 文本内容加粗
editor.execCommand( 'bold' );
//第二次执行, 文本内容取消加粗
editor.execCommand( 'bold' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 3 4 5 6 7 | //editor是编辑器实例
//对当前选中的文本内容执行斜体操作
//第一次操作, 文本内容将变成斜体
editor.execCommand( 'italic' );
//再次对同一文本内容执行, 则文本内容将恢复正常
editor.execCommand( 'italic' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 3 4 5 6 7 | //editor是编辑器实例
//对当前选中的文本内容执行下标操作
//第一次操作, 文本内容将变成下标文本
editor.execCommand( 'subscript' );
//再次对同一文本内容执行, 则文本内容将恢复正常
editor.execCommand( 'subscript' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 3 4 5 6 7 | //editor是编辑器实例
//对当前选中的文本内容执行上标操作
//第一次操作, 文本内容将变成上标文本
editor.execCommand( 'superscript' );
//再次对同一文本内容执行, 则文本内容将恢复正常
editor.execCommand( 'superscript' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'blockquote' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 | //editor 是编辑器实例
editor.execCommand('cleardoc');
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'touppercase' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'tolowercase' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'customstyle' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'underline' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'strikethrough' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'fontborder' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 3 | //editor是编辑器实例
//获取格式刷
editor.execCommand( 'formatmatch' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmdName | String | 命令字符串 |
1 | editor.execCommand( 'horizontal' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
opt | Object | 属性键值对,这些属性都将被复制到当前插入图片 |
1 2 3 4 5 | editor.execCommand( 'insertimage', {
src:'a/b/c.jpg',
width:'100',
height:'100'
} );
|
1 2 3 4 5 6 7 8 9 | editor.execCommand( 'insertimage', [{
src:'a/b/c.jpg',
width:'100',
height:'100'
},{
src:'a/b/d.jpg',
width:'100',
height:'100'
}] );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'indent' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
html | String | 插入的html字符串 |
1 2 3 4 5 6 7 8 9 | //xxx[BB]xxx 当前选区为非闭合选区,选中BB这两个文本
//执行命令,插入<b>CC</b>
//插入后的效果 xxx<b>CC</b>xxx
//<p>xx|xxx</p> 当前选区为闭合状态
//插入<p>CC</p>
//结果 <p>xx</p><p>CC</p><p>xxx</p>
//<p>xxxx</p>|</p>xxx</p> 当前选区在两个p标签之间
//插入 xxxx
//结果 <p>xxxx</p><p>xxxx</p></p>xxx</p>
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 2 | //editor是编辑器实例
editor.execCommand( 'insertparagraph' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'unlink');
|
参数名 | 类型 | 描述 |
---|---|---|
musicOptions | Object | 插入音乐的参数项, 支持的key有: url=>音乐地址; width=>音乐容器宽度;height=>音乐容器高度;align=>音乐文件的对齐方式, 可选值有: left, center, right, none |
1 2 3 4 5 6 7 8 | //editor是编辑器实例
//在编辑器里插入一个“植物大战僵尸”的APP
editor.execCommand( 'music' , {
width: 400,
height: 95,
align: "center",
url: "音乐地址"
} );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'pagebreak'); //插入一个hr标签,带有样式类名pagebreak
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'preview' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'print' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.queryCommandState( 'pasteplain' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'selectall' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'source');
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'time');
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'date');
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'undo' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
1 | editor.execCommand( 'redo' );
|
参数名 | 类型 | 描述 |
---|---|---|
cmd | String | 命令字符串 |
videoArr | Array | 需要插入的视频的数组, 其中的每一个元素都是一个键值对对象, 描述了一个视频的所有属性 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var videoAttr1 = {
//视频地址
url: 'http://www.youku.com/xxx',
//视频宽高值, 单位px
width: 200,
height: 100
},
videoAttr2 = {
//视频地址
url: 'http://www.youku.com/xxx',
//视频宽高值, 单位px
width: 200,
height: 100
}
//editor 是编辑器实例
//该方法将会向编辑器内插入两个视频
editor.execCommand( 'insertvideo', [ videoAttr1, videoAttr2 ] );
|
参数名 | 类型 | 描述 |
---|---|---|
appOptions | Object | 应用所需的参数项, 支持的key有: title=>应用标题, width=>应用容器宽度, height=>应用容器高度,logo=>应用logo,url=>应用地址 |
1 2 3 4 5 6 7 8 9 | //editor是编辑器实例
//在编辑器里插入一个“植物大战僵尸”的APP
editor.execCommand( 'webapp' , {
title: '植物大战僵尸',
width: 560,
height: 465,
logo: '应用展示的图片',
url: '百度应用的地址'
} );
|
方法签名 | 静态 | 描述 |
---|---|---|
getListener(Object obj, String type, Boolean force) | 是 | 获得对象所拥有监听类型的所有监听器 |
filterNode(Object root, Object rules) | 是 | 根据传入节点和过滤规则过滤相应节点 |
filterWord(String html) | 是 | 根据传入html字符串过滤word |
htmlparser(String htmlstr, Boolean ignoreBlank) | 是 | html字符串转换成uNode节点的静态方法 |
类名 | 描述 |
---|---|
Editor | UEditor的核心类,为用户提供与编辑器交互的接口。 |
EventBase | UE采用的事件基类,继承此类的对应类将获取addListener,removeListener,fireEvent方法。 在UE中,Editor以及所有ui实例都继承了该类,故可以在对应的ui对象以及editor对象上使用上述方法。 |
uNode | 编辑器模拟的节点类 |
事件名 | 描述 |
---|---|
ready | 编辑器准备就绪后会触发该事件 |
destroy | 执行destroy方法,会触发该事件 |
reset | 执行reset方法,会触发该事件 |
focus | 执行focus方法,会触发该事件 |
langReady | 语言加载完成会触发该事件 |
beforeExecCommand | 运行命令之后会触发该命令 |
afterExecCommand | 运行命令之后会触发该命令 |
firstBeforeExecCommand | 运行命令之前会触发该命令 |
beforeGetContent | 在getContent方法执行之前会触发该事件 |
afterGetContent | 在getContent方法执行之后会触发该事件 |
getAllHtml | 在getAllHtml方法执行时会触发该事件 |
beforeSetContent | 在setContent方法执行之前会触发该事件 |
afterSetContent | 在setContent方法执行之后会触发该事件 |
selectionchange | 每当编辑器内部选区发生改变时,将触发该事件 |
beforeSelectionChange | 在所有selectionchange的监听函数执行之前,会触发该事件 |
afterSelectionChange | 在所有selectionchange的监听函数执行完之后,会触发该事件 |
contentChange | 编辑器内容发生改变时会触发该事件 |
方法签名 | 描述 |
---|---|
Editor() | 以默认参数构建一个编辑器实例 |
Editor(Object setting) | 以给定的参数集合创建一个编辑器实例,对于未指定的参数,将应用默认参数。 |
方法签名 | 静态 | 描述 |
---|---|---|
ready(Function fn) | 否 | 编辑器对外提供的监听ready事件的接口, 通过调用该方法,达到的效果与监听ready事件是一致的 |
setOpt(String key, * val) | 否 | 该方法是提供给插件里面使用,设置配置项默认值 |
setOpt(Object options) | 否 | 该方法是提供给插件里面使用,以{key:value}集合的方式设置插件内用到的配置项默认值 |
destroy() | 否 | 销毁编辑器实例,使用textarea代替 |
render(String containerId) | 否 | 渲染编辑器的DOM到指定容器 |
render(Element containerDom) | 否 | 渲染编辑器的DOM到指定容器 |
sync() | 否 | 同步数据到编辑器所在的form 从编辑器的容器节点向上查找form元素,若找到,就同步编辑内容到找到的form里,为提交数据做准备,主要用于是手动提交的情况 后台取得数据的键值,使用你容器上的name属性,如果没有就使用参数里的textarea项 |
sync(String formID) | 否 | 根据传入的formId,在页面上查找要同步数据的表单,若找到,就同步编辑内容到找到的form里,为提交数据做准备 后台取得数据的键值,该键值默认使用给定的编辑器容器的name属性,如果没有name属性则使用参数项里给定的“textarea”项 |
setHeight(Number number) | 否 | 设置编辑器高度 |
addshortcutkey(Object keyset) | 否 | 为编辑器的编辑命令提供快捷键 这个接口是为插件扩展提供的接口,主要是为新添加的插件,如果需要添加快捷键,所提供的接口 |
addshortcutkey(String cmd, String keys) | 否 | 这个接口是为插件扩展提供的接口,主要是为新添加的插件,如果需要添加快捷键,所提供的接口 |
getContent() | 否 | 获取编辑器的内容 |
getContent(Function fn) | 否 | 获取编辑器的内容。 可以通过参数定义编辑器内置的判空规则 |
getAllHtml() | 否 | 取得完整的html代码,可以直接显示成完整的html文档 |
getPlainTxt() | 否 | 得到编辑器的纯文本内容,但会保留段落格式 |
getContentTxt() | 否 | 获取编辑器中的纯文本内容,没有段落格式 |
setContent(String html) | 否 | 设置编辑器的内容,可修改编辑器当前的html内容 |
setContent(String html, Boolean isAppendTo) | 否 | 设置编辑器的内容,可修改编辑器当前的html内容 |
focus() | 否 | 让编辑器获得焦点,默认focus到编辑器头部 |
focus(Boolean toEnd) | 否 | 让编辑器获得焦点,toEnd确定focus位置 |
execCommand(String cmdName) | 否 | 执行编辑命令cmdName,完成富文本编辑效果 |
queryCommandState(String cmdName) | 否 | 根据传入的command命令,查选编辑器当前的选区,返回命令的状态 |
queryCommandValue(String cmdName) | 否 | 根据传入的command命令,查选编辑器当前的选区,根据命令返回相关的值 |
hasContents() | 否 | 检查编辑区域中是否有内容 |
hasContents(Array tags) | 否 | 检查编辑区域中是否有内容,若包含参数tags中的节点类型,直接返回true |
reset() | 否 | 重置编辑器,可用来做多个tab使用同一个编辑器实例 |
setEnabled() | 否 | 设置当前编辑区域可以编辑 |
setDisabled() | 否 | 设置当前编辑区域不可编辑 |
setDisabled(String except) | 否 | 设置当前编辑区域不可编辑,except中的命令除外 |
setDisabled(Array except) | 否 | 设置当前编辑区域不可编辑,except中的命令除外 |
setShow() | 否 | 显示编辑器 |
setHide() | 否 | 隐藏编辑器 |
getLang(String path) | 否 | 根据指定的路径,获取对应的语言资源 |
getContentLength() | 否 | 计算编辑器html内容字符串的长度 |
getContentLength(Boolean ingoneHtml) | 否 | 计算编辑器当前纯文本内容的长度 |
addInputRule(Function rule) | 否 | 注册输入过滤规则 |
filterInputRule(UE.uNode root) | 否 | 执行注册的过滤规则 |
addOutputRule(Function rule) | 否 | 注册输出过滤规则 |
filterOutputRule(UE.uNode root) | 否 | 根据输出过滤规则,过滤编辑器内容 |
1 2 3 | editor.addListener( 'ready', function( editor ) {
editor.execCommand( 'focus' ); //编辑器家在完成后,让编辑器拿到焦点
} );
|
1 2 3 | editor.addListener( 'selectionchange', function( editor ) {
console.log('选区发生改变');
}
|
1 2 | var editor = new UE.Editor();
editor.execCommand('blod');
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | 编辑器ready之后所执行的回调, 如果在注册事件之前编辑器已经ready,将会 立即触发该回调。 |
1 2 3 | editor.ready( function( editor ) {
editor.setContent('初始化完毕');
} );
|
参数名 | 类型 | 描述 |
---|---|---|
options | Object | 将要设置的选项的键值对对象 |
1 2 3 | editor.setOpt( {
'initContent': '欢迎使用编辑器'
} );
|
参数名 | 类型 | 描述 |
---|---|---|
containerId | String | 指定一个容器ID |
参数名 | 类型 | 描述 |
---|---|---|
containerDom | Element | 直接指定容器对象 |
1 2 | editor.sync();
form.sumbit(); //form变量已经指向了form元素
|
参数名 | 类型 | 描述 |
---|---|---|
formID | String | 指定一个要同步数据的form的id,编辑器的数据会同步到你指定form下 |
参数名 | 类型 | 描述 |
---|---|---|
number | Number | 设置的高度值,纯数值,不带单位 |
1 | editor.setHeight(number);
|
参数名 | 类型 | 描述 |
---|---|---|
keyset | Object | 命令名和快捷键键值对对象,多个按钮的快捷键用“+”分隔 |
1 2 3 4 | editor.addshortcutkey({
"Bold" : "ctrl+66",//^B
"Italic" : "ctrl+73", //^I
});
|
类型 | 描述 |
---|---|
String | 编辑器的内容字符串, 如果编辑器的内容为空,或者是空的标签内容(如:”<p><br/></p>“), 则返回空字符串 |
1 2 | //编辑器html内容:<p>1<strong>2<em>34</em>5</strong>6</p>
var content = editor.getContent(); //返回值:<p>1<strong>2<em>34</em>5</strong>6</p>
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | 自定的判空规则, 要求该方法返回一个boolean类型的值, 代表当前编辑器的内容是否空, 如果返回true, 则该方法将直接返回空字符串;如果返回false,则编辑器将返回 经过内置过滤规则处理后的内容。 |
类型 | 描述 |
---|---|
String | 编辑器的内容字符串 |
1 2 3 4 | // editor 是一个编辑器的实例
var content = editor.getContent( function ( editor ) {
return editor.body.innerHTML === '欢迎使用UEditor'; //返回空字符串
} );
|
类型 | 描述 |
---|---|
String | 编辑器的内容html文档字符串 |
类型 | 描述 |
---|---|
String | 编辑器带段落格式的纯文本内容字符串 |
1 2 | //编辑器html内容:<p><strong>1</strong></p><p><strong>2</strong></p>
console.log(editor.getPlainTxt()); //输出:"1\n2\n
|
类型 | 描述 |
---|---|
String | 编辑器不带段落格式的纯文本内容字符串 |
1 2 | //编辑器html内容:<p><strong>1</strong></p><p><strong>2</strong></p>
console.log(editor.getPlainTxt()); //输出:"12
|
参数名 | 类型 | 描述 |
---|---|---|
html | String | 要插入的html内容 |
1 | editor.getContent('<p>test</p>');
|
参数名 | 类型 | 描述 |
---|---|---|
toEnd | Boolean | 默认focus到编辑器头部,toEnd为true时focus到内容尾部 |
1 | editor.focus(true)
|
类型 | 描述 |
---|---|
Boolean | 检查有内容返回true,否则返回false |
1 | editor.hasContents()
|
1 | editor.reset()
|
参数名 | 类型 | 描述 |
---|---|---|
except | String | 例外命令的字符串 |
1 | editor.setDisabled('bold'); //禁用工具栏中除加粗之外的所有功能
|
参数名 | 类型 | 描述 |
---|---|---|
except | Array | 例外命令的字符串数组,数组中的命令仍然可以执行 |
1 | editor.setDisabled(['bold','insertimage']); //禁用工具栏中除加粗和插入图片之外的所有功能
|
参数名 | 类型 | 描述 |
---|---|---|
path | String | 路径根据的是lang目录下的语言文件的路径结构 |
类型 | 描述 |
---|---|
Object | String | 根据路径返回语言资源的Json格式对象或者语言字符串 |
1 | editor.getLang('contextMenu.delete'); //如果当前是中文,那返回是的是'删除'
|
类型 | 描述 |
---|---|
Number | 返回计算的长度 |
1 2 | //编辑器html内容<p><strong>132</strong></p>
editor.getContentLength() //返回27
|
参数名 | 类型 | 描述 |
---|---|---|
rule | Function | 要添加的过滤规则 |
1 2 3 4 5 | editor.addInputRule(function(root){
$.each(root.getNodesByTagName('div'),function(i,node){
node.tagName="p";
});
});
|
参数名 | 类型 | 描述 |
---|---|---|
rule | Function | 要添加的过滤规则 |
1 2 3 4 5 | editor.addOutputRule(function(root){
$.each(root.getNodesByTagName('p'),function(i,node){
node.tagName="div";
});
});
|
方法签名 | 描述 |
---|---|
EventBase() | 通过此构造器,子类可以继承EventBase获取事件监听的方法 |
方法签名 | 静态 | 描述 |
---|---|---|
addListener(String types, Function fn) | 否 | 注册事件监听器 |
removeListener(String types, Function fn) | 否 | 移除事件监听器 |
fireEvent(String types) | 否 | 触发事件 |
fireEvent(String types, *... options) | 否 | 触发事件 |
1 | UE.EventBase.call(editor);
|
参数名 | 类型 | 描述 |
---|---|---|
types | String | 监听的事件名称,同时监听多个事件使用空格分隔 |
fn | Function | 监听的事件被触发时,会执行该回调函数 |
1 2 3 4 5 6 7 8 9 10 11 | editor.addListener('selectionchange',function(){
console.log("选区已经变化!");
})
editor.addListener('beforegetcontent aftergetcontent',function(type){
if(type == 'beforegetcontent'){
//do something
}else{
//do something
}
console.log(this.getContent) // this是注册的事件的编辑器实例
})
|
参数名 | 类型 | 描述 |
---|---|---|
types | String | 触发的事件名称,同时触发多个事件使用空格分隔 |
options | *... | 可选参数,可以传入一个或多个参数,会传给事件触发的回调函数 |
类型 | 描述 |
---|---|
* | 返回触发事件的队列中,最后执行的回调函数的返回值 |
1 2 3 4 5 6 7 8 9 | editor.addListener( "selectionchange", function ( type, arg1, arg2 ) {
console.log( arg1 + " " + arg2 );
} );
//触发selectionchange事件, 会执行上面的事件监听器
//output: Hello World
editor.fireEvent("selectionchange", "Hello", "World");
|
方法签名 | 描述 |
---|---|
uNode(Object attr) | 通过一个键值对,创建一个uNode对象 |
参数名 | 类型 | 描述 |
---|---|---|
attr | Object | 传入要创建的uNode的初始属性 |
1 2 3 4 5 | var node = new uNode({
type:'element',
tagName:'span',
attrs:{style:'font-size:14px;'}
}
|
类型 | 描述 |
---|---|
String | 返回转换后的html字符串 |
1 | node.toHtml();
|
类型 | 描述 |
---|---|
String | 返回节点的html内容 |
1 | var htmlstr = node.innerHTML();
|
类型 | 描述 |
---|---|
String | 返回节点的存文本内容 |
1 | var textStr = node.innerText();
|
类型 | 描述 |
---|---|
Object | 若节点的type值是elemenet,返回空字符串,否则返回节点的data属性 |
1 | node.getData();
|
类型 | 描述 |
---|---|
UE.uNode | 返回第一个子节点 |
1 | node.firstChild(); //返回第一个子节点
|
类型 | 描述 |
---|---|
UE.uNode | 返回最后一个子节点 |
1 | node.lastChild(); //返回最后一个子节点
|
类型 | 描述 |
---|---|
UE.uNode | 返回前一个节点 |
1 | node.children[2].previousSibling(); //返回子节点node.children[1]
|
类型 | 描述 |
---|---|
UE.uNode | 返回后一个节点,找不到返回null |
1 | node.children[2].nextSibling(); //如果有,返回子节点node.children[3]
|
类型 | 描述 |
---|---|
Number | 返回索引数值,如果没有父节点,返回-1 |
1 | node.getIndex();
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | 遍历到节点的时,传入节点作为参数,运行此函数 |
1 2 3 | traversal(node, function(){
console.log(node.type);
});
|
属性名 | 类型 | 静态 | 描述 |
---|---|---|---|
startContainer | Node | 否 | 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点 |
startOffset | Node | 否 | 当前Range的开始边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符 |
endContainer | Node | 否 | 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点 |
endOffset | Node | 否 | 当前Range的结束边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符 |
collapsed | Boolean | 否 | 当前Range是否闭合 |
document | Document | 否 | 当前Range所属的Document对象 |
方法签名 | 描述 |
---|---|
Range(Document document) | 创建一个跟document绑定的空的Range实例 |
方法签名 | 静态 | 描述 |
---|---|---|
cloneContents() | 否 | 克隆选区的内容到一个DocumentFragment里 |
deleteContents() | 否 | 删除当前选区范围中的所有内容 |
extractContents() | 否 | 将当前选区的内容提取到一个DocumentFragment里 |
setStart(Node node, int offset) | 否 | 设置Range的开始容器节点和偏移量 |
setEnd(Node node, int offset) | 否 | 设置Range的结束容器和偏移量 |
setStartAfter(Node node) | 否 | 将Range开始位置设置到node节点之后 |
setStartBefore(Node node) | 否 | 将Range开始位置设置到node节点之前 |
setEndAfter(Node node) | 否 | 将Range结束位置设置到node节点之后 |
setEndBefore(Node node) | 否 | 将Range结束位置设置到node节点之前 |
setStartAtFirst(Node node) | 否 | 设置Range的开始位置到node节点内的第一个子节点之前 |
setStartAtLast(Node node) | 否 | 设置Range的开始位置到node节点内的最后一个节点之后 |
setEndAtFirst(Node node) | 否 | 设置Range的结束位置到node节点内的第一个节点之前 |
setEndAtLast(Node node) | 否 | 设置Range的结束位置到node节点内的最后一个节点之后 |
selectNode(Node node) | 否 | 选中给定节点 |
selectNodeContents(Node node) | 否 | 选中给定节点内部的所有节点 |
cloneRange() | 否 | clone当前Range对象 |
collapse() | 否 | 向当前选区的结束处闭合选区 |
collapse(Boolean toStart) | 否 | 闭合当前选区,根据给定的toStart参数项决定是向当前选区开始处闭合还是向结束处闭合, 如果toStart的值为true,则向开始位置闭合, 反之,向结束位置闭合。 |
shrinkBoundary() | 否 | 调整range的开始位置和结束位置,使其"收缩"到最小的位置 |
shrinkBoundary(Boolean ignoreEnd) | 否 | 调整range的开始位置和结束位置,使其"收缩"到最小的位置, 如果ignoreEnd的值为true,则忽略对结束位置的调整 |
getCommonAncestor() | 否 | 获取离当前选区内包含的所有节点最近的公共祖先节点, |
getCommonAncestor(Boolean includeSelf) | 否 | 获取当前选区所包含的所有节点的公共祖先节点, 可以根据给定的参数 includeSelf 决定获取到 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点, 如果 includeSelf 的取值为true, 则返回的节点可以是自身的容器节点, 否则, 则不能是容器节点 |
getCommonAncestor(Boolean includeSelf, Boolean ignoreTextNode) | 否 | 获取当前选区所包含的所有节点的公共祖先节点, 可以根据给定的参数 includeSelf 决定获取到 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点, 如果 includeSelf 的取值为true, 则返回的节点可以是自身的容器节点, 否则, 则不能是容器节点; 同时可以根据 ignoreTextNode 参数的取值决定是否忽略类型为文本节点的祖先节点。 |
trimBoundary() | 否 | 调整当前Range的开始和结束边界容器,如果是容器节点是文本节点,就调整到包含该文本节点的父节点上 |
trimBoundary(Boolean ignoreEnd) | 否 | 调整当前Range的开始和结束边界容器,如果是容器节点是文本节点,就调整到包含该文本节点的父节点上, 可以根据 ignoreEnd 参数的值决定是否调整对结束边界的调整 |
txtToElmBoundary() | 否 | 如果选区在文本的边界上,就扩展选区到文本的父节点上, 如果当前选区是闭合的, 则什么也不做 |
txtToElmBoundary(Boolean ignoreCollapsed) | 否 | 如果选区在文本的边界上,就扩展选区到文本的父节点上, 如果当前选区是闭合的, 则根据参数项 ignoreCollapsed 的值决定是否执行该调整 |
insertNode(Node node) | 否 | 在当前选区的开始位置前插入节点,新插入的节点会被该range包含 |
setCursor() | 否 | 闭合选区到当前选区的开始位置, 并且定位光标到闭合后的位置 |
setCursor(Boolean toEnd) | 否 | 闭合选区,可以根据参数toEnd的值控制选区是向前闭合还是向后闭合, 并且定位光标到闭合后的位置。 |
createBookmark(Boolean serialize) | 否 | 创建当前range的一个书签,记录下当前range的位置,方便当dom树改变时,还能找回原来的选区位置 |
moveToBookmark(BookMark bookmark) | 否 | 调整当前range的边界到书签位置,并删除该书签对象所标记的位置内的节点 |
enlarge() | 否 | 调整range的边界,使其"放大"到最近的父节点 |
enlarge(Boolean toBlock) | 否 | 调整range的边界,使其"放大"到最近的父节点,根据参数 toBlock 的取值, 可以 要求扩大之后的父节点是block节点 |
adjustmentBoundary() | 否 | 调整Range的边界,使其"缩小"到最合适的位置 |
applyInlineStyle(String tagName) | 否 | 给range选区中的内容添加给定的inline标签 |
applyInlineStyle(String tagName, Object attrs) | 否 | 给range选区中的内容添加给定的inline标签, 并且为标签附加上一些初始化属性。 |
removeInlineStyle(String tagName) | 否 | 移除当前选区内指定的inline标签,但保留其中的内容 |
removeInlineStyle(Array tagNameArr) | 否 | 移除当前选区内指定的一组inline标签,但保留其中的内容 |
getClosedNode() | 否 | 获取当前选中的自闭合的节点 |
select() | 否 | 在页面上高亮range所表示的选区 |
scrollToView(Window win) | 否 | 滚动到当前range开始的位置 |
scrollToView(Window win, Number offset) | 否 | 滚动到距离当前range开始位置 offset 的位置处 |
equals() | 否 | 判断给定的Range对象是否和当前Range对象表示的是同一个选区 |
traversal(Function doFn) | 否 | 遍历range内的节点。每当遍历一个节点时, 都会执行参数项 doFn 指定的函数, 该函数的接受当前遍历的节点 作为其参数。 |
traversal(Function doFn, Function filterFn) | 否 | 遍历range内的节点。 每当遍历一个节点时, 都会执行参数项 doFn 指定的函数, 该函数的接受当前遍历的节点 作为其参数。 可以通过参数项 filterFn 来指定一个过滤器, 只有符合该过滤器过滤规则的节点才会触 发doFn函数的执行 |
类型 | 默认值 | 描述 |
---|---|---|
Node | 无 | 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点 |
类型 | 默认值 | 描述 |
---|---|---|
Node | 无 | 当前Range的开始边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符 |
类型 | 默认值 | 描述 |
---|---|---|
Node | 无 | 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点 |
类型 | 默认值 | 描述 |
---|---|---|
Node | 无 | 当前Range的结束边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符 |
类型 | 默认值 | 描述 |
---|---|---|
Boolean | true | 当前Range是否闭合 |
类型 | 默认值 | 描述 |
---|---|---|
Document | 无 | 当前Range所属的Document对象 |
参数名 | 类型 | 描述 |
---|---|---|
document | Document | 新建的选区所属的文档对象 |
类型 | 描述 |
---|---|
DocumentFragment | NULL | 如果选区是闭合的将返回null, 否则, 返回包含所clone内容的DocumentFragment元素 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body>
<!-- 中括号表示选区 -->
<b>x<i>x[x</i>xx]x</b>
<script>
//range是已选中的选区
var fragment = range.cloneContents(),
node = document.createElement("div");
node.appendChild( fragment );
//output: <i>x</i>xx
console.log( node.innerHTML );
</script>
</body>
|
类型 | 描述 |
---|---|
UE.dom.Range | 当前操作的Range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <body>
<!-- 中括号表示选区 -->
<b>x<i>x[x</i>xx]x</b>
<script>
//range是已选中的选区
range.deleteContents();
//竖线表示闭合后的选区位置
//output: <b>x<i>x</i>|x</b>
console.log( document.body.innerHTML );
//此时, range的各项属性为
//output: B
console.log( range.startContainer.tagName );
//output: 2
console.log( range.startOffset );
//output: B
console.log( range.endContainer.tagName );
//output: 2
console.log( range.endOffset );
//output: true
console.log( range.collapsed );
</script>
</body>
|
类型 | 描述 |
---|---|
DocumentFragment | 返回包含所提取内容的DocumentFragment对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <body>
<!-- 中括号表示选区 -->
<b>x<i>x[x</i>xx]x</b>
<script>
//range是已选中的选区
var fragment = range.extractContents(),
node = document.createElement( "div" );
node.appendChild( fragment );
//竖线表示闭合后的选区位置
//output: <b>x<i>x</i>|x</b>
console.log( document.body.innerHTML );
//output: <i>x</i>xx
console.log( node.innerHTML );
//此时, range的各项属性为
//output: B
console.log( range.startContainer.tagName );
//output: 2
console.log( range.startOffset );
//output: B
console.log( range.endContainer.tagName );
//output: 2
console.log( range.endOffset );
//output: true
console.log( range.collapsed );
</script>
</body>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 将被设为当前选区开始边界容器的节点对象 |
offset | int | 选区的开始位置偏移量 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区 -->
<b>xxx<i>x<span>xx</span>xx<em>xx</em>xxx</i>[xxx]</b>
<script>
//执行操作
range.setStart( document.getElementsByTagName("i")[0], 1 );
//此时, 选区变成了
//<b>xxx<i>x[<span>xx</span>xx<em>xx</em>xxx</i>xxx]</b>
</script>
|
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区 -->
<b>xxx<img>[xx]x</b>
<script>
//执行操作
range.setStart( document.getElementsByTagName("img")[0], 3 );
//此时, 选区变成了
//<b>xxx[<img>xx]x</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 选区的开始边界将紧接着该节点之后 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区示例 -->
<b>xx<i>xxx</i><span>xx[x</span>xxx]</b>
<script>
//执行操作
range.setStartAfter( document.getElementsByTagName("i")[0] );
//结果选区
//<b>xx<i>xxx</i>[<span>xxx</span>xxx]</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 目标节点 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区示例 -->
<b>[xx<i>xxx</i><span>xx]x</span>xxx</b>
<script>
//执行操作
range.setStartAfter( document.getElementsByTagName("span")[0] );
//结果选区
//<b>[xx<i>xxx</i><span>xxx</span>]xxx</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 目标节点 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区示例 -->
<b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
<script>
//执行操作
range.setStartAtFirst( document.getElementsByTagName("i")[0] );
//结果选区
//<b>xx<i>[xxx</i><span>xx]x</span>xxx</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要选中的节点 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象,此时的range仅包含当前给定的节点对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区示例 -->
<b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
<script>
//执行操作
range.selectNode( document.getElementsByTagName("i")[0] );
//结果选区
//<b>xx[<i>xxx</i>]<span>xxx</span>xxx</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 目标节点, 当前range将包含该节点内的所有节点 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象, 此时range仅包含给定节点的所有子节点 |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 选区示例 -->
<b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
<script>
//执行操作
range.selectNode( document.getElementsByTagName("b")[0] );
//结果选区
//<b>[xx<i>xxx</i><span>xxx</span>xxx]</b>
</script>
|
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象的一个副本 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- 选区示例 -->
<b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
<script>
//执行操作
range.collapse();
//结果选区
//“|”表示选区已闭合
//<b>xx<i>xxx</i><span>xx|x</span>xxx</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
toStart | Boolean | 是否向选区开始处闭合 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象,此时range对象处于闭合状态 |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- 选区示例 -->
<b>xx<i>xxx</i><span>[xx]x</span>xxx</b>
<script>
//执行操作
range.collapse( true );
//结果选区
//“|”表示选区已闭合
//<b>xx<i>xxx</i><span>|xxx</span>xxx</b>
</script>
|
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 | <span>xx<b>xx[</b>xxxxx]</span> => <span>xx<b>xx</b>[xxxxx]</span>
|
1 2 3 4 5 6 7 8 9 10 11 | <!-- 选区示例 -->
<b>x[xx</b><i>]xxx</i>
<script>
//执行收缩
range.shrinkBoundary();
//结果选区
//<b>x[xx]</b><i>xxx</i>
</script>
|
1 | [<b><i>xxxx</i>xxxxxxx</b>] => <b><i>[xxxx</i>xxxxxxx]</b>
|
类型 | 描述 |
---|---|
Node | 当前range对象内所有节点的公共祖先节点 |
1 2 3 4 5 6 7 8 9 10 11 | //选区示例
<span>xxx<b>x[x<em>xx]x</em>xxx</b>xx</span>
<script>
var node = range.getCommonAncestor();
//公共祖先节点是: b节点
//输出: B
console.log(node.tagName);
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
includeSelf | Boolean | 是否允许获取到的公共祖先节点是当前range对象的容器节点 |
类型 | 描述 |
---|---|
Node | 当前range对象内所有节点的公共祖先节点 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body>
<!-- 选区示例 -->
<b>xxx<i>xxxx<span>xx[x</span>xx]x</i>xxxxxxx</b>
<script>
var node = range.getCommonAncestor( false );
//这里的公共祖先节点是B而不是I, 是因为参数限制了获取到的节点不能是容器节点
//output: B
console.log( node.tagName );
</script>
</body>
|
参数名 | 类型 | 描述 |
---|---|---|
includeSelf | Boolean | 是否允许获取到的公共祖先节点是当前range对象的容器节点 |
ignoreTextNode | Boolean | 获取祖先节点的过程中是否忽略类型为文本节点的祖先节点 |
类型 | 描述 |
---|---|
Node | 当前range对象内所有节点的公共祖先节点 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <body>
<!-- 选区示例 -->
<b>xxx<i>xxxx<span>x[x]x</span>xxx</i>xxxxxxx</b>
<script>
var node = range.getCommonAncestor( true, false );
//output: SPAN
console.log( node.tagName );
</script>
</body>
|
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 | //选区示例
<b>xxx<i>[xxxxx]</i>xxx</b>
<script>
//未调整前, 选区的开始容器和结束都是文本节点
//执行调整
range.trimBoundary();
//调整之后, 容器节点变成了i节点
//<b>xxx[<i>xxxxx</i>]xxx</b>
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
ignoreEnd | Boolean | 是否忽略对结束边界的调整 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | //选区示例
<b>xxx<i>[xxxxx]</i>xxx</b>
<script>
//未调整前, 选区的开始容器和结束都是文本节点
//执行调整
range.trimBoundary( true );
//调整之后, 开始容器节点变成了i节点
//但是, 结束容器没有发生变化
//<b>xxx[<i>xxxxx]</i>xxx</b>
</script>
|
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
参数名 | 类型 | 描述 |
---|---|---|
ignoreCollapsed | Boolean | 是否忽略选区的闭合状态, 如果该参数取值为true, 则 不论选区是否闭合, 都会执行该操作, 反之, 则不会对闭合的选区执行该操作 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要插入的节点 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
参数名 | 类型 | 描述 |
---|---|---|
toEnd | Boolean | 是否向后闭合, 如果为true, 则闭合选区时, 将向结束容器方向闭合, 反之,则向开始容器方向闭合 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
参数名 | 类型 | 描述 |
---|---|---|
toBlock | Boolean | 是否要求扩大之后的父节点必须是block节点 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
参数名 | 类型 | 描述 |
---|---|---|
tagName | String | 需要添加的标签名 |
1 | <p>xxxx[xxxx]x</p> ==> range.applyInlineStyle("strong") ==> <p>xxxx[<strong>xxxx</strong>]x</p>
|
参数名 | 类型 | 描述 |
---|---|---|
tagName | String | 需要添加的标签名 |
attrs | Object | 跟随新添加的标签的属性 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前选区 |
1 2 3 4 5 6 7 8 9 10 | <p>xxxx[xxxx]x</p>
==>
<!-- 执行操作 -->
range.applyInlineStyle("strong",{"style":"font-size:12px"})
==>
<p>xxxx[<strong style="font-size:12px">xxxx</strong>]x</p>
|
参数名 | 类型 | 描述 |
---|---|---|
tagName | String | 需要移除的标签名 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前的range对象 |
1 | xx[x<span>xxx<em>yyy</em>zz]z</span> => range.removeInlineStyle(["em"]) => xx[x<span>xxxyyyzz]z</span>
|
类型 | 描述 |
---|---|
Node | NULL | 如果当前选中的是自闭合节点, 则返回该节点, 否则返回NULL |
参数名 | 类型 | 描述 |
---|---|---|
win | Window | 当前range对象所属的window对象 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前Range对象 |
参数名 | 类型 | 描述 |
---|---|---|
win | Window | 当前range对象所属的window对象 |
offset | Number | 距离range开始位置处的偏移量, 如果为正数, 则向下偏移, 反之, 则向上偏移 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前Range对象 |
参数名 | 类型 | 描述 |
---|
类型 | 描述 |
---|---|
Boolean | 如果给定的Range对象与当前Range对象表示的是同一个选区, 则返回true, 否则返回false |
参数名 | 类型 | 描述 |
---|---|---|
doFn | Function | 对每个遍历的节点要执行的方法, 该方法接受当前遍历的节点作为其参数 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <body>
<!-- 选区开始 -->
<span></span>
<a></a>
<!-- 选区结束 -->
</body>
<script>
//output: <span></span><a></a>
console.log( range.cloneContents() );
range.traversal( function ( node ) {
if ( node.nodeType === 1 ) {
node.className = "test";
}
} );
//output: <span class="test"></span><a class="test"></a>
console.log( range.cloneContents() );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
doFn | Function | 对每个遍历的节点要执行的方法, 该方法接受当前遍历的节点作为其参数 |
filterFn | Function | 过滤器, 该函数接受当前遍历的节点作为参数, 如果该节点满足过滤 规则, 请返回true, 该节点会触发doFn, 否则, 请返回false, 则该节点不 会触发doFn。 |
类型 | 描述 |
---|---|
UE.dom.Range | 当前range对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <body>
<!-- 选区开始 -->
<span></span>
<a></a>
<!-- 选区结束 -->
</body>
<script>
//output: <span></span><a></a>
console.log( range.cloneContents() );
range.traversal( function ( node ) {
node.className = "test";
}, function ( node ) {
return node.nodeType === 1;
} );
//output: <span class="test"></span><a class="test"></a>
console.log( range.cloneContents() );
</script>
|
方法签名 | 静态 | 描述 |
---|---|---|
getNative() | 否 | 获取原生seleciton对象 |
getIERange() | 否 | 获得ieRange |
cache() | 否 | 缓存当前选区的range和选区的开始节点 |
getStartElementPath() | 否 | 获取选区开始位置的父节点到body |
clear() | 否 | 清空缓存 |
isFocus() | 否 | 编辑器是否得到了选区 |
getRange() | 否 | 获取选区对应的Range |
getStart() | 否 | 获取开始元素,用于状态反射 |
getText() | 否 | 得到选区中的文本 |
clearRange() | 否 | 清除选区 |
类型 | 描述 |
---|---|
Object | 获得selection对象 |
1 | editor.selection.getNative();
|
类型 | 描述 |
---|---|
Object | 返回ie原生的Range |
1 | editor.selection.getIERange();
|
类型 | 描述 |
---|---|
Array | 返回父节点集合 |
1 | editor.selection.getStartElementPath();
|
类型 | 描述 |
---|---|
Object | 得到Range对象 |
1 | editor.selection.getRange();
|
类型 | 描述 |
---|---|
Element | 获得开始元素 |
1 | editor.selection.getStart();
|
类型 | 描述 |
---|---|
String | 选区中包含的文本 |
1 | editor.selection.getText();
|
1 | editor.selection.clearRange();
|
方法签名 | 静态 | 描述 |
---|---|---|
request(URLString url, Object ajaxOptions) | 是 | 根据给定的参数项,向指定的url发起一个ajax请求。 ajax请求完成后,会根据请求结果调用相应回调: 如果请求 成功, 则调用onsuccess回调, 失败则调用 onerror 回调 |
request(Object ajaxOptions) | 是 | 根据给定的参数项发起一个ajax请求, 参数项里必须包含一个url地址。 ajax请求完成后,会根据请求结果调用相应回调: 如果请求 成功, 则调用onsuccess回调, 失败则调用 onerror 回调。 |
参数名 | 类型 | 描述 |
---|---|---|
url | URLString | ajax请求的url地址 |
ajaxOptions | Object | ajax请求选项的键值对,支持的选项如下: |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | //向sayhello.php发起一个异步的Ajax GET请求, 请求超时时间为10s, 请求完成后执行相应的回调。
UE.ajax.requeset( 'sayhello.php', {
//请求方法。可选值: 'GET', 'POST',默认值是'POST'
method: 'GET',
//超时时间。 默认为5000, 单位是ms
timeout: 10000,
//是否是异步请求。 true为异步请求, false为同步请求
async: true,
//请求携带的数据。如果请求为GET请求, data会经过stringify后附加到请求url之后。
data: {
name: 'ueditor'
},
//请求成功后的回调, 该回调接受当前的XMLHttpRequest对象作为参数。
onsuccess: function ( xhr ) {
console.log( xhr.responseText );
},
//请求失败或者超时后的回调。
onerror: function ( xhr ) {
alert( 'Ajax请求失败' );
}
} );
|
参数名 | 类型 | 描述 |
---|---|---|
ajaxOptions | Object | ajax请求选项的键值对,支持的选项如下: |
1 2 3 4 5 6 7 | //向sayhello.php发起一个异步的Ajax POST请求, 请求超时时间为5s, 请求完成后不执行任何回调。
UE.ajax.requeset( 'sayhello.php', {
//请求的地址, 该项是必须的。
url: 'sayhello.php'
} );
|
属性名 | 类型 | 静态 | 描述 |
---|---|---|---|
ie | boolean | 是 | 检测当前浏览器是否为IE |
opera | boolean | 是 | 检测当前浏览器是否为Opera |
webkit | boolean | 是 | 检测当前浏览器是否是webkit内核的浏览器 |
mac | boolean | 是 | 检测当前浏览器是否是运行在mac平台下 |
quirks | boolean | 是 | 检测当前浏览器是否处于“怪异模式”下 |
gecko | boolean | 是 | 检测当前浏览器内核是否是gecko内核 |
ie9Compat | boolean | 是 | 检测浏览器模式是否为 IE9 兼容模式 |
ie8 | boolean | 是 | 检测浏览器是否是IE8浏览器 |
ie8Compat | boolean | 是 | 检测浏览器模式是否为 IE8 兼容模式 |
ie7Compat | boolean | 是 | 检测浏览器模式是否为 IE7 兼容模式 |
ie6Compat | boolean | 是 | 检测浏览器模式是否为 IE6 模式 或者怪异模式 |
chrome | Number | 是 | 检测当前浏览器是否为Chrome, 如果是,则返回Chrome的大版本号 |
safari | Number | 是 | 检测当前浏览器是否为Safari, 如果是,则返回Safari的大版本号 |
version | Number | 是 | 检测当前浏览器版本号 |
isCompatible | boolean | 是 | 检测当前浏览器是否能够与UEditor良好兼容 |
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器是否为IE |
1 2 3 | if ( UE.browser.ie ) {
console.log( '当前浏览器是IE' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器是否为Opera |
1 2 3 | if ( UE.browser.opera ) {
console.log( '当前浏览器是Opera' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器是否是webkit内核的浏览器 |
1 2 3 | if ( UE.browser.webkit ) {
console.log( '当前浏览器是webkit内核浏览器' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器是否是运行在mac平台下 |
1 2 3 | if ( UE.browser.mac ) {
console.log( '当前浏览器运行在mac平台下' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器是否处于“怪异模式”下 |
1 2 3 | if ( UE.browser.quirks ) {
console.log( '当前浏览器运行处于“怪异模式”' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器内核是否是gecko内核 |
1 2 3 | if ( UE.browser.gecko ) {
console.log( '当前浏览器内核是gecko内核' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测浏览器模式是否为 IE9 兼容模式 |
1 2 3 | if ( UE.browser.ie9Compat ) {
console.log( '当前浏览器运行在IE9兼容模式下' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测浏览器是否是IE8浏览器 |
1 2 3 | if ( UE.browser.ie8 ) {
console.log( '当前浏览器是IE8浏览器' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测浏览器模式是否为 IE8 兼容模式 |
1 2 3 | if ( UE.browser.ie8Compat ) {
console.log( '当前浏览器运行在IE8兼容模式下' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测浏览器模式是否为 IE7 兼容模式 |
1 2 3 | if ( UE.browser.ie7Compat ) {
console.log( '当前浏览器运行在IE7兼容模式下' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测浏览器模式是否为 IE6 模式 或者怪异模式 |
1 2 3 | if ( UE.browser.ie6Compat ) {
console.log( '当前浏览器运行在IE6模式或者怪异模式下' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
Number | 无 | 检测当前浏览器是否为Chrome, 如果是,则返回Chrome的大版本号 |
1 2 3 | if ( UE.browser.chrome ) {
console.log( '当前浏览器是Chrome' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
Number | 无 | 检测当前浏览器是否为Safari, 如果是,则返回Safari的大版本号 |
1 2 3 | if ( UE.browser.safari ) {
console.log( '当前浏览器是Safari' );
}
|
类型 | 默认值 | 描述 |
---|---|---|
Number | 无 | 检测当前浏览器版本号 |
1 | console.log( '当前浏览器版本号是: ' + UE.browser.version );
|
类型 | 默认值 | 描述 |
---|---|---|
boolean | 无 | 检测当前浏览器是否能够与UEditor良好兼容 |
1 2 3 | if ( UE.browser.isCompatible ) {
console.log( '浏览器与UEditor能够良好兼容' );
}
|
参数名 | 类型 | 描述 |
---|---|---|
nodeA | Node | 需要查询位置关系的节点A |
nodeB | Node | 需要查询位置关系的节点B |
类型 | 描述 |
---|---|
Number | 节点A与节点B的关系 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | //output: 20
var position = UE.dom.domUtils.getPosition( document.documentElement, document.body );
switch ( position ) {
//0
case POSITION_IDENTICAL:
console.log('元素相同');
break;
//1
case POSITION_DISCONNECTED:
console.log('两个节点在不同的文档中');
break;
//2
case POSITION_FOLLOWING:
console.log('节点A在节点B之后');
break;
//4
case POSITION_PRECEDING;
console.log('节点A在节点B之前');
break;
//8
case POSITION_IS_CONTAINED:
console.log('节点A被节点B包含');
break;
case 10:
console.log('节点A被节点B包含且节点A在节点B之后');
break;
//16
case POSITION_CONTAINS:
console.log('节点A包含节点B');
break;
case 20:
console.log('节点A包含节点B且节点A在节点B之前');
break;
}
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要检测的节点对象 |
mergeTextNode | Boolean | 是否合并多个连续的文本节点为一个节点 |
类型 | 描述 |
---|---|
Number | 该节点在父节点中的位置 |
1 2 3 4 5 6 7 8 9 10 11 | var node = document.createElement("div");
node.appendChild( document.createTextNode( "hello" ) );
node.appendChild( document.createTextNode( "world" ) );
node.appendChild( node = document.createElement( "div" ) );
//output: 2
console.log( UE.dom.domUtils.getNodeIndex( node ) );
//output: 1
console.log( UE.dom.domUtils.getNodeIndex( node, true ) );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要检测的节点对象 |
doc | DomDocument | 需要检测的document对象 |
类型 | 描述 |
---|---|
Boolean | 该节点node是否在给定的document的dom树上 |
1 2 3 4 5 6 7 8 9 | var node = document.createElement("div");
//output: false
console.log( UE.do.domUtils.inDoc( node, document ) );
document.body.appendChild( node );
//output: true
console.log( UE.do.domUtils.inDoc( node, document ) );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要查找的节点 |
filterFn | Function | 自定义的过滤方法。 |
类型 | 描述 |
---|---|
Node | Null | 如果找到符合过滤条件的节点, 就返回该节点, 否则返回NULL |
1 2 3 4 5 6 7 8 9 | var filterNode = UE.dom.domUtils.findParent( document.body.firstChild, function ( node ) {
//由于查找的终点是body节点, 所以永远也不会匹配当前过滤器的条件, 即这里永远会返回false
return node.tagName === "HTML";
} );
//output: true
console.log( filterNode === null );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要查找的节点 |
filterFn | Function | 自定义的过滤方法。 |
includeSelf | Boolean | 查找过程是否包含自身 |
类型 | 描述 |
---|---|
Node | Null | 如果找到符合过滤条件的节点, 就返回该节点, 否则返回NULL |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body>
<div id="test">
</div>
<script type="text/javascript">
//output: DIV, BODY
var filterNode = UE.dom.domUtils.findParent( document.getElementById( "test" ), function ( node ) {
console.log( node.tagName );
return false;
}, true );
</script>
</body>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要查找的节点对象 |
tagNames | Array | 需要查找的父节点的名称数组 |
类型 | 描述 |
---|---|
Node | NULL | 如果找到符合条件的节点, 则返回该节点, 否则返回NULL |
1 2 3 | var node = UE.dom.domUtils.findParentByTagName( document.getElementsByTagName("div")[0], [ "BODY" ] );
//output: BODY
console.log( node.tagName );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要查找的节点对象 |
tagNames | Array | 需要查找的父节点的名称数组 |
includeSelf | Boolean | 查找过程是否包含node节点自身 |
类型 | 描述 |
---|---|
Node | NULL | 如果找到符合条件的节点, 则返回该节点, 否则返回NULL |
1 2 3 4 | var queryTarget = document.getElementsByTagName("div")[0];
var node = UE.dom.domUtils.findParentByTagName( queryTarget, [ "DIV" ], true );
//output: true
console.log( queryTarget === node );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要获取其后的兄弟节点的节点对象 |
类型 | 描述 |
---|---|
Node | NULL | 如果找满足条件的节点, 则返回该节点, 否则返回NULL |
1 2 3 4 5 6 7 8 9 10 11 12 | <body>
<div id="test">
<span></span>
</div>
<i>xxx</i>
</body>
<script>
//output: i节点
console.log( UE.dom.domUtils.getNextDomNode( document.getElementById( "test" ) ) );
</script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body>
<div>
<span></span>
<i id="test">xxx</i>
</div>
<b>xxx</b>
</body>
<script>
//由于id为test的i节点之后没有兄弟节点, 则查找其父节点(div)后面的兄弟节点
//output: b节点
console.log( UE.dom.domUtils.getNextDomNode( document.getElementById( "test" ) ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要获取其后的兄弟节点的节点对象 |
startFromChild | Boolean | 查找过程是否从其子节点开始 |
类型 | 描述 |
---|---|
Node | NULL | 如果找满足条件的节点, 则返回该节点, 否则返回NULL |
参数名 | 类型 | 描述 |
---|---|---|
nodeA | Node | 第一个节点 |
nodeB | Node | 第二个节点 |
类型 | 描述 |
---|---|
Node | NULL | 如果未找到公共节点, 返回NULL, 否则返回最近的公共祖先节点。 |
1 2 3 | var commonAncestor = UE.dom.domUtils.getCommonAncestor( document.body, document.body.firstChild );
//output: true
console.log( commonAncestor.tagName.toLowerCase() === 'body' );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 执行的节点对象, 如果该节点的左右连续的兄弟节点是空的inline节点, 则这些兄弟节点将被删除 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body>
<div></div>
<span id="test"></span>
<i></i>
<b></b>
<em>xxx</em>
<span></span>
</body>
<script>
UE.dom.domUtils.clearEmptySibling( document.getElementById( "test" ) );
//output: <div></div><span id="test"></span><em>xxx</em><span></span>
console.log( document.body.innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
nodeA | Node | 需要比较的节点 |
nodeB | Node | 需要比较的节点 |
类型 | 描述 |
---|---|
Boolean | 两个节点是否具有相同的标签名、属性名以及属性值 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span style="font-size:12px">ssss</span>
<span style="font-size:12px">bbbbb</span>
<span style="font-size:13px">ssss</span>
<span style="font-size:14px">bbbbb</span>
<script>
var nodes = document.getElementsByTagName( "span" );
//output: true
console.log( UE.dom.domUtils.isSameElement( nodes[0], nodes[1] ) );
//output: false
console.log( UE.dom.domUtils.isSameElement( nodes[2], nodes[3] ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
nodeA | Node | 需要比较的节点 |
nodeB | Node | 需要比较的节点 |
类型 | 描述 |
---|---|
Boolean | 两个节点是否具有相同的style属性值 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span style="font-size:12px">ssss</span>
<span style="font-size:12px">bbbbb</span>
<span style="font-size:13px">ssss</span>
<span style="font-size:14px">bbbbb</span>
<script>
var nodes = document.getElementsByTagName( "span" );
//output: true
console.log( UE.dom.domUtils.isSameStyle( nodes[0], nodes[1] ) );
//output: false
console.log( UE.dom.domUtils.isSameStyle( nodes[2], nodes[3] ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要检测的节点对象 |
类型 | 描述 |
---|---|
Boolean | 是否是block元素节点 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span id="test1" style="display: block"></span>
<span id="test2"></span>
<div id="test3" style="display: inline"></div>
<script>
//output: true
console.log( UE.dom.domUtils.isBlockElm( document.getElementById("test1") ) );
//output: false
console.log( UE.dom.domUtils.isBlockElm( document.getElementById("test2") ) );
//output: true
console.log( UE.dom.domUtils.isBlockElm( document.getElementById("test3") ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 作为分界的节点对象 |
parent | Node | 该节点必须是node节点的祖先节点, 且是block节点。 |
类型 | 描述 |
---|---|
Node | 给定的node分界节点 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var node = document.createElement("span"),
wrapNode = document.createElement( "div" ),
parent = document.createElement("p");
parent.appendChild( node );
wrapNode.appendChild( parent );
//拆分前
//output: <p><span></span></p>
console.log( wrapNode.innerHTML );
UE.dom.domUtils.breakParent( node, parent );
//拆分后
//output: <p></p><span></span><p></p>
console.log( wrapNode.innerHTML );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要执行删除操作的元素对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var node = document.createElement("div");
node.appendChild( document.createTextNode( "" ) );
node.appendChild( document.createElement("div") );
node.appendChild( document.createTextNode( "" ) );
//3
console.log( node.childNodes.length );
UE.dom.domUtils.trimWhiteTextNode( node );
//1
console.log( node.childNodes.length );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要提取的元素对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="parent">
<div id="sub">
<span id="child"></span>
</div>
</div>
<script>
var child = document.getElementById( "child" );
//output: sub
console.log( child.parentNode.id );
UE.dom.domUtils.mergeToParent( child );
//output: parent
console.log( child.parentNode.id );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要合并的目标节点 |
1 2 3 4 5 6 7 8 | <b>xxxx</b><b id="test">ooo</b><b>xxxx</b>
<script>
var demoNode = document.getElementById("test");
UE.dom.domUtils.mergeSibling( demoNode );
//output: xxxxoooxxxx
console.log( demoNode.innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要合并的目标节点 |
ignorePre | Boolean | 是否忽略合并左节点 |
ignoreNext | Boolean | 是否忽略合并右节点 |
1 2 3 4 5 6 7 8 | <b>xxxx</b><b id="test">ooo</b><b>xxxx</b>
<script>
var demoNode = document.getElementById("test");
UE.dom.domUtils.mergeSibling( demoNode, false, true );
//output: xxxxooo
console.log( demoNode.innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要执行操作的dom元素 |
1 | UE.dom.domUtils.unSelectable( document.body );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要删除属性的节点对象 |
attrNames | String | 可以是空格隔开的多个属性名称,该操作将会依次删除相应的属性 |
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="wrap">
<span style="font-size:14px;" id="test" name="followMe">xxxxx</span>
</div>
<script>
UE.dom.domUtils.removeAttributes( document.getElementById( "test" ), "id name" );
//output: <span style="font-size:14px;">xxxxx</span>
console.log( document.getElementById("wrap").innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Node | 需要删除属性的节点对象 |
attrNames | Array | 需要删除的属性名数组 |
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="wrap">
<span style="font-size:14px;" id="test" name="followMe">xxxxx</span>
</div>
<script>
UE.dom.domUtils.removeAttributes( document.getElementById( "test" ), ["id", "name"] );
//output: <span style="font-size:14px;">xxxxx</span>
console.log( document.getElementById("wrap").innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
doc | DomDocument | 新创建的元素属于该document节点创建 |
tagName | String | 需要创建的元素的标签名 |
attrs | Object | 新创建的元素的属性key-value集合 |
类型 | 描述 |
---|---|
Element | 新创建的元素对象 |
1 2 3 4 5 6 7 8 9 | var ele = UE.dom.domUtils.createElement( document, 'div', {
id: 'test'
} );
//output: DIV
console.log( ele.tagName );
//output: test
console.log( ele.id );
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要设置属性的元素对象 |
attrs | Object | 需要设置的属性名-值对 |
类型 | 描述 |
---|---|
Element | 设置属性的元素对象 |
1 2 3 4 5 6 7 8 9 10 11 12 | <span id="test"></span>
<script>
var testNode = UE.dom.domUtils.setAttributes( document.getElementById( "test" ), {
id: 'demo'
} );
//output: demo
console.log( testNode.id );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
element | Element | 需要获取样式的元素对象 |
styleName | String | 需要获取的样式名 |
类型 | 描述 |
---|---|
String | 获取到的样式值 |
1 2 3 4 5 6 7 8 9 10 11 12 | <style type="text/css">
#test {
font-size: 15px;
}
</style>
<span id="test"></span>
<script>
//output: 15px
console.log( UE.dom.domUtils.getComputedStyle( document.getElementById( "test" ), 'font-size' ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
ele | Element | 需要删除class的元素节点 |
classNames | String | 需要删除的className, 多个className之间以空格分开 |
1 2 3 4 5 6 7 8 9 10 11 | <span id="test" class="test1 test2 test3">xxx</span>
<script>
var testNode = document.getElementById( "test" );
UE.dom.domUtils.removeClasses( testNode, "test1 test2" );
//output: test3
console.log( testNode.className );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
ele | Element | 需要删除class的元素节点 |
classNames | Array | 需要删除的className数组 |
1 2 3 4 5 6 7 8 9 10 11 | <span id="test" class="test1 test2 test3">xxx</span>
<script>
var testNode = document.getElementById( "test" );
UE.dom.domUtils.removeClasses( testNode, ["test1", "test2"] );
//output: test3
console.log( testNode.className );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
ele | Node | 需要增加className的元素 |
classNames | String | 需要添加的className, 多个className之间以空格分割 |
1 2 3 4 5 6 7 8 9 10 11 | <span id="test" class="cls1 cls2"></span>
<script>
var testNode = document.getElementById("test");
UE.dom.domUtils.addClass( testNode, "cls2 cls3 cls4" );
//output: cl1 cls2 cls3 cls4
console.log( testNode.className );
<script>
|
参数名 | 类型 | 描述 |
---|---|---|
ele | Node | 需要增加className的元素 |
classNames | Array | 需要添加的className的数组 |
1 2 3 4 5 6 7 8 9 10 11 | <span id="test" class="cls1 cls2"></span>
<script>
var testNode = document.getElementById("test");
UE.dom.domUtils.addClass( testNode, ["cls2", "cls3", "cls4"] );
//output: cl1 cls2 cls3 cls4
console.log( testNode.className );
<script>
|
参数名 | 类型 | 描述 |
---|---|---|
ele | Node | 需要检测的元素 |
classNames | String | 需要检测的className, 多个className之间用空格分割 |
类型 | 描述 |
---|---|
Boolean | 元素是否包含所有给定的className |
1 2 3 4 5 6 7 8 9 10 11 | <span id="test1" class="cls1 cls2"></span>
<script>
var test1 = document.getElementById("test1");
//output: false
console.log( UE.dom.domUtils.hasClass( test1, "cls2 cls1 cls3" ) );
//output: true
console.log( UE.dom.domUtils.hasClass( test1, "cls2 cls1" ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
ele | Node | 需要检测的元素 |
classNames | Array | 需要检测的className数组 |
类型 | 描述 |
---|---|
Boolean | 元素是否包含所有给定的className |
1 2 3 4 5 6 7 8 9 10 11 | <span id="test1" class="cls1 cls2"></span>
<script>
var test1 = document.getElementById("test1");
//output: false
console.log( UE.dom.domUtils.hasClass( test1, [ "cls2", "cls1", "cls3" ] ) );
//output: true
console.log( UE.dom.domUtils.hasClass( test1, [ "cls2", "cls1" ]) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
evt | Event | 需要阻止默认行为的事件对象 |
1 | UE.dom.domUtils.preventDefault( evt );
|
参数名 | 类型 | 描述 |
---|---|---|
element | Element | 需要删除样式的元素 |
styleName | String | 需要删除的样式名 |
1 2 3 4 5 6 7 8 9 10 11 12 | <span id="test" style="color: red; background: blue;"></span>
<script>
var testNode = document.getElementById("test");
UE.dom.domUtils.removeStyle( testNode, 'color' );
//output: background: blue;
console.log( testNode.style.cssText );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
element | Element | 需要获取属性值的元素 |
styleName | String | 需要获取的style的名称 |
类型 | 描述 |
---|---|
String | 该元素包含指定的style属性值 |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="test" style="color: red;"></div>
<script>
var testNode = document.getElementById( "test" );
//output: red
console.log( UE.dom.domUtils.getStyle( testNode, "color" ) );
//output: ""
console.log( UE.dom.domUtils.getStyle( testNode, "background" ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
element | Element | 需要设置样式的元素 |
styleName | String | 样式名 |
styleValue | String | 样式值 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="test"></div>
<script>
var testNode = document.getElementById( "test" );
//output: ""
console.log( testNode.style.color );
UE.dom.domUtils.setStyle( testNode, 'color', 'red' );
//output: "red"
console.log( testNode.style.color );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
element | Element | 需要设置样式的元素 |
styles | Object | 样式名值对 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="test"></div>
<script>
var testNode = document.getElementById( "test" );
//output: ""
console.log( testNode.style.color );
UE.dom.domUtils.setStyles( testNode, {
'color': 'red'
} );
//output: "red"
console.log( testNode.style.color );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
node | Element | 需要检测的元素 |
fn | Function | 过滤器, 要求对符合条件的子节点返回true, 反之则要求返回false |
类型 | 描述 |
---|---|
Number | 符合过滤条件的node元素的子节点数量 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="test">
<span></span>
</div>
<script>
//output: 1
console.log( UE.dom.domUtils.getChildCount( document.getElementById("test"), function ( node ) {
return node.nodeType === 1;
} ) );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
element | Element | 需要设置偏移量的元素 |
offset | Object | 偏移量, 形如{ left: 100, top: 50 }的一个键值对, 表示该元素将在 现有的位置上向水平方向偏移offset.left的距离, 在竖直方向上偏移 offset.top的距离 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="test" style="top: 100px; left: 50px; position: absolute;"></div>
<script>
var testNode = document.getElementById("test");
UE.dom.domUtils.setViewportOffset( testNode, {
left: 200,
top: 50
} );
//output: top: 300px; left: 100px; position: absolute;
console.log( testNode.style.cssText );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
src | Node | 源节点, 该节点下的所有子节点将被移除 |
tag | Node | 目标节点, 从源节点移除的子节点将被追加到该节点下 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="test1">
<span></span>
</div>
<div id="test2">
<div></div>
</div>
<script>
var test1 = document.getElementById("test1"),
test2 = document.getElementById("test2");
UE.dom.domUtils.moveChild( test1, test2 );
//output: ""(空字符串)
console.log( test1.innerHTML );
//output: "<div></div><span></span>"
console.log( test2.innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
src | Node | 源节点, 该节点下的所有子节点将被移除 |
tag | Node | 目标节点, 从源节点移除的子节点将被附加到该节点下 |
dir | Boolean | 附加方式, 如果为true, 则附加进去的节点将被放到目标节点的顶部, 反之,则放到末尾 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="test1">
<span></span>
</div>
<div id="test2">
<div></div>
</div>
<script>
var test1 = document.getElementById("test1"),
test2 = document.getElementById("test2");
UE.dom.domUtils.moveChild( test1, test2, true );
//output: ""(空字符串)
console.log( test1.innerHTML );
//output: "<span></span><div></div>"
console.log( test2.innerHTML );
</script>
|
参数名 | 类型 | 描述 |
---|---|---|
nodeList | Array | 需要过滤的节点数组 |
fn | Function | 过滤器, 对符合条件的节点, 执行结果返回true, 反之则返回false |
类型 | 描述 |
---|---|
Node | NULL | 如果找到符合过滤条件的节点, 则返回该节点, 否则返回NULL |
1 2 3 4 5 6 7 | var divNodes = document.getElementsByTagName("div");
divNodes = [].slice.call( divNodes, 0 );
//output: null
console.log( UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
return node.tagName.toLowerCase() !== 'div';
} ) );
|
参数名 | 类型 | 描述 |
---|---|---|
nodeList | Array | 需要过滤的节点数组 |
tagNames | String | 需要匹配的标签名, 多个标签名之间用空格分割 |
类型 | 描述 |
---|---|
Node | NULL | 如果找到标签名匹配的节点, 则返回该节点, 否则返回NULL |
1 2 3 4 5 | var divNodes = document.getElementsByTagName("div");
divNodes = [].slice.call( divNodes, 0 );
//output: null
console.log( UE.dom.domUtils.filterNodeList( divNodes, 'a span' ) );
|
参数名 | 类型 | 描述 |
---|---|---|
nodeList | Array | 需要过滤的节点数组 |
fn | Function | 过滤器, 对符合条件的节点, 执行结果返回true, 反之则返回false |
forAll | Boolean | 是否返回整个节点数组, 如果该参数为false, 则返回节点集合中的第一个节点 |
类型 | 描述 |
---|---|
Array | Node | NULL | 如果找到符合过滤条件的节点, 则根据参数forAll的值决定返回满足 过滤条件的节点数组或第一个节点, 否则返回NULL |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var divNodes = document.getElementsByTagName("div");
divNodes = [].slice.call( divNodes, 0 );
//output: 3(假定有3个div)
console.log( divNodes.length );
var nodes = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
return node.tagName.toLowerCase() === 'div';
}, true );
//output: 3
console.log( nodes.length );
var node = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
return node.tagName.toLowerCase() === 'div';
}, false );
//output: div
console.log( node.nodeName );
|
参数名 | 类型 | 描述 |
---|---|---|
rng | UE.dom.Range | 需要判断的range对象, 该对象的startContainer不能为NULL |
类型 | 描述 |
---|---|
Number | 如果给定的选取range对象是在node内部的最末端, 则返回1, 否则返回0 |
方法签名 | 静态 | 描述 |
---|---|---|
each(Object obj, Function iterator) | 是 | 用给定的迭代器遍历对象 |
each(Array array, Function iterator) | 是 | 用给定的迭代器遍历数组或类数组对象 |
makeInstance(Object protoObject) | 是 | 以给定对象作为原型创建一个新对象 |
extend(Object target, Object source) | 是 | 将source对象中的属性扩展到target对象上 |
extend(Object target, Object source, Boolean isKeepTarget) | 是 | 将source对象中的属性扩展到target对象上, 根据指定的isKeepTarget值决定是否保留目标对象中与 源对象属性名相同的属性值。 |
extend2(Object target, Object... source) | 是 | 将给定的多个对象的属性复制到目标对象target上 |
inherits(Object subClass, Object superClass) | 是 | 模拟继承机制, 使得subClass继承自superClass |
bind(Function fn, Object content) | 是 | 用指定的context对象作为函数fn的上下文 |
defer(Function fn, int delay) | 是 | 创建延迟指定时间后执行的函数fn |
defer(Function fn, int delay, Boolean exclusion) | 是 | 创建延迟指定时间后执行的函数fn, 如果在延迟时间内再次执行该方法, 将会根据指定的exclusion的值, 决定是否取消前一次函数的执行, 如果exclusion的值为true, 则取消执行,反之,将继续执行前一个方法。 |
indexOf(Array array, * item) | 是 | 获取元素item在数组array中首次出现的位置, 如果未找到item, 则返回-1 |
indexOf(Array array, * item, int start) | 是 | 获取元素item数组array中首次出现的位置, 如果未找到item, 则返回-1。通过start的值可以指定搜索的起始位置。 |
removeItem(Array array, * item) | 是 | 移除数组array中所有的元素item |
trim(String str) | 是 | 删除字符串str的首尾空格 |
listToMap(String str) | 是 | 将字符串str以','分隔成数组后,将该数组转换成哈希对象, 其生成的hash对象的key为数组中的元素, value为1 |
listToMap(Array arr) | 是 | 将字符串数组转换成哈希对象, 其生成的hash对象的key为数组中的元素, value为1 |
unhtml(String str) | 是 | 将str中的html符号转义,将转义“',&,<,",>”五个字符 |
html(String str) | 是 | 将str中的转义字符还原成html字符 |
cssStyleToDomStyle(String cssName) | 是 | 将css样式转换为驼峰的形式 |
loadFile(DomDocument document, Object options) | 是 | 动态加载文件到doc中 |
loadFile(DomDocument document, Object options, Function fn) | 是 | 动态加载文件到doc中,加载成功后执行的回调函数fn |
isEmptyObject(* obj) | 是 | 判断obj对象是否为空 |
clone(Object source) | 是 | 克隆对象 |
clone(Object source, Object target) | 是 | 深度克隆对象,将source的属性克隆到target对象, 会覆盖target重名的属性。 |
transUnitToPx() | 是 | 把cm/pt为单位的值转换为px为单位的值 |
domReady(Function fn) | 是 | 在dom树ready之后执行给定的回调函数 |
isString(* object) | 是 | 判断给定的对象是否是字符串 |
isArray(* object) | 是 | 判断给定的对象是否是数组 |
isFunction(* object) | 是 | 判断给定的对象是否是一个Function |
isNumber(* object) | 是 | 判断给定的对象是否是Number |
isRegExp(* object) | 是 | 判断给定的对象是否是一个正则表达式 |
isObject(* object) | 是 | 判断给定的对象是否是一个普通对象 |
参数名 | 类型 | 描述 |
---|---|---|
array | Array | 需要遍历的数组或者类数组 |
iterator | Function | 迭代器, 该方法接受两个参数, 第一个参数是当前所处理的value, 第二个参数是当前遍历对象的key |
1 2 3 4 5 6 7 8 | var divs = document.getElmentByTagNames( "div" );
//output: 0: DIV, 1: DIV ...
UE.utils.each( divs, funciton ( value, key ) {
console.log( key + ":" + value.tagName );
} );
|
参数名 | 类型 | 描述 |
---|---|---|
target | Object | 目标对象, 新的属性将附加到该对象上 |
source | Object | 源对象, 该对象的属性会被附加到target对象上 |
类型 | 描述 |
---|---|
Object | 返回target对象 |
1 2 3 4 5 6 7 | var target = { name: 'target', sex: 1 },
source = { name: 'source', age: 17 };
UE.utils.extend( target, source );
//output: { name: 'source', sex: 1, age: 17 }
console.log( target );
|
参数名 | 类型 | 描述 |
---|---|---|
target | Object | 目标对象, 新的属性将附加到该对象上 |
source | Object | 源对象, 该对象的属性会被附加到target对象上 |
isKeepTarget | Boolean | 是否保留目标对象中与源对象中属性名相同的属性 |
类型 | 描述 |
---|---|
Object | 返回target对象 |
1 2 3 4 5 6 7 | var target = { name: 'target', sex: 1 },
source = { name: 'source', age: 17 };
UE.utils.extend( target, source, true );
//output: { name: 'target', sex: 1, age: 17 }
console.log( target );
|
参数名 | 类型 | 描述 |
---|---|---|
target | Object | 目标对象, 新的属性将附加到该对象上 |
source | Object... | 源对象, 支持多个对象, 该对象的属性会被附加到target对象上 |
类型 | 描述 |
---|---|
Object | 返回target对象 |
1 2 3 4 5 6 7 8 | var target = {},
source1 = { name: 'source', age: 17 },
source2 = { title: 'dev' };
UE.utils.extend2( target, source1, source2 );
//output: { name: 'source', age: 17, title: 'dev' }
console.log( target );
|
参数名 | 类型 | 描述 |
---|---|---|
subClass | Object | 子类对象 |
superClass | Object | 超类对象 |
类型 | 描述 |
---|---|
Object | 继承superClass后的子类对象 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function SuperClass(){
this.name = "小李";
}
SuperClass.prototype = {
hello:function(str){
console.log(this.name + str);
}
}
function SubClass(){
this.name = "小张";
}
UE.utils.inherits(SubClass,SuperClass);
var sub = new SubClass();
//output: '小张早上好!
sub.hello("早上好!");
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | 需要绑定上下文的函数对象 |
content | Object | 函数fn新的上下文对象 |
类型 | 描述 |
---|---|
Function | 一个新的函数, 该函数作为原始函数fn的代理, 将完成fn的上下文调换工作。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var name = 'window',
newTest = null;
function test () {
console.log( this.name );
}
newTest = UE.utils.bind( test, { name: 'object' } );
//output: object
newTest();
//output: window
test();
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | 需要延迟执行的函数对象 |
delay | int | 延迟的时间, 单位是毫秒 |
类型 | 描述 |
---|---|
Function | 目标函数fn的代理函数, 只有执行该函数才能起到延时效果 |
1 2 3 4 5 6 7 8 9 10 11 | var start = 0;
function test(){
console.log( new Date() - start );
}
var testDefer = UE.utils.defer( test, 1000 );
//
start = new Date();
//output: (大约在1000毫秒之后输出) 1000
testDefer();
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | 需要延迟执行的函数对象 |
delay | int | 延迟的时间, 单位是毫秒 |
exclusion | Boolean | 如果在延迟时间内再次执行该函数,该值将决定是否取消执行前一次函数的执行, 值为true表示取消执行, 反之则将在执行前一次函数之后才执行本次函数调用。 |
类型 | 描述 |
---|---|
Function | 目标函数fn的代理函数, 只有执行该函数才能起到延时效果 |
1 2 3 4 5 6 7 8 9 | function test(){
console.log(1);
}
var testDefer = UE.utils.defer( test, 1000, true );
//output: (两次调用仅有一次输出) 1
testDefer();
testDefer();
|
参数名 | 类型 | 描述 |
---|---|---|
document | DomDocument | 需要加载资源文件的文档对象 |
options | Object | 加载资源文件的属性集合, 取值请参考代码示例 |
1 2 3 4 5 6 | UE.utils.loadFile( document, {
src:"test.js",
tag:"script",
type:"text/javascript",
defer:"defer"
} );
|
参数名 | 类型 | 描述 |
---|---|---|
document | DomDocument | 需要加载资源文件的文档对象 |
options | Object | 加载资源文件的属性集合, 该集合支持的值是script标签和style标签支持的所有属性。 |
fn | Function | 资源文件加载成功之后执行的回调 |
1 2 3 4 5 6 7 8 | UE.utils.loadFile( document, {
src:"test.js",
tag:"script",
type:"text/javascript",
defer:"defer"
}, function () {
console.log('加载成功');
} );
|
参数名 | 类型 | 描述 |
---|---|---|
obj | * | 需要判断的对象 |
类型 | 描述 |
---|---|
Boolean | 对象是否为空 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //output: true
console.log( UE.utils.isEmptyObject( {} ) );
//output: true
console.log( UE.utils.isEmptyObject( [] ) );
//output: true
console.log( UE.utils.isEmptyObject( "" ) );
//output: false
console.log( UE.utils.isEmptyObject( { key: 1 } ) );
//output: false
console.log( UE.utils.isEmptyObject( [1] ) );
//output: false
console.log( UE.utils.isEmptyObject( "1" ) );
|
参数名 | 类型 | 描述 |
---|
类型 | 描述 |
---|---|
String | 转换为px为计量单位的值的字符串 |
1 2 3 4 5 | //output: 500px
console.log( UE.utils.transUnitToPx( '20cm' ) );
//output: 27px
console.log( UE.utils.transUnitToPx( '20pt' ) );
|
参数名 | 类型 | 描述 |
---|---|---|
fn | Function | dom树ready之后的回调函数 |
1 2 3 4 5 | UE.utils.domReady( function () {
console.log('123');
} );
|