UEditor API (适用于1.2.6.1+)

命令列表

COMMAND通用方法
方法 描述
execCommand( String cmd, * params... )

执行命令的通用接口

该方法的第一个参数是需要执行的命令。剩下的可选的参数根据每个命令的不同而有一些差异, 具体请参照相应的命令详情。

queryCommandState( String cmd )

查询给定命令在当前选区内的状态。
通用的返回状态有:

  • 1 => 代表当前命令在当前选区内已执行
  • 0 => 代表当前命令在当前选区内未执行, 但处于可用状态
  • -1 => 代表当前命令在当前选区内处于不可用状态

queryCommandValue()

查询给定命令在当前选区内的值, 默认返回undefined。根据命令的不同其返回值也会不同。

以上列表中的方法对于每一个命令都是适用的。区别在于,对于不同的命令,其需要的参数可能会不同。

COMMAND列表
# 命令 描述
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 print 打印
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 插入百度应用

anchor

命令
1.2.6.1
插入锚点
方法列表
execCommand(String cmd, String name)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
name String 锚点名称字符串
示例
javascript代码:
1
2
 //editor 是编辑器实例
 editor.execCommand('anchor', 'anchor1');

autosubmit

命令
1.2.6.1
提交表单
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'autosubmit' );

autotypeset

命令
1.2.6.1
对当前编辑器的内容执行自动排版, 排版的行为根据config配置文件里的“autotypeset”选项进行控制。
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'autotypeset' );

bold

命令
1.2.6.1
字体加粗
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
  • 提示: 对已加粗的文本内容执行该命令, 将取消加粗
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
3
4
5
6
7
 //editor是编辑器实例
 //对当前选中的文本内容执行加粗操作
 //第一次执行, 文本内容加粗
 editor.execCommand( 'bold' );

 //第二次执行, 文本内容取消加粗
 editor.execCommand( 'bold' );

italic

命令
1.2.6.1
字体倾斜
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
  • 提示: 对已倾斜的文本内容执行该命令, 将取消倾斜
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
3
4
5
6
7
 //editor是编辑器实例
 //对当前选中的文本内容执行斜体操作
 //第一次操作, 文本内容将变成斜体
 editor.execCommand( 'italic' );

 //再次对同一文本内容执行, 则文本内容将恢复正常
 editor.execCommand( 'italic' );

subscript

命令
1.2.6.1
下标文本,与“superscript”命令互斥
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
  • 提示: 把选中的文本内容切换成下标文本, 如果当前选中的文本已经是下标, 则该操作会把文本内容还原成正常文本
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
3
4
5
6
7
 //editor是编辑器实例
 //对当前选中的文本内容执行下标操作
 //第一次操作, 文本内容将变成下标文本
 editor.execCommand( 'subscript' );

 //再次对同一文本内容执行, 则文本内容将恢复正常
 editor.execCommand( 'subscript' );

superscript

命令
1.2.6.1
上标文本,与“subscript”命令互斥
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
  • 提示: 把选中的文本内容切换成上标文本, 如果当前选中的文本已经是上标, 则该操作会把文本内容还原成正常文本
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
3
4
5
6
7
 //editor是编辑器实例
 //对当前选中的文本内容执行上标操作
 //第一次操作, 文本内容将变成上标文本
 editor.execCommand( 'superscript' );

 //再次对同一文本内容执行, 则文本内容将恢复正常
 editor.execCommand( 'superscript' );

blockquote

命令
1.2.6.1
添加引用
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'blockquote' );
execCommand(String cmd, Object attrs)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
attrs Object 节点属性
示例
javascript代码:
1
2
3
 editor.execCommand( 'blockquote',{
     style: "color: red;"
 } );

cleardoc

命令
1.2.6.1
清空文档
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
 //editor 是编辑器实例
 editor.execCommand('cleardoc');

touppercase

命令
1.2.6.1
把选区内文本变大写,与“tolowercase”命令互斥
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'touppercase' );

tolowercase

命令
1.2.6.1
把选区内文本变小写,与“touppercase”命令互斥
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'tolowercase' );

customstyle

命令
1.2.6.1
根据config配置文件里“customstyle”选项的值对匹配的标签执行样式替换。
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'customstyle' );

directionality

命令
1.2.6.1
文字输入方向
方法列表
execCommand(String cmdName, String forward)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmdName String 命令字符串
forward String 传入'ltr'表示从左向右输入,传入'rtl'表示从右向左输入
示例
javascript代码:
1
 editor.execCommand( 'directionality', 'ltr');
queryCommandValue(String cmdName)
命令方法 1.2.6.1
查询当前选区的文字输入方向
参数列表
参数名 类型 描述
cmdName String 命令字符串
返回值
类型 描述
String 返回'ltr'表示从左向右输入,返回'rtl'表示从右向左输入
示例
javascript代码:
1
 editor.queryCommandValue( 'directionality');

forecolor

命令
1.2.6.1
字体颜色
方法列表
execCommand(String cmd, String value)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
value String 色值(必须十六进制)
示例
javascript代码:
1
 editor.execCommand( 'forecolor', '#000' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
返回选区字体颜色
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回字体颜色
示例
javascript代码:
1
 editor.queryCommandValue( 'forecolor' );

backcolor

命令
1.2.6.1
字体背景颜色
方法列表
execCommand(String cmd, String value)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
value String 色值(必须十六进制)
示例
javascript代码:
1
 editor.execCommand( 'backcolor', '#000' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
返回选区字体颜色
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回字体背景颜色
示例
javascript代码:
1
 editor.queryCommandValue( 'backcolor' );

fontsize

命令
1.2.6.1
字体大小
方法列表
execCommand(String cmd, String value)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
value String 字体大小
示例
javascript代码:
1
 editor.execCommand( 'fontsize', '14px' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
返回选区字体大小
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回字体大小
示例
javascript代码:
1
 editor.queryCommandValue( 'fontsize' );

fontfamily

命令
1.2.6.1
字体样式
方法列表
execCommand(String cmd, String value)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
value String 字体样式
示例
javascript代码:
1
 editor.execCommand( 'fontfamily', '微软雅黑' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
返回选区字体样式
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回字体样式
示例
javascript代码:
1
 editor.queryCommandValue( 'fontfamily' );

underline

命令
1.2.6.1
字体下划线,与删除线互斥
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'underline' );

strikethrough

命令
1.2.6.1
字体删除线,与下划线互斥
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'strikethrough' );

fontborder

命令
1.2.6.1
字体边框
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'fontborder' );

formatmatch

命令
1.2.6.1
格式刷
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
  • 提示: 该操作不能复制段落格式
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
3
 //editor是编辑器实例
 //获取格式刷
 editor.execCommand( 'formatmatch' );

horizontal

命令
1.2.6.1
插入分割线
方法列表
execCommand(String cmdName)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmdName String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'horizontal' );

imagefloat

命令
1.2.6.1
图片对齐方式
方法列表
execCommand(String cmd, String align)
命令方法 1.2.6.1
执行当前命令
  • 提示: 值center为独占一行居中
参数列表
参数名 类型 描述
cmd String 命令字符串
align String 对齐方式,可传left、right、none、center
示例
javascript代码:
1
 editor.execCommand( 'imagefloat', 'center' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
如果选区所在位置是图片区域
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回图片对齐方式
示例
javascript代码:
1
 editor.queryCommandValue( 'imagefloat' );

insertimage

命令
1.2.6.1
插入图片
方法列表
execCommand(String cmd, Object opt)
命令方法 1.2.6.1
执行当前命令
  • 提示: 该命令第二个参数可接受一个图片配置项对象的数组,可以插入多张图片, 此时数组的每一个元素都是一个Object类型的图片属性集合。
参数列表
参数名 类型 描述
cmd String 命令字符串
opt Object 属性键值对,这些属性都将被复制到当前插入图片
示例
javascript代码:
1
2
3
4
5
 editor.execCommand( 'insertimage', {
     src:'a/b/c.jpg',
     width:'100',
     height:'100'
 } );
javascript代码:
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'
 }] );

indent

命令
1.2.6.1
缩进
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'indent' );

insertcode

命令
1.2.6.1
插入代码
方法列表
execCommand(String cmd, String lang)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
lang String 插入代码的语言
示例
javascript代码:
1
 editor.execCommand( 'insertcode', 'javascript' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
如果选区所在位置是插入插入代码区域,返回代码的语言
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回代码的语言
示例
javascript代码:
1
 editor.queryCommandValue( 'insertcode' );

inserthtml

命令
1.2.6.1
插入html代码
方法列表
execCommand(String cmd, String html)
命令方法 1.2.6.1
执行当前命令
  • 警告: 注意:该命令会对当前选区的位置,对插入的内容进行过滤转换处理。 过滤的规则遵循html语意化的原则。
参数列表
参数名 类型 描述
cmd String 命令字符串
html String 插入的html字符串
示例
javascript代码:
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>

insertparagraph

命令
1.2.6.1
插入段落
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
2
 //editor是编辑器实例
 editor.execCommand( 'insertparagraph' );

justify

命令
1.2.6.1
段落对齐方式
方法列表
execCommand(String cmd, String align)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
align String 对齐方式:left => 居左,right => 居右,center => 居中,justify => 两端对齐
示例
javascript代码:
1
 editor.execCommand( 'justify', 'center' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
如果选区所在位置是段落区域,返回当前段落对齐方式
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回段落对齐方式
示例
javascript代码:
1
 editor.queryCommandValue( 'justify' );

lineheight

命令
1.2.6.1
行距
方法列表
execCommand(String cmdName, String value)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmdName String 命令字符串
value String 传入的行高值, 该值是当前字体的倍数, 例如: 1.5, 1.75
示例
javascript代码:
1
 editor.execCommand( 'lineheight', 1.5);
queryCommandValue(String cmd)
命令方法 1.2.6.1
查询当前选区内容的行高大小
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回当前行高大小
示例
javascript代码:
1
 editor.queryCommandValue( 'lineheight' );

link

命令
1.2.6.1
插入超链接
方法列表
execCommand(String cmd, Object options)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
options Object 设置自定义属性,例如:url、title、target
示例
javascript代码:
1
2
3
4
5
 editor.execCommand( 'link', '{
     url:'ueditor.baidu.com',
     title:'ueditor',
     target:'_blank'
 }' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
返回当前选中的第一个超链接节点
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
Element 超链接节点
示例
javascript代码:
1
 editor.queryCommandValue( 'link' );

unlink

命令
1.2.6.1
取消超链接
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'unlink');

insertorderedlist

命令
1.2.6.1
有序列表,与“insertunorderedlist”命令互斥
方法列表
execCommand(String command, String style)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
command String 命令字符串
style String 插入的有序列表类型,值为:decimal,lower-alpha,lower-roman,upper-alpha,upper-roman,cn,cn1,cn2,num,num1,num2
示例
javascript代码:
1
 editor.execCommand( 'insertunorderedlist','decimal');
queryCommandState(String cmd)
命令方法 1.2.6.1
查询当前选区内容是否有序列表
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
int 如果当前选区是有序列表返回1,否则返回0
示例
javascript代码:
1
 editor.queryCommandState( 'insertorderedlist' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
查询当前选区内容是否有序列表
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 返回当前有序列表的类型,值为null或decimal,lower-alpha,lower-roman,upper-alpha,upper-roman,cn,cn1,cn2,num,num1,num2
示例
javascript代码:
1
 editor.queryCommandValue( 'insertorderedlist' );

insertunorderedlist

命令
1.2.6.1
无序列表,与“insertorderedlist”命令互斥
方法列表
execCommand(String command, String style)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
command String 命令字符串
style String 插入的无序列表类型,值为:circle,disc,square,dash,dot
示例
javascript代码:
1
 editor.execCommand( 'insertunorderedlist','circle');
insertunorderedlist(String command)
命令方法 1.2.6.1
查询当前是否有word文档粘贴进来的图片
参数列表
参数名 类型 描述
command String 命令字符串
返回值
类型 描述
int 如果当前选区是无序列表返回1,否则返回0
示例
javascript代码:
1
 editor.queryCommandState( 'insertunorderedlist' );
queryCommandValue(String command)
命令方法 1.2.6.1
查询当前选区内容是否有序列表
参数列表
参数名 类型 描述
command String 命令字符串
返回值
类型 描述
String 返回当前无序列表的类型,值为null或circle,disc,square,dash,dot
示例
javascript代码:
1
 editor.queryCommandValue( 'insertunorderedlist' );

music

命令
插入音乐
方法列表
execCommand(Object musicOptions)
命令方法
执行当前命令
参数列表
参数名 类型 描述
musicOptions Object 插入音乐的参数项, 支持的key有: url=>音乐地址; width=>音乐容器宽度;height=>音乐容器高度;align=>音乐文件的对齐方式, 可选值有: left, center, right, none
示例
javascript代码:
1
2
3
4
5
6
7
8
 //editor是编辑器实例
 //在编辑器里插入一个“植物大战僵尸”的APP
 editor.execCommand( 'music' , {
     width: 400,
     height: 95,
     align: "center",
     url: "音乐地址"
 } );

pagebreak

命令
1.2.6.1
插入分页符
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
  • 提示: 在表格中插入分页符会把表格切分成两部分
  • 提示: 获取编辑器内的数据时, 编辑器会把分页符转换成“_ueditor_page_break_tag_”字符串, 以便于提交数据到服务器端后处理分页。
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'pagebreak'); //插入一个hr标签,带有样式类名pagebreak

paragraph

命令
1.2.6.1
段落格式
方法列表
execCommand(String cmd, String style, Object attrs)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
style String 标签值为:'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
attrs Object 标签的属性
示例
javascript代码:
1
2
3
 editor.execCommand( 'Paragraph','h1','{
     class:'test'
 }' );
queryCommandValue(String cmd)
命令方法 1.2.6.1
返回选区内节点标签名
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
String 节点标签名
示例
javascript代码:
1
 editor.queryCommandValue( 'Paragraph' );

preview

命令
1.2.6.1
预览
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'preview' );

print

命令
1.2.6.1
打印
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'print' );

pasteplain

命令
1.2.6.1
启用或取消纯文本粘贴模式
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.queryCommandState( 'pasteplain' );
queryCommandState(String cmd)
命令方法 1.2.6.1
查询当前是否处于纯文本粘贴模式
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
int 如果处于纯文本模式,返回1,否则,返回0
示例
javascript代码:
1
 editor.queryCommandState( 'pasteplain' );

removeformat

命令
1.2.6.1
清除文字样式
方法列表
execCommand(String cmd, String tags, String style, String attrs)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
tags String 以逗号隔开的标签。如:strong
style String 样式如:color
attrs String 属性如:width
示例
javascript代码:
1
 editor.execCommand( 'removeformat', 'strong','color','width' );

rowspacing

命令
1.2.6.1
设置段间距
方法列表
execCommand(String cmd, String value, String dir)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
value String 段间距的值,以px为单位
dir String 间距位置,top或bottom,分别表示段前和段后
示例
javascript代码:
1
 editor.execCommand( 'rowspacing', '10', 'top' );

selectall

命令
1.2.6.1
选中所有内容
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'selectall' );

source

命令
1.2.6.1
切换源码模式和编辑模式
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'source');
queryCommandState(String cmd)
命令方法 1.2.6.1
查询当前编辑区域的状态是源码模式还是可视化模式
参数列表
参数名 类型 描述
cmd String 命令字符串
返回值
类型 描述
int 如果当前是源码编辑模式,返回1,否则返回0
示例
javascript代码:
1
 editor.queryCommandState( 'source' );

time

命令
1.2.6.1
插入时间,默认格式:12:59:59
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'time');

date

命令
1.2.6.1
插入日期,默认格式:2013-08-30
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'date');

undo

命令
1.2.6.1
撤销上一次执行的命令
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'undo' );

redo

命令
1.2.6.1
重做上一次执行的命令
方法列表
execCommand(String cmd)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
示例
javascript代码:
1
 editor.execCommand( 'redo' );

insertvideo

命令
1.2.6.1
插入视频
方法列表
execCommand(String cmd, Object videoAttr)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
videoAttr Object 键值对对象, 描述一个视频的所有属性
示例
javascript代码:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 var videoAttr = {
      //视频地址
      url: 'http://www.youku.com/xxx',
      //视频宽高值, 单位px
      width: 200,
      height: 100
 };

 //editor 是编辑器实例
 //向编辑器插入单个视频
 editor.execCommand( 'insertvideo', videoAttr );
execCommand(String cmd, Array videoArr)
命令方法 1.2.6.1
执行当前命令
参数列表
参数名 类型 描述
cmd String 命令字符串
videoArr Array 需要插入的视频的数组, 其中的每一个元素都是一个键值对对象, 描述了一个视频的所有属性
示例
javascript代码:
 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 ] );
queryCommandState(String cmd)
命令方法 1.2.6.1
查询当前光标所在处是否是一个视频
参数列表
参数名 类型 描述
cmd String 需要查询的命令字符串
返回值
类型 描述
int 如果当前光标所在处的元素是一个视频对象, 则返回1,否则返回0
示例
javascript代码:
1
2
 //editor 是编辑器实例
 editor.queryCommandState( 'insertvideo' );

webapp

命令
1.2.6.1
插入百度应用
方法列表
execCommand(Object appOptions)
命令方法 1.2.6.1
执行当前命令
  • 提示: 需要百度APPKey
参数列表
参数名 类型 描述
appOptions Object 应用所需的参数项, 支持的key有: title=>应用标题, width=>应用容器宽度, height=>应用容器高度,logo=>应用logo,url=>应用地址
示例
javascript代码:
1
2
3
4
5
6
7
8
9
 //editor是编辑器实例
 //在编辑器里插入一个“植物大战僵尸”的APP
 editor.execCommand( 'webapp' , {
     title: '植物大战僵尸',
     width: 560,
     height: 465,
     logo: '应用展示的图片',
     url: '百度应用的地址'
 } );

UE

模块
UEditor公用空间,UEditor所有的功能都挂载在该空间下
方法列表
方法签名 静态 描述
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 编辑器模拟的节点类
模块成员详细描述(UE)

getListener(Object obj, String type, Boolean force)

方法 静态
1.2.6.1
获得对象所拥有监听类型的所有监听器
所属模块: UE
参数列表
参数名 类型 描述
obj Object 查询监听器的对象
type String 事件类型
force Boolean 为true且当前所有type类型的侦听器不存在时,创建一个空监听器数组
返回值
类型 描述
Array 监听器数组

filterNode(Object root, Object rules)

方法 静态
1.2.6.1
根据传入节点和过滤规则过滤相应节点
所属模块: UE
参数列表
参数名 类型 描述
root Object 指定root节点
rules Object 过滤规则json对象
示例
javascript代码:
1
 UE.filterNode(root,editor.options.filterRules);

filterWord(String html)

方法 静态
1.2.6.1
根据传入html字符串过滤word
所属模块: UE
参数列表
参数名 类型 描述
html String html字符串
返回值
类型 描述
String 已过滤后的结果字符串
示例
javascript代码:
1
 UE.filterWord(html);

htmlparser(String htmlstr, Boolean ignoreBlank)

方法 静态
1.2.6.1
html字符串转换成uNode节点的静态方法
所属模块: UE
参数列表
参数名 类型 描述
htmlstr String 要转换的html代码
ignoreBlank Boolean 若设置为true,转换的时候忽略\n\r\t等空白字符
返回值
类型 描述
uNode 给定的html片段转换形成的uNode对象
示例
javascript代码:
1
 var root = UE.htmlparser('<p><b>htmlparser</b></p>', true);

Editor

UEditor的核心类,为用户提供与编辑器交互的接口。
所属模块: UE
事件列表
事件名 描述
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) 根据输出过滤规则,过滤编辑器内容
类成员详细描述(Editor)

ready

事件
1.2.6.1
编辑器准备就绪后会触发该事件
  • 提示: render方法执行完成之后,会触发该事件
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
2
3
 editor.addListener( 'ready', function( editor ) {
     editor.execCommand( 'focus' ); //编辑器家在完成后,让编辑器拿到焦点
 } );

destroy

事件
1.2.6.1
执行destroy方法,会触发该事件
所属模块: UE
所属类: UE.Editor

reset

事件
1.2.6.1
执行reset方法,会触发该事件
所属模块: UE
所属类: UE.Editor

focus

事件
1.2.6.1
执行focus方法,会触发该事件
所属模块: UE
所属类: UE.Editor

langReady

事件
1.2.6.1
语言加载完成会触发该事件
所属模块: UE
所属类: UE.Editor

beforeExecCommand

事件
1.2.6.1
运行命令之后会触发该命令
所属模块: UE
所属类: UE.Editor

afterExecCommand

事件
1.2.6.1
运行命令之后会触发该命令
所属模块: UE
所属类: UE.Editor

firstBeforeExecCommand

事件
1.2.6.1
运行命令之前会触发该命令
所属模块: UE
所属类: UE.Editor

beforeGetContent

事件
1.2.6.1
在getContent方法执行之前会触发该事件
所属模块: UE
所属类: UE.Editor

afterGetContent

事件
1.2.6.1
在getContent方法执行之后会触发该事件
所属模块: UE
所属类: UE.Editor

getAllHtml

事件
1.2.6.1
在getAllHtml方法执行时会触发该事件
所属模块: UE
所属类: UE.Editor

beforeSetContent

事件
1.2.6.1
在setContent方法执行之前会触发该事件
所属模块: UE
所属类: UE.Editor

afterSetContent

事件
1.2.6.1
在setContent方法执行之后会触发该事件
所属模块: UE
所属类: UE.Editor

selectionchange

事件
1.2.6.1
每当编辑器内部选区发生改变时,将触发该事件
  • 警告: 该事件的触发非常频繁,不建议在该事件的处理过程中做重量级的处理
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
2
3
 editor.addListener( 'selectionchange', function( editor ) {
     console.log('选区发生改变');
 }

beforeSelectionChange

事件
1.2.6.1
在所有selectionchange的监听函数执行之前,会触发该事件
所属模块: UE
所属类: UE.Editor

afterSelectionChange

事件
1.2.6.1
在所有selectionchange的监听函数执行完之后,会触发该事件
所属模块: UE
所属类: UE.Editor

contentChange

事件
1.2.6.1
编辑器内容发生改变时会触发该事件
所属模块: UE
所属类: UE.Editor

Editor()

构造器
1.2.6.1
以默认参数构建一个编辑器实例
  • 提示: 通过 改构造方法实例化的编辑器,不带ui层.需要render到一个容器,编辑器实例才能正常渲染到页面
所属模块: UE
所属类: UE.Editor
参考 示例
javascript代码:
1
2
 var editor = new UE.Editor();
 editor.execCommand('blod');

Editor(Object setting)

构造器
1.2.6.1
以给定的参数集合创建一个编辑器实例,对于未指定的参数,将应用默认参数。
  • 提示: 通过 改构造方法实例化的编辑器,不带ui层.需要render到一个容器,编辑器实例才能正常渲染到页面
所属模块: UE
所属类: UE.Editor
参考 参数列表
参数名 类型 描述
setting Object 创建编辑器的参数
示例
javascript代码:
1
2
 var editor = new UE.Editor();
 editor.execCommand('blod');

ready(Function fn)

方法
1.2.6.1
编辑器对外提供的监听ready事件的接口, 通过调用该方法,达到的效果与监听ready事件是一致的
  • 提示: 需要等待编辑器加载完成后才能执行的代码,可以使用该方法传入
所属模块: UE
所属类: UE.Editor
参考 参数列表
参数名 类型 描述
fn Function 编辑器ready之后所执行的回调, 如果在注册事件之前编辑器已经ready,将会 立即触发该回调。
示例
javascript代码:
1
2
3
 editor.ready( function( editor ) {
     editor.setContent('初始化完毕');
 } );

setOpt(String key, * val)

方法
1.2.6.1
该方法是提供给插件里面使用,设置配置项默认值
  • 警告: 三处设置配置项的优先级: 实例化时传入参数 > setOpt()设置 > config文件里设置
  • 警告: 该方法仅供编辑器插件内部和编辑器初始化时调用,其他地方不能调用。
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
key String 编辑器的可接受的选项名称
val * 该选项可接受的值
示例
javascript代码:
1
 editor.setOpt( 'initContent', '欢迎使用编辑器' );

setOpt(Object options)

方法
1.2.6.1
该方法是提供给插件里面使用,以{key:value}集合的方式设置插件内用到的配置项默认值
  • 警告: 三处设置配置项的优先级: 实例化时传入参数 > setOpt()设置 > config文件里设置
  • 警告: 该方法仅供编辑器插件内部和编辑器初始化时调用,其他地方不能调用。
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
options Object 将要设置的选项的键值对对象
示例
javascript代码:
1
2
3
 editor.setOpt( {
     'initContent': '欢迎使用编辑器'
 } );

destroy()

方法
1.2.6.1
销毁编辑器实例,使用textarea代替
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
 editor.destroy();

render(String containerId)

方法
1.2.6.1
渲染编辑器的DOM到指定容器
  • 提示: 执行该方法,会触发ready事件
  • 警告: 必须且只能调用一次
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
containerId String 指定一个容器ID

render(Element containerDom)

方法
1.2.6.1
渲染编辑器的DOM到指定容器
  • 提示: 执行该方法,会触发ready事件
  • 警告: 必须且只能调用一次
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
containerDom Element 直接指定容器对象

sync()

方法
1.2.6.1
同步数据到编辑器所在的form 从编辑器的容器节点向上查找form元素,若找到,就同步编辑内容到找到的form里,为提交数据做准备,主要用于是手动提交的情况 后台取得数据的键值,使用你容器上的name属性,如果没有就使用参数里的textarea项
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
2
 editor.sync();
 form.sumbit(); //form变量已经指向了form元素

sync(String formID)

方法
1.2.6.1
根据传入的formId,在页面上查找要同步数据的表单,若找到,就同步编辑内容到找到的form里,为提交数据做准备 后台取得数据的键值,该键值默认使用给定的编辑器容器的name属性,如果没有name属性则使用参数项里给定的“textarea”项
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
formID String 指定一个要同步数据的form的id,编辑器的数据会同步到你指定form下

setHeight(Number number)

方法
1.2.6.1
设置编辑器高度
  • 提示: 当配置项autoHeightEnabled为真时,该方法无效
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
number Number 设置的高度值,纯数值,不带单位
示例
javascript代码:
1
 editor.setHeight(number);

addshortcutkey(Object keyset)

方法
1.2.6.1
为编辑器的编辑命令提供快捷键 这个接口是为插件扩展提供的接口,主要是为新添加的插件,如果需要添加快捷键,所提供的接口
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
keyset Object 命令名和快捷键键值对对象,多个按钮的快捷键用“+”分隔
示例
javascript代码:
1
2
3
4
 editor.addshortcutkey({
     "Bold" : "ctrl+66",//^B
     "Italic" : "ctrl+73", //^I
 });

addshortcutkey(String cmd, String keys)

方法
1.2.6.1
这个接口是为插件扩展提供的接口,主要是为新添加的插件,如果需要添加快捷键,所提供的接口
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
cmd String 触发快捷键时,响应的命令
keys String 快捷键的字符串,多个按钮用“+”分隔
示例
javascript代码:
1
 editor.addshortcutkey("Underline", "ctrl+85"); //^U

getContent()

方法
1.2.6.1
获取编辑器的内容
  • 警告: 该方法获取到的是经过编辑器内置的过滤规则进行过滤后得到的内容
所属模块: UE
所属类: UE.Editor
返回值
类型 描述
String 编辑器的内容字符串, 如果编辑器的内容为空,或者是空的标签内容(如:”<p><br/></p>“), 则返回空字符串
示例
javascript代码:
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>

getContent(Function fn)

方法
1.2.6.1
获取编辑器的内容。 可以通过参数定义编辑器内置的判空规则
  • 提示: 该方法在处理包含有初始化内容的时候能起到很好的作用。
  • 警告: 该方法获取到的是经过编辑器内置的过滤规则进行过滤后得到的内容
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
fn Function 自定的判空规则, 要求该方法返回一个boolean类型的值, 代表当前编辑器的内容是否空, 如果返回true, 则该方法将直接返回空字符串;如果返回false,则编辑器将返回 经过内置过滤规则处理后的内容。
返回值
类型 描述
String 编辑器的内容字符串
示例
javascript代码:
1
2
3
4
 // editor 是一个编辑器的实例
 var content = editor.getContent( function ( editor ) {
      return editor.body.innerHTML === '欢迎使用UEditor'; //返回空字符串
 } );

getAllHtml()

方法
1.2.6.1
取得完整的html代码,可以直接显示成完整的html文档
所属模块: UE
所属类: UE.Editor
返回值
类型 描述
String 编辑器的内容html文档字符串

getPlainTxt()

方法
1.2.6.1
得到编辑器的纯文本内容,但会保留段落格式
所属模块: UE
所属类: UE.Editor
返回值
类型 描述
String 编辑器带段落格式的纯文本内容字符串
示例
javascript代码:
1
2
 //编辑器html内容:<p><strong>1</strong></p><p><strong>2</strong></p>
 console.log(editor.getPlainTxt()); //输出:"1\n2\n

getContentTxt()

方法
1.2.6.1
获取编辑器中的纯文本内容,没有段落格式
所属模块: UE
所属类: UE.Editor
返回值
类型 描述
String 编辑器不带段落格式的纯文本内容字符串
示例
javascript代码:
1
2
 //编辑器html内容:<p><strong>1</strong></p><p><strong>2</strong></p>
 console.log(editor.getPlainTxt()); //输出:"12

setContent(String html)

方法
1.2.6.1
设置编辑器的内容,可修改编辑器当前的html内容
  • 警告: 通过该方法插入的内容,是经过编辑器内置的过滤规则进行过滤后得到的内容
  • 警告: 该方法会触发selectionchange事件
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
html String 要插入的html内容
示例
javascript代码:
1
 editor.getContent('<p>test</p>');

setContent(String html, Boolean isAppendTo)

方法
1.2.6.1
设置编辑器的内容,可修改编辑器当前的html内容
  • 警告: 通过该方法插入的内容,是经过编辑器内置的过滤规则进行过滤后得到的内容
  • 警告: 该方法会触发selectionchange事件
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
html String 要插入的html内容
isAppendTo Boolean 若传入true,不清空原来的内容,在最后插入内容,否则,清空内容再插入
示例
javascript代码:
1
2
 //假设设置前的编辑器内容是 <p>old text</p>
 editor.setContent('<p>new text</p>', true); //插入的结果是<p>old text</p><p>new text</p>

focus()

方法
1.2.6.1
让编辑器获得焦点,默认focus到编辑器头部
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
 editor.focus()

focus(Boolean toEnd)

方法
1.2.6.1
让编辑器获得焦点,toEnd确定focus位置
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
toEnd Boolean 默认focus到编辑器头部,toEnd为true时focus到内容尾部
示例
javascript代码:
1
 editor.focus(true)

execCommand(String cmdName)

方法
1.2.6.1
执行编辑命令cmdName,完成富文本编辑效果
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
cmdName String 需要执行的命令
返回值
类型 描述
* 返回命令函数运行的返回值
示例
javascript代码:
1
 editor.execCommand(cmdName);

queryCommandState(String cmdName)

方法
1.2.6.1
根据传入的command命令,查选编辑器当前的选区,返回命令的状态
所属模块: UE
所属类: UE.Editor
参考 参数列表
参数名 类型 描述
cmdName String 需要查询的命令名称
返回值
类型 描述
Number number 返回放前命令的状态,返回值三种情况:(-1|0|1)
示例
javascript代码:
1
 editor.queryCommandState(cmdName)  => (-1|0|1)

queryCommandValue(String cmdName)

方法
1.2.6.1
根据传入的command命令,查选编辑器当前的选区,根据命令返回相关的值
  • 提示: 只有部分插件有此方法
所属模块: UE
所属类: UE.Editor
参考 参数列表
参数名 类型 描述
cmdName String 需要查询的命令名称
返回值
类型 描述
* 返回每个命令特定的当前状态值

hasContents()

方法
1.2.6.1
检查编辑区域中是否有内容
  • 提示: 默认有文本内容,或者有以下节点都不认为是空 table,ul,ol,dl,iframe,area,base,col,hr,img,embed,input,link,meta,param
所属模块: UE
所属类: UE.Editor
返回值
类型 描述
Boolean 检查有内容返回true,否则返回false
示例
javascript代码:
1
 editor.hasContents()

hasContents(Array tags)

方法
1.2.6.1
检查编辑区域中是否有内容,若包含参数tags中的节点类型,直接返回true
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
tags Array 传入数组判断时用到的节点类型
返回值
类型 描述
Boolean 若文档中包含tags数组里对应的tag,返回true,否则返回false
示例
javascript代码:
1
 editor.hasContents(['span']);

reset()

方法
1.2.6.1
重置编辑器,可用来做多个tab使用同一个编辑器实例
  • 提示: 此方法会清空编辑器内容,清空回退列表,会触发reset事件
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
 editor.reset()

setEnabled()

方法
1.2.6.1
设置当前编辑区域可以编辑
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
 editor.setEnabled()

setDisabled()

方法
1.2.6.1
设置当前编辑区域不可编辑
所属模块: UE
所属类: UE.Editor

setDisabled(String except)

方法
1.2.6.1
设置当前编辑区域不可编辑,except中的命令除外
  • 提示: 即使设置了disable,此处配置的例外命令仍然可以执行
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
except String 例外命令的字符串
示例
javascript代码:
1
 editor.setDisabled('bold'); //禁用工具栏中除加粗之外的所有功能

setDisabled(Array except)

方法
1.2.6.1
设置当前编辑区域不可编辑,except中的命令除外
  • 提示: 即使设置了disable,此处配置的例外命令仍然可以执行
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
except Array 例外命令的字符串数组,数组中的命令仍然可以执行
示例
javascript代码:
1
 editor.setDisabled(['bold','insertimage']); //禁用工具栏中除加粗和插入图片之外的所有功能

setShow()

方法
1.2.6.1
显示编辑器
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
 editor.setShow()

setHide()

方法
1.2.6.1
隐藏编辑器
所属模块: UE
所属类: UE.Editor
示例
javascript代码:
1
 editor.setHide()

getLang(String path)

方法
1.2.6.1
根据指定的路径,获取对应的语言资源
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
path String 路径根据的是lang目录下的语言文件的路径结构
返回值
类型 描述
Object | String 根据路径返回语言资源的Json格式对象或者语言字符串
示例
javascript代码:
1
 editor.getLang('contextMenu.delete'); //如果当前是中文,那返回是的是'删除'

getContentLength()

方法
1.2.6.1
计算编辑器html内容字符串的长度
所属模块: UE
所属类: UE.Editor
返回值
类型 描述
Number 返回计算的长度
示例
javascript代码:
1
2
 //编辑器html内容<p><strong>132</strong></p>
 editor.getContentLength() //返回27

getContentLength(Boolean ingoneHtml)

方法
1.2.6.1
计算编辑器当前纯文本内容的长度
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
ingoneHtml Boolean 传入true时,只按照纯文本来计算
返回值
类型 描述
Number 返回计算的长度,内容中有hr/img/iframe标签,长度加1
示例
javascript代码:
1
2
 //编辑器html内容<p><strong>132</strong></p>
 editor.getContentLength() //返回3

addInputRule(Function rule)

方法
1.2.6.1
注册输入过滤规则
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
rule Function 要添加的过滤规则
示例
javascript代码:
1
2
3
4
5
 editor.addInputRule(function(root){
   $.each(root.getNodesByTagName('div'),function(i,node){
       node.tagName="p";
   });
 });

filterInputRule(UE.uNode root)

方法
1.2.6.1
执行注册的过滤规则
  • 提示: 执行editor.setContent方法和执行'inserthtml'命令后,会运行该过滤函数
所属模块: UE
所属类: UE.Editor
参考 参数列表
参数名 类型 描述
root UE.uNode 要过滤的uNode节点
示例
javascript代码:
1
 editor.filterInputRule(editor.body);

addOutputRule(Function rule)

方法
1.2.6.1
注册输出过滤规则
所属模块: UE
所属类: UE.Editor
参数列表
参数名 类型 描述
rule Function 要添加的过滤规则
示例
javascript代码:
1
2
3
4
5
 editor.addOutputRule(function(root){
   $.each(root.getNodesByTagName('p'),function(i,node){
       node.tagName="div";
   });
 });

filterOutputRule(UE.uNode root)

方法
1.2.6.1
根据输出过滤规则,过滤编辑器内容
  • 提示: 执行editor.getContent方法的时候,会先运行该过滤函数
所属模块: UE
所属类: UE.Editor
参考 参数列表
参数名 类型 描述
root UE.uNode 要过滤的uNode节点
示例
javascript代码:
1
 editor.filterOutputRule(editor.body);

EventBase

UE采用的事件基类,继承此类的对应类将获取addListener,removeListener,fireEvent方法。 在UE中,Editor以及所有ui实例都继承了该类,故可以在对应的ui对象以及editor对象上使用上述方法。
所属模块: UE
构造器列表
方法签名 描述
EventBase() 通过此构造器,子类可以继承EventBase获取事件监听的方法
方法列表
方法签名 静态 描述
addListener(String types, Function fn) 注册事件监听器
removeListener(String types, Function fn) 移除事件监听器
fireEvent(String types) 触发事件
fireEvent(String types, *... options) 触发事件
类成员详细描述(EventBase)

EventBase()

构造器
1.2.6.1
通过此构造器,子类可以继承EventBase获取事件监听的方法
所属模块: UE
所属类: UE.EventBase
示例
javascript代码:
1
 UE.EventBase.call(editor);

addListener(String types, Function fn)

方法
1.2.6.1
注册事件监听器
所属模块: UE
所属类: UE.EventBase
参考 参数列表
参数名 类型 描述
types String 监听的事件名称,同时监听多个事件使用空格分隔
fn Function 监听的事件被触发时,会执行该回调函数
示例
javascript代码:
 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是注册的事件的编辑器实例
 })

removeListener(String types, Function fn)

方法
1.2.6.1
移除事件监听器
所属模块: UE
所属类: UE.EventBase
参数列表
参数名 类型 描述
types String 移除的事件名称,同时移除多个事件使用空格分隔
fn Function 移除监听事件的函数引用
示例
javascript代码:
1
2
 //changeCallback为方法体
 editor.removeListener("selectionchange",changeCallback);

fireEvent(String types)

方法
1.2.6.1
触发事件
  • 提示: 该方法会触发addListener
所属模块: UE
所属类: UE.EventBase
参数列表
参数名 类型 描述
types String 触发的事件名称,同时触发多个事件使用空格分隔
返回值
类型 描述
* 返回触发事件的队列中,最后执行的回调函数的返回值
示例
javascript代码:
1
 editor.fireEvent("selectionchange");

fireEvent(String types, *... options)

方法
1.2.6.1
触发事件
所属模块: UE
所属类: UE.EventBase
参数列表
参数名 类型 描述
types String 触发的事件名称,同时触发多个事件使用空格分隔
options *... 可选参数,可以传入一个或多个参数,会传给事件触发的回调函数
返回值
类型 描述
* 返回触发事件的队列中,最后执行的回调函数的返回值
示例
javascript代码:
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

编辑器模拟的节点类
所属模块: UE
构造器列表
方法签名 描述
uNode(Object attr) 通过一个键值对,创建一个uNode对象
方法列表
方法签名 静态 描述
toHtml() 当前节点对象,转换成html文本
toHtml(Boolean formatter) 当前节点对象,转换成html文本
innerHTML() 获取节点的html内容
innerHTML(String htmlstr) 设置节点的html内容
innerText() 获取节点的纯文本内容
innerText(String textStr) 设置节点的纯文本内容
getData() 获取当前对象的data属性
firstChild() 获取当前节点下的第一个子节点
lastChild() 获取当前节点下的最后一个子节点
previousSibling() 获取和当前节点有相同父亲节点的前一个节点
nextSibling() 获取和当前节点有相同父亲节点的后一个节点
replaceChild(UE.uNode target, UE.uNode source) 用新的节点替换当前节点
appendChild(UE.uNode node) 在节点的子节点列表最后位置插入一个节点
insertBefore(UE.uNode target, UE.uNode source) 在传入节点的前面插入一个节点
insertAfter(UE.uNode target, UE.uNode source) 在传入节点的后面插入一个节点
removeChild(UE.uNode node, Boolean keepChildren) 从当前节点的子节点列表中,移除节点
getAttr(String attrName) 获取当前节点所代表的元素属性,即获取attrs对象下的属性值
setAttr(String attrName, * attrVal) 设置当前节点所代表的元素属性,即设置attrs对象下的属性值
getIndex() 获取当前节点在父节点下的位置索引
getNodeById(String id) 在当前节点下,根据id查找节点
getNodesByTagName(String tagNames) 在当前节点下,根据元素名称查找节点列表
getStyle(String name) 根据样式名称,获取节点的样式值
setStyle(String name, String val) 给节点设置样式
traversal(Function fn) 传入一个函数,递归遍历当前节点下的所有节点
类成员详细描述(uNode)

uNode(Object attr)

构造器
1.2.6.1
通过一个键值对,创建一个uNode对象
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
attr Object 传入要创建的uNode的初始属性
示例
javascript代码:
1
2
3
4
5
 var node = new uNode({
     type:'element',
     tagName:'span',
     attrs:{style:'font-size:14px;'}
 }

toHtml()

方法
1.2.6.1
当前节点对象,转换成html文本
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
String 返回转换后的html字符串
示例
javascript代码:
1
 node.toHtml();

toHtml(Boolean formatter)

方法
1.2.6.1
当前节点对象,转换成html文本
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
formatter Boolean 是否格式化返回值
返回值
类型 描述
String 返回转换后的html字符串
示例
javascript代码:
1
 node.toHtml( true );

innerHTML()

方法
1.2.6.1
获取节点的html内容
  • 警告: 假如节点的type不是'element',或节点的标签名称不在dtd列表里,直接返回当前节点
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
String 返回节点的html内容
示例
javascript代码:
1
 var htmlstr = node.innerHTML();

innerHTML(String htmlstr)

方法
1.2.6.1
设置节点的html内容
  • 警告: 假如节点的type不是'element',或节点的标签名称不在dtd列表里,直接返回当前节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
htmlstr String 传入要设置的html内容
返回值
类型 描述
UE.uNode 返回节点本身
示例
javascript代码:
1
 node.innerHTML('<span>text</span>');

innerText()

方法
1.2.6.1
获取节点的纯文本内容
  • 警告: 假如节点的type不是'element',或节点的标签名称不在dtd列表里,直接返回当前节点
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
String 返回节点的存文本内容
示例
javascript代码:
1
 var textStr = node.innerText();

innerText(String textStr)

方法
1.2.6.1
设置节点的纯文本内容
  • 警告: 假如节点的type不是'element',或节点的标签名称不在dtd列表里,直接返回当前节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
textStr String 传入要设置的文本内容
返回值
类型 描述
UE.uNode 返回节点本身
示例
javascript代码:
1
 node.innerText('<span>text</span>');

getData()

方法
1.2.6.1
获取当前对象的data属性
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
Object 若节点的type值是elemenet,返回空字符串,否则返回节点的data属性
示例
javascript代码:
1
 node.getData();

firstChild()

方法
1.2.6.1
获取当前节点下的第一个子节点
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
UE.uNode 返回第一个子节点
示例
javascript代码:
1
 node.firstChild(); //返回第一个子节点

lastChild()

方法
1.2.6.1
获取当前节点下的最后一个子节点
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
UE.uNode 返回最后一个子节点
示例
javascript代码:
1
 node.lastChild(); //返回最后一个子节点

previousSibling()

方法
1.2.6.1
获取和当前节点有相同父亲节点的前一个节点
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
UE.uNode 返回前一个节点
示例
javascript代码:
1
 node.children[2].previousSibling(); //返回子节点node.children[1]

nextSibling()

方法
1.2.6.1
获取和当前节点有相同父亲节点的后一个节点
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
UE.uNode 返回后一个节点,找不到返回null
示例
javascript代码:
1
 node.children[2].nextSibling(); //如果有,返回子节点node.children[3]

replaceChild(UE.uNode target, UE.uNode source)

方法
1.2.6.1
用新的节点替换当前节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
target UE.uNode 要替换成该节点参数
source UE.uNode 要被替换掉的节点
返回值
类型 描述
UE.uNode 返回替换之后的节点对象
示例
javascript代码:
1
 node.replaceChild(newNode, childNode); //用newNode替换childNode,childNode是node的子节点

appendChild(UE.uNode node)

方法
1.2.6.1
在节点的子节点列表最后位置插入一个节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
node UE.uNode 要插入的节点
返回值
类型 描述
UE.uNode 返回刚插入的子节点
示例
javascript代码:
1
 node.appendChild( newNode ); //在node内插入子节点newNode

insertBefore(UE.uNode target, UE.uNode source)

方法
1.2.6.1
在传入节点的前面插入一个节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
target UE.uNode 要插入的节点
source UE.uNode 在该参数节点前面插入
返回值
类型 描述
UE.uNode 返回刚插入的子节点
示例
javascript代码:
1
 node.parentNode.insertBefore(newNode, node); //在node节点后面插入newNode

insertAfter(UE.uNode target, UE.uNode source)

方法
1.2.6.1
在传入节点的后面插入一个节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
target UE.uNode 要插入的节点
source UE.uNode 在该参数节点后面插入
返回值
类型 描述
UE.uNode 返回刚插入的子节点
示例
javascript代码:
1
 node.parentNode.insertAfter(newNode, node); //在node节点后面插入newNode

removeChild(UE.uNode node, Boolean keepChildren)

方法
1.2.6.1
从当前节点的子节点列表中,移除节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
node UE.uNode 要移除的节点引用
keepChildren Boolean 是否保留移除节点的子节点,若传入true,自动把移除节点的子节点插入到移除的位置
返回值
类型 描述
* 返回刚移除的子节点
示例
javascript代码:
1
 node.removeChild(childNode,true); //在node的子节点列表中移除child节点,并且吧child的子节点插入到移除的位置

getAttr(String attrName)

方法
1.2.6.1
获取当前节点所代表的元素属性,即获取attrs对象下的属性值
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
attrName String 要获取的属性名称
返回值
类型 描述
* 返回attrs对象下的属性值
示例
javascript代码:
1
 node.getAttr('title');

setAttr(String attrName, * attrVal)

方法
1.2.6.1
设置当前节点所代表的元素属性,即设置attrs对象下的属性值
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
attrName String 要设置的属性名称
attrVal * 要设置的属性值,类型视设置的属性而定
返回值
类型 描述
* 返回attrs对象下的属性值
示例
javascript代码:
1
 node.setAttr('title','标题');

getIndex()

方法
1.2.6.1
获取当前节点在父节点下的位置索引
所属模块: UE
所属类: UE.uNode
返回值
类型 描述
Number 返回索引数值,如果没有父节点,返回-1
示例
javascript代码:
1
 node.getIndex();

getNodeById(String id)

方法
1.2.6.1
在当前节点下,根据id查找节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
id String 要查找的id
返回值
类型 描述
UE.uNode 返回找到的节点
示例
javascript代码:
1
 node.getNodeById('textId');

getNodesByTagName(String tagNames)

方法
1.2.6.1
在当前节点下,根据元素名称查找节点列表
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
tagNames String 要查找的元素名称
返回值
类型 描述
Array 返回找到的节点列表
示例
javascript代码:
1
 node.getNodesByTagName('span');

getStyle(String name)

方法
1.2.6.1
根据样式名称,获取节点的样式值
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
name String 要获取的样式名称
返回值
类型 描述
String 返回样式值
示例
javascript代码:
1
 node.getStyle('font-size');

setStyle(String name, String val)

方法
1.2.6.1
给节点设置样式
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
name String 要设置的的样式名称
val String 要设置的的样值
示例
javascript代码:
1
 node.setStyle('font-size', '12px');

traversal(Function fn)

方法
1.2.6.1
传入一个函数,递归遍历当前节点下的所有节点
所属模块: UE
所属类: UE.uNode
参数列表
参数名 类型 描述
fn Function 遍历到节点的时,传入节点作为参数,运行此函数
示例
javascript代码:
1
2
3
 traversal(node, function(){
     console.log(node.type);
 });

UE.dom

模块
dom操作封装
类列表
类名 描述
Range Range实现类,本类是UEditor底层核心类,封装不同浏览器之间的Range操作。
Selection 选区集合
模块成员详细描述(UE.dom)

Range

Range实现类,本类是UEditor底层核心类,封装不同浏览器之间的Range操作。
所属模块: UE.dom
属性列表
属性名 类型 静态 描述
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函数的执行
类成员详细描述(Range)

startContainer

属性
1.2.6.1
当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点
所属模块: UE.dom
所属类: UE.dom.Range
类型 默认值 描述
Node 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点

startOffset

属性
1.2.6.1
当前Range的开始边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符
所属模块: UE.dom
所属类: UE.dom.Range
类型 默认值 描述
Node 当前Range的开始边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符

endContainer

属性
1.2.6.1
当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点
所属模块: UE.dom
所属类: UE.dom.Range
类型 默认值 描述
Node 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点

endOffset

属性
1.2.6.1
当前Range的结束边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符
所属模块: UE.dom
所属类: UE.dom.Range
类型 默认值 描述
Node 当前Range的结束边界容器节点的偏移量, 如果是元素节点, 该值就是childNodes中的第几个节点, 如果是文本节点就是文本内容的第几个字符

collapsed

属性
1.2.6.1
当前Range是否闭合
  • 提示: Range是闭合的时候, startContainer === endContainer && startOffset === endOffset
所属模块: UE.dom
所属类: UE.dom.Range
类型 默认值 描述
Boolean true 当前Range是否闭合

document

属性
1.2.6.1
当前Range所属的Document对象
  • 提示: 不同range的的document属性可以是不同的
所属模块: UE.dom
所属类: UE.dom.Range
类型 默认值 描述
Document 当前Range所属的Document对象

Range(Document document)

构造器
1.2.6.1
创建一个跟document绑定的空的Range实例
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
document Document 新建的选区所属的文档对象

cloneContents()

方法
1.2.6.1
克隆选区的内容到一个DocumentFragment里
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
DocumentFragment | NULL 如果选区是闭合的将返回null, 否则, 返回包含所clone内容的DocumentFragment元素
示例
html代码:
 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>

deleteContents()

方法
1.2.6.1
删除当前选区范围中的所有内容
  • 提示: 执行完该操作后, 当前Range对象变成了闭合状态
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前操作的Range对象
示例
html代码:
 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>

extractContents()

方法
1.2.6.1
将当前选区的内容提取到一个DocumentFragment里
  • 提示: 执行该操作后, 选区将变成闭合状态
  • 警告: 执行该操作后, 原来选区所选中的内容将从dom树上剥离出来
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
DocumentFragment 返回包含所提取内容的DocumentFragment对象
示例
html代码:
 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>

setStart(Node node, int offset)

方法
1.2.6.1
设置Range的开始容器节点和偏移量
  • 提示: 如果给定的节点是元素节点,那么offset指的是其子元素中索引为offset的元素, 如果是文本节点,那么offset指的是其文本内容的第offset个字符
  • 提示: 如果提供的容器节点是一个不能包含子元素的节点, 则该选区的开始容器将被设置 为该节点的父节点, 此时, 其距离开始容器的偏移量也变成了该节点在其父节点 中的索引
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
node Node 将被设为当前选区开始边界容器的节点对象
offset int 选区的开始位置偏移量
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>
html代码:
 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>

setEnd(Node node, int offset)

方法
1.2.6.1
设置Range的结束容器和偏移量
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 作为当前选区结束边界容器的节点对象
offset int 结束边界的偏移量
返回值
类型 描述
UE.dom.Range 当前range对象

setStartAfter(Node node)

方法
1.2.6.1
将Range开始位置设置到node节点之后
  • 提示: 该操作将会把给定节点的父节点作为range的开始容器, 且偏移量是该节点在其父节点中的位置索引+1
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
node Node 选区的开始边界将紧接着该节点之后
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

setStartBefore(Node node)

方法
1.2.6.1
将Range开始位置设置到node节点之前
  • 提示: 该操作将会把给定节点的父节点作为range的开始容器, 且偏移量是该节点在其父节点中的位置索引
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 新的选区开始位置在该节点之前
返回值
类型 描述
UE.dom.Range 当前range对象

setEndAfter(Node node)

方法
1.2.6.1
将Range结束位置设置到node节点之后
  • 提示: 该操作将会把给定节点的父节点作为range的结束容器, 且偏移量是该节点在其父节点中的位置索引+1
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 目标节点
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

setEndBefore(Node node)

方法
1.2.6.1
将Range结束位置设置到node节点之前
  • 提示: 该操作将会把给定节点的父节点作为range的结束容器, 且偏移量是该节点在其父节点中的位置索引
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 目标节点
返回值
类型 描述
UE.dom.Range 当前range对象

setStartAtFirst(Node node)

方法
1.2.6.1
设置Range的开始位置到node节点内的第一个子节点之前
  • 提示: 选区的开始容器将变成给定的节点, 且偏移量为0
  • 提示: 如果给定的节点是元素节点, 则该节点必须是允许包含子节点的元素。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 目标节点
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

setStartAtLast(Node node)

方法
1.2.6.1
设置Range的开始位置到node节点内的最后一个节点之后
  • 提示: 选区的开始容器将变成给定的节点, 且偏移量为该节点的子节点数
  • 提示: 如果给定的节点是元素节点, 则该节点必须是允许包含子节点的元素。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 目标节点
返回值
类型 描述
UE.dom.Range 当前range对象

setEndAtFirst(Node node)

方法
1.2.6.1
设置Range的结束位置到node节点内的第一个节点之前
  • 提示: 选区的结束容器将变成给定的节点, 且偏移量为0
  • 提示: node必须是一个元素节点, 且必须是允许包含子节点的元素。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 目标节点
返回值
类型 描述
UE.dom.Range 当前range对象

setEndAtLast(Node node)

方法
1.2.6.1
设置Range的结束位置到node节点内的最后一个节点之后
  • 提示: 选区的结束容器将变成给定的节点, 且偏移量为该节点的子节点数量
  • 提示: node必须是一个元素节点, 且必须是允许包含子节点的元素。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
node Node 目标节点
返回值
类型 描述
UE.dom.Range 当前range对象

selectNode(Node node)

方法
1.2.6.1
选中给定节点
  • 提示: 此时, 选区的开始容器和结束容器都是该节点的父节点, 其startOffset是该节点在父节点中的位置索引, 而endOffset为startOffset+1
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
node Node 需要选中的节点
返回值
类型 描述
UE.dom.Range 当前range对象,此时的range仅包含当前给定的节点对象
示例
html代码:
 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>

selectNodeContents(Node node)

方法
1.2.6.1
选中给定节点内部的所有节点
  • 提示: 此时, 选区的开始容器和结束容器都是该节点, 其startOffset为0, 而endOffset是该节点的子节点数。
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
node Node 目标节点, 当前range将包含该节点内的所有节点
返回值
类型 描述
UE.dom.Range 当前range对象, 此时range仅包含给定节点的所有子节点
示例
html代码:
 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>

cloneRange()

方法
1.2.6.1
clone当前Range对象
  • 提示: 返回的range是一个全新的range对象, 其内部所有属性与当前被clone的range相同。
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前range对象的一个副本

collapse()

方法
1.2.6.1
向当前选区的结束处闭合选区
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

collapse(Boolean toStart)

方法
1.2.6.1
闭合当前选区,根据给定的toStart参数项决定是向当前选区开始处闭合还是向结束处闭合, 如果toStart的值为true,则向开始位置闭合, 反之,向结束位置闭合。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
toStart Boolean 是否向选区开始处闭合
返回值
类型 描述
UE.dom.Range 当前range对象,此时range对象处于闭合状态
示例
html代码:
 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>

shrinkBoundary()

方法
1.2.6.1
调整range的开始位置和结束位置,使其"收缩"到最小的位置
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
1
 <span>xx<b>xx[</b>xxxxx]</span> => <span>xx<b>xx</b>[xxxxx]</span>
html代码:
 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>
html代码:
1
 [<b><i>xxxx</i>xxxxxxx</b>] => <b><i>[xxxx</i>xxxxxxx]</b>

shrinkBoundary(Boolean ignoreEnd)

方法
1.2.6.1
调整range的开始位置和结束位置,使其"收缩"到最小的位置, 如果ignoreEnd的值为true,则忽略对结束位置的调整
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
ignoreEnd Boolean 是否忽略对结束位置的调整
返回值
类型 描述
UE.dom.Range 当前range对象

getCommonAncestor()

方法
1.2.6.1
获取离当前选区内包含的所有节点最近的公共祖先节点,
  • 提示: 返回的公共祖先节点一定不是range自身的容器节点, 但有可能是一个文本节点
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
Node 当前range对象内所有节点的公共祖先节点
示例
html代码:
 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>

getCommonAncestor(Boolean includeSelf)

方法
1.2.6.1
获取当前选区所包含的所有节点的公共祖先节点, 可以根据给定的参数 includeSelf 决定获取到 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点, 如果 includeSelf 的取值为true, 则返回的节点可以是自身的容器节点, 否则, 则不能是容器节点
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
includeSelf Boolean 是否允许获取到的公共祖先节点是当前range对象的容器节点
返回值
类型 描述
Node 当前range对象内所有节点的公共祖先节点
示例
html代码:
 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>

getCommonAncestor(Boolean includeSelf, Boolean ignoreTextNode)

方法
1.2.6.1
获取当前选区所包含的所有节点的公共祖先节点, 可以根据给定的参数 includeSelf 决定获取到 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点, 如果 includeSelf 的取值为true, 则返回的节点可以是自身的容器节点, 否则, 则不能是容器节点; 同时可以根据 ignoreTextNode 参数的取值决定是否忽略类型为文本节点的祖先节点。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
includeSelf Boolean 是否允许获取到的公共祖先节点是当前range对象的容器节点
ignoreTextNode Boolean 获取祖先节点的过程中是否忽略类型为文本节点的祖先节点
返回值
类型 描述
Node 当前range对象内所有节点的公共祖先节点
示例
html代码:
 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>

trimBoundary()

方法
1.2.6.1
调整当前Range的开始和结束边界容器,如果是容器节点是文本节点,就调整到包含该文本节点的父节点上
  • 提示: 该操作有可能会引起文本节点被切开
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

trimBoundary(Boolean ignoreEnd)

方法
1.2.6.1
调整当前Range的开始和结束边界容器,如果是容器节点是文本节点,就调整到包含该文本节点的父节点上, 可以根据 ignoreEnd 参数的值决定是否调整对结束边界的调整
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
ignoreEnd Boolean 是否忽略对结束边界的调整
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

txtToElmBoundary()

方法
1.2.6.1
如果选区在文本的边界上,就扩展选区到文本的父节点上, 如果当前选区是闭合的, 则什么也不做
  • 提示: 该操作不会修改dom节点
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前range对象

txtToElmBoundary(Boolean ignoreCollapsed)

方法
1.2.6.1
如果选区在文本的边界上,就扩展选区到文本的父节点上, 如果当前选区是闭合的, 则根据参数项 ignoreCollapsed 的值决定是否执行该调整
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
ignoreCollapsed Boolean 是否忽略选区的闭合状态, 如果该参数取值为true, 则 不论选区是否闭合, 都会执行该操作, 反之, 则不会对闭合的选区执行该操作
返回值
类型 描述
UE.dom.Range 当前range对象

insertNode(Node node)

方法
1.2.6.1
在当前选区的开始位置前插入节点,新插入的节点会被该range包含
  • 提示: 插入的节点可以是一个DocumentFragment依次插入多个节点
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
node Node 需要插入的节点
返回值
类型 描述
UE.dom.Range 当前range对象

setCursor()

方法
1.2.6.1
闭合选区到当前选区的开始位置, 并且定位光标到闭合后的位置
所属模块: UE.dom
所属类: UE.dom.Range
参考 返回值
类型 描述
UE.dom.Range 当前range对象

setCursor(Boolean toEnd)

方法
1.2.6.1
闭合选区,可以根据参数toEnd的值控制选区是向前闭合还是向后闭合, 并且定位光标到闭合后的位置。
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
toEnd Boolean 是否向后闭合, 如果为true, 则闭合选区时, 将向结束容器方向闭合, 反之,则向开始容器方向闭合
返回值
类型 描述
UE.dom.Range 当前range对象

createBookmark(Boolean serialize)

方法
1.2.6.1
创建当前range的一个书签,记录下当前range的位置,方便当dom树改变时,还能找回原来的选区位置
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
serialize Boolean 控制返回的标记位置是对当前位置的引用还是ID,如果该值为true,则 返回标记位置的ID, 反之则返回标记位置节点的引用
返回值
类型 描述
Object 返回一个书签记录键值对, 其包含的key有: start => 开始标记的ID或者引用, end => 结束标记的ID或引用, id => 当前标记的类型, 如果为true,则表示 返回的记录的类型为ID, 反之则为引用

moveToBookmark(BookMark bookmark)

方法
1.2.6.1
调整当前range的边界到书签位置,并删除该书签对象所标记的位置内的节点
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
bookmark BookMark createBookmark所创建的标签对象
返回值
类型 描述
UE.dom.Range 当前range对象

enlarge()

方法
1.2.6.1
调整range的边界,使其"放大"到最近的父节点
  • 提示: 会引起选区的变化
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 当前range对象

enlarge(Boolean toBlock)

方法
1.2.6.1
调整range的边界,使其"放大"到最近的父节点,根据参数 toBlock 的取值, 可以 要求扩大之后的父节点是block节点
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
toBlock Boolean 是否要求扩大之后的父节点必须是block节点
返回值
类型 描述
UE.dom.Range 当前range对象

adjustmentBoundary()

方法
1.2.6.1
调整Range的边界,使其"缩小"到最合适的位置
所属模块: UE.dom
所属类: UE.dom.Range
参考 返回值
类型 描述
UE.dom.Range 当前range对象

applyInlineStyle(String tagName)

方法
1.2.6.1
给range选区中的内容添加给定的inline标签
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
tagName String 需要添加的标签名
示例
html代码:
1
 <p>xxxx[xxxx]x</p>  ==>  range.applyInlineStyle("strong")  ==>  <p>xxxx[<strong>xxxx</strong>]x</p>

applyInlineStyle(String tagName, Object attrs)

方法
1.2.6.1
给range选区中的内容添加给定的inline标签, 并且为标签附加上一些初始化属性。
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
tagName String 需要添加的标签名
attrs Object 跟随新添加的标签的属性
返回值
类型 描述
UE.dom.Range 当前选区
示例
html代码:
 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>

removeInlineStyle(String tagName)

方法
1.2.6.1
移除当前选区内指定的inline标签,但保留其中的内容
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
tagName String 需要移除的标签名
返回值
类型 描述
UE.dom.Range 当前的range对象
示例
html代码:
1
 xx[x<span>xxx<em>yyy</em>zz]z</span>  => range.removeInlineStyle(["em"])  => xx[x<span>xxxyyyzz]z</span>

removeInlineStyle(Array tagNameArr)

方法
1.2.6.1
移除当前选区内指定的一组inline标签,但保留其中的内容
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
tagNameArr Array 需要移除的标签名的数组
返回值
类型 描述
UE.dom.Range 当前的range对象

getClosedNode()

方法
1.2.6.1
获取当前选中的自闭合的节点
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
Node | NULL 如果当前选中的是自闭合节点, 则返回该节点, 否则返回NULL

select()

方法
1.2.6.1
在页面上高亮range所表示的选区
所属模块: UE.dom
所属类: UE.dom.Range
返回值
类型 描述
UE.dom.Range 返回当前Range对象

scrollToView(Window win)

方法
1.2.6.1
滚动到当前range开始的位置
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
win Window 当前range对象所属的window对象
返回值
类型 描述
UE.dom.Range 当前Range对象

scrollToView(Window win, Number offset)

方法
1.2.6.1
滚动到距离当前range开始位置 offset 的位置处
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
win Window 当前range对象所属的window对象
offset Number 距离range开始位置处的偏移量, 如果为正数, 则向下偏移, 反之, 则向上偏移
返回值
类型 描述
UE.dom.Range 当前Range对象

equals()

方法
1.2.6.1
判断给定的Range对象是否和当前Range对象表示的是同一个选区
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
返回值
类型 描述
Boolean 如果给定的Range对象与当前Range对象表示的是同一个选区, 则返回true, 否则返回false

traversal(Function doFn)

方法
1.2.6.1
遍历range内的节点。每当遍历一个节点时, 都会执行参数项 doFn 指定的函数, 该函数的接受当前遍历的节点 作为其参数。
所属模块: UE.dom
所属类: UE.dom.Range
参数列表
参数名 类型 描述
doFn Function 对每个遍历的节点要执行的方法, 该方法接受当前遍历的节点作为其参数
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

traversal(Function doFn, Function filterFn)

方法
1.2.6.1
遍历range内的节点。 每当遍历一个节点时, 都会执行参数项 doFn 指定的函数, 该函数的接受当前遍历的节点 作为其参数。 可以通过参数项 filterFn 来指定一个过滤器, 只有符合该过滤器过滤规则的节点才会触 发doFn函数的执行
所属模块: UE.dom
所属类: UE.dom.Range
参考 参数列表
参数名 类型 描述
doFn Function 对每个遍历的节点要执行的方法, 该方法接受当前遍历的节点作为其参数
filterFn Function 过滤器, 该函数接受当前遍历的节点作为参数, 如果该节点满足过滤 规则, 请返回true, 该节点会触发doFn, 否则, 请返回false, 则该节点不 会触发doFn。
返回值
类型 描述
UE.dom.Range 当前range对象
示例
html代码:
 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>

Selection

选区集合
所属模块: UE.dom
方法列表
方法签名 静态 描述
getNative() 获取原生seleciton对象
getIERange() 获得ieRange
cache() 缓存当前选区的range和选区的开始节点
getStartElementPath() 获取选区开始位置的父节点到body
clear() 清空缓存
isFocus() 编辑器是否得到了选区
getRange() 获取选区对应的Range
getStart() 获取开始元素,用于状态反射
getText() 得到选区中的文本
clearRange() 清除选区
类成员详细描述(Selection)

getNative()

方法
1.2.6.1
获取原生seleciton对象
所属模块: UE.dom
所属类: UE.dom.Selection
返回值
类型 描述
Object 获得selection对象
示例
javascript代码:
1
 editor.selection.getNative();

getIERange()

方法
1.2.6.1
获得ieRange
所属模块: UE.dom
所属类: UE.dom.Selection
返回值
类型 描述
Object 返回ie原生的Range
示例
javascript代码:
1
 editor.selection.getIERange();

cache()

方法
1.2.6.1
缓存当前选区的range和选区的开始节点
所属模块: UE.dom
所属类: UE.dom.Selection

getStartElementPath()

方法
1.2.6.1
获取选区开始位置的父节点到body
所属模块: UE.dom
所属类: UE.dom.Selection
返回值
类型 描述
Array 返回父节点集合
示例
javascript代码:
1
 editor.selection.getStartElementPath();

clear()

方法
1.2.6.1
清空缓存
所属模块: UE.dom
所属类: UE.dom.Selection

isFocus()

方法
1.2.6.1
编辑器是否得到了选区
所属模块: UE.dom
所属类: UE.dom.Selection

getRange()

方法
1.2.6.1
获取选区对应的Range
所属模块: UE.dom
所属类: UE.dom.Selection
返回值
类型 描述
Object 得到Range对象
示例
javascript代码:
1
 editor.selection.getRange();

getStart()

方法
1.2.6.1
获取开始元素,用于状态反射
所属模块: UE.dom
所属类: UE.dom.Selection
返回值
类型 描述
Element 获得开始元素
示例
javascript代码:
1
 editor.selection.getStart();

getText()

方法
1.2.6.1
得到选区中的文本
所属模块: UE.dom
所属类: UE.dom.Selection
返回值
类型 描述
String 选区中包含的文本
示例
javascript代码:
1
 editor.selection.getText();

clearRange()

方法
1.2.6.1
清除选区
所属模块: UE.dom
所属类: UE.dom.Selection
示例
javascript代码:
1
 editor.selection.clearRange();

UE.ajax

模块
提供对ajax请求的支持
方法列表
方法签名 静态 描述
request(URLString url, Object ajaxOptions) 根据给定的参数项,向指定的url发起一个ajax请求。 ajax请求完成后,会根据请求结果调用相应回调: 如果请求 成功, 则调用onsuccess回调, 失败则调用 onerror 回调
request(Object ajaxOptions) 根据给定的参数项发起一个ajax请求, 参数项里必须包含一个url地址。 ajax请求完成后,会根据请求结果调用相应回调: 如果请求 成功, 则调用onsuccess回调, 失败则调用 onerror 回调。
模块成员详细描述(UE.ajax)

request(URLString url, Object ajaxOptions)

方法 静态
1.2.6.1
根据给定的参数项,向指定的url发起一个ajax请求。 ajax请求完成后,会根据请求结果调用相应回调: 如果请求 成功, 则调用onsuccess回调, 失败则调用 onerror 回调
所属模块: UE.ajax
参数列表
参数名 类型 描述
url URLString ajax请求的url地址
ajaxOptions Object ajax请求选项的键值对,支持的选项如下:
示例
javascript代码:
 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请求失败' );
     }

 } );

request(Object ajaxOptions)

方法 静态
1.2.6.1
根据给定的参数项发起一个ajax请求, 参数项里必须包含一个url地址。 ajax请求完成后,会根据请求结果调用相应回调: 如果请求 成功, 则调用onsuccess回调, 失败则调用 onerror 回调。
  • 警告: 如果在参数项里未提供一个key为“url”的地址值,则该请求将直接退出。
所属模块: UE.ajax
参数列表
参数名 类型 描述
ajaxOptions Object ajax请求选项的键值对,支持的选项如下:
示例
javascript代码:
1
2
3
4
5
6
7
 //向sayhello.php发起一个异步的Ajax POST请求, 请求超时时间为5s, 请求完成后不执行任何回调。
 UE.ajax.requeset( 'sayhello.php', {

     //请求的地址, 该项是必须的。
     url: 'sayhello.php'

 } );

UE.browser

模块
提供浏览器检测的模块
属性列表
属性名 类型 静态 描述
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良好兼容
模块成员详细描述(UE.browser)

ie

属性 静态
1.2.6.1
检测当前浏览器是否为IE
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器是否为IE
示例
javascript代码:
1
2
3
 if ( UE.browser.ie ) {
     console.log( '当前浏览器是IE' );
 }

opera

属性 静态
1.2.6.1
检测当前浏览器是否为Opera
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器是否为Opera
示例
javascript代码:
1
2
3
 if ( UE.browser.opera ) {
     console.log( '当前浏览器是Opera' );
 }

webkit

属性 静态
1.2.6.1
检测当前浏览器是否是webkit内核的浏览器
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器是否是webkit内核的浏览器
示例
javascript代码:
1
2
3
 if ( UE.browser.webkit ) {
     console.log( '当前浏览器是webkit内核浏览器' );
 }

mac

属性 静态
1.2.6.1
检测当前浏览器是否是运行在mac平台下
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器是否是运行在mac平台下
示例
javascript代码:
1
2
3
 if ( UE.browser.mac ) {
     console.log( '当前浏览器运行在mac平台下' );
 }

quirks

属性 静态
1.2.6.1
检测当前浏览器是否处于“怪异模式”下
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器是否处于“怪异模式”下
示例
javascript代码:
1
2
3
 if ( UE.browser.quirks ) {
     console.log( '当前浏览器运行处于“怪异模式”' );
 }

gecko

属性 静态
1.2.6.1
检测当前浏览器内核是否是gecko内核
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器内核是否是gecko内核
示例
javascript代码:
1
2
3
 if ( UE.browser.gecko ) {
     console.log( '当前浏览器内核是gecko内核' );
 }

ie9Compat

属性 静态
1.2.6.1
检测浏览器模式是否为 IE9 兼容模式
  • 警告: 如果浏览器不是IE, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
boolean 检测浏览器模式是否为 IE9 兼容模式
示例
javascript代码:
1
2
3
 if ( UE.browser.ie9Compat ) {
     console.log( '当前浏览器运行在IE9兼容模式下' );
 }

ie8

属性 静态
1.2.6.1
检测浏览器是否是IE8浏览器
  • 警告: 如果浏览器不是IE, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
boolean 检测浏览器是否是IE8浏览器
示例
javascript代码:
1
2
3
 if ( UE.browser.ie8 ) {
     console.log( '当前浏览器是IE8浏览器' );
 }

ie8Compat

属性 静态
1.2.6.1
检测浏览器模式是否为 IE8 兼容模式
  • 警告: 如果浏览器不是IE, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
boolean 检测浏览器模式是否为 IE8 兼容模式
示例
javascript代码:
1
2
3
 if ( UE.browser.ie8Compat ) {
     console.log( '当前浏览器运行在IE8兼容模式下' );
 }

ie7Compat

属性 静态
1.2.6.1
检测浏览器模式是否为 IE7 兼容模式
  • 警告: 如果浏览器不是IE, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
boolean 检测浏览器模式是否为 IE7 兼容模式
示例
javascript代码:
1
2
3
 if ( UE.browser.ie7Compat ) {
     console.log( '当前浏览器运行在IE7兼容模式下' );
 }

ie6Compat

属性 静态
1.2.6.1
检测浏览器模式是否为 IE6 模式 或者怪异模式
  • 警告: 如果浏览器不是IE, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
boolean 检测浏览器模式是否为 IE6 模式 或者怪异模式
示例
javascript代码:
1
2
3
 if ( UE.browser.ie6Compat ) {
     console.log( '当前浏览器运行在IE6模式或者怪异模式下' );
 }

chrome

属性 静态
1.2.6.1
检测当前浏览器是否为Chrome, 如果是,则返回Chrome的大版本号
  • 警告: 如果浏览器不是chrome, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
Number 检测当前浏览器是否为Chrome, 如果是,则返回Chrome的大版本号
示例
javascript代码:
1
2
3
 if ( UE.browser.chrome ) {
     console.log( '当前浏览器是Chrome' );
 }

safari

属性 静态
1.2.6.1
检测当前浏览器是否为Safari, 如果是,则返回Safari的大版本号
  • 警告: 如果浏览器不是safari, 则该值为undefined
所属模块: UE.browser
类型 默认值 描述
Number 检测当前浏览器是否为Safari, 如果是,则返回Safari的大版本号
示例
javascript代码:
1
2
3
 if ( UE.browser.safari ) {
     console.log( '当前浏览器是Safari' );
 }

version

属性 静态
1.2.6.1
检测当前浏览器版本号
  • 提示:
    • IE系列返回值为5,6,7,8,9,10等
    • gecko系列会返回10900,158900等
    • webkit系列会返回其build号 (如 522等)
所属模块: UE.browser
类型 默认值 描述
Number 检测当前浏览器版本号
示例
javascript代码:
1
 console.log( '当前浏览器版本号是: ' + UE.browser.version );

isCompatible

属性 静态
1.2.6.1
检测当前浏览器是否能够与UEditor良好兼容
所属模块: UE.browser
类型 默认值 描述
boolean 检测当前浏览器是否能够与UEditor良好兼容
示例
javascript代码:
1
2
3
 if ( UE.browser.isCompatible ) {
     console.log( '浏览器与UEditor能够良好兼容' );
 }
Dom操作工具包
方法列表
方法签名 静态 描述
getPosition(Node nodeA, Node nodeB) 获取节点A相对于节点B的位置关系
getNodeIndex(Node node) 检测节点node在父节点中的索引位置
getNodeIndex(Node node, Boolean mergeTextNode) 检测节点node在父节点中的索引位置, 根据给定的mergeTextNode参数决定是否要合并多个连续的文本节点为一个节点
inDoc(Node node, DomDocument doc) 检测节点node是否在给定的document对象上
findParent(Node node, Function filterFn) 根据给定的过滤规则filterFn, 查找符合该过滤规则的node节点的第一个祖先节点, 查找的起点是给定node节点的父节点。
findParent(Node node, Function filterFn, Boolean includeSelf) 根据给定的过滤规则filterFn, 查找符合该过滤规则的node节点的第一个祖先节点, 如果includeSelf的值为true,则查找的起点是给定的节点node, 否则, 起点是node的父节点
findParentByTagName(Node node, Array tagNames) 查找node的节点名为tagName的第一个祖先节点, 查找的起点是node节点的父节点。
findParentByTagName(Node node, Array tagNames, Boolean includeSelf) 查找node的节点名为tagName的祖先节点, 如果includeSelf的值为true,则查找的起点是给定的节点node, 否则, 起点是node的父节点。
findParents(Node node) 查找节点node的祖先节点集合, 查找的起点是给定节点的父节点,结果集中不包含给定的节点。
findParents(Node node, Boolean includeSelf) 查找节点node的祖先节点集合, 如果includeSelf的值为true, 则返回的结果集中允许出现当前给定的节点, 否则, 该节点不会出现在其结果集中。
insertAfter(Node node, Node newNode) 在节点node后面插入新节点newNode
remove(Node node) 删除节点node及其下属的所有节点
remove(Node node, Boolean keepChildren) 删除节点node,并根据keepChildren的值决定是否保留子节点
getNextDomNode(Node node) 取得node节点的下一个兄弟节点, 如果该节点其后没有兄弟节点, 则递归查找其父节点之后的第一个兄弟节点, 直到找到满足条件的节点或者递归到BODY节点之后才会结束。
getNextDomNode(Node node, Boolean startFromChild) 取得node节点的下一个兄弟节点, 如果startFromChild的值为ture,则先获取其子节点, 如果有子节点则直接返回第一个子节点;如果没有子节点或者startFromChild的值为false, 则执行getNextDomNode(Node node)的查找过程。
getWindow(Node node) 获取节点node所属的window对象
getCommonAncestor(Node nodeA, Node nodeB) 获取离nodeA与nodeB最近的公共的祖先节点
clearEmptySibling(Node node) 清除node节点左右连续为空的兄弟inline节点
clearEmptySibling(Node node, Boolean ignoreNext) 清除node节点左右连续为空的兄弟inline节点, 如果ignoreNext的值为true, 则忽略对右边兄弟节点的操作。
clearEmptySibling(Node node, Boolean ignoreNext, Boolean ignorePre) 清除node节点左右连续为空的兄弟inline节点, 如果ignoreNext的值为true, 则忽略对右边兄弟节点的操作, 如果ignorePre的值为true,则忽略对左边兄弟节点的操作。
split(Node textNode, int offset) 将一个文本节点textNode拆分成两个文本节点,offset指定拆分位置
isWhitespace(Node node) 检测文本节点textNode是否为空节点(包括空格、换行、占位符等字符)
getXY(Node element) 获取元素element相对于viewport的位置坐标
on(Node element, String type, Function handler) 为元素element绑定原生DOM事件,type为事件类型,handler为处理函数
on(Node element, Array type, Function handler) 为元素element绑定原生DOM事件,type为事件类型,handler为处理函数
un(Node element, String type, Function handler) 解除DOM事件绑定
un(Node element, Array type, Function handler) 解除DOM事件绑定
isSameElement(Node nodeA, Node nodeB) 比较节点nodeA与节点nodeB是否具有相同的标签名、属性名以及属性值
isSameStyle(Node nodeA, Node nodeB) 判断节点nodeA与节点nodeB的元素的style属性是否一致
isBlockElm(Node node) 检查节点node是否为block元素
isBody(Element node) 检测node节点是否为body节点
breakParent(Node node, Node parent) 以node节点为分界,将该节点的指定祖先节点parent拆分成两个独立的节点, 拆分形成的两个节点之间是node节点
isEmptyInlineElement(Node node) 检查节点node是否是空inline节点
trimWhiteTextNode(Element node) 删除node节点下首尾两端的空白文本子节点
getElementsByTagName(Node node, String tagName) 原生方法getElementsByTagName的封装
mergeToParent(Element node) 将节点node提取到父节点上
mergeSibling(Element node) 合并节点node的左右兄弟节点
mergeSibling(Element node, Boolean ignorePre) 合并节点node的左右兄弟节点, 可以根据给定的条件选择是否忽略合并左节点。
mergeSibling(Element node, Boolean ignorePre, Boolean ignoreNext) 合并节点node的左右兄弟节点,可以根据给定的条件选择是否忽略合并左右节点。
unSelectable(Element node) 设置节点node及其子节点不会被选中
removeAttributes(Node node, String attrNames) 删除节点node上的指定属性名称的属性
removeAttributes(Node node, Array attrNames) 删除节点node上的指定属性名称的属性
createElement(DomDocument doc, String tagName, Object attrs) 在doc下创建一个标签名为tag,属性为attrs的元素
setAttributes(Element node, Object attrs) 为节点node添加属性attrs,attrs为属性键值对
getComputedStyle(Element element, String styleName) 获取元素element经过计算后的样式值
removeClasses(Element ele, String classNames) 删除元素element指定的className
removeClasses(Element ele, Array classNames) 删除元素element指定的className
addClass(Node ele, String classNames) 给元素element添加className
addClass(Node ele, Array classNames) 给元素element添加className
hasClass(Node ele, String classNames) 判断元素element是否包含给定的样式类名className
hasClass(Node ele, Array classNames) 判断元素element是否包含给定的样式类名className
preventDefault(Event evt) 阻止事件默认行为
removeStyle(Element element, String styleName) 删除元素element指定的样式
getStyle(Element element, String styleName) 获取元素element的style属性的指定值
setStyle(Element element, String styleName, String styleValue) 为元素element设置样式属性值
setStyles(Element element, Object styles) 为元素element设置多个样式属性值
getChildCount(Element node) 获取子节点的数量
getChildCount(Element node, Function fn) 根据给定的过滤规则, 获取符合条件的子节点的数量
isEmptyNode(Node node) 判断给定节点是否为空节点
scrollToView(Node node, window win, Number offsetTop) 将显示区域滚动到指定节点的位置
isBr(Node node) 判断给定节点是否为br
isEmptyBlock(Element node) 判断给定的元素是否是一个空元素
isEmptyBlock(Element node, RegExp reg) 根据指定的判断规则判断给定的元素是否是一个空元素
setViewportOffset(Element element, Object offset) 移动元素使得该元素的位置移动指定的偏移量的距离
moveChild(Node src, Node tag) 把节点src的所有子节点追加到另一个节点tag上去
moveChild(Node src, Node tag, Boolean dir) 把节点src的所有子节点移动到另一个节点tag上去, 可以通过dir参数控制附加的行为是“追加”还是“插入顶部”
isTagNode(Node node, String tagName) 检测节点的标签是否是给定的标签
filterNodeList(Array nodeList, Function fn) 给定一个节点数组,在通过指定的过滤器过滤后, 获取其中满足过滤条件的第一个节点
filterNodeList(Array nodeList, String tagNames) 给定一个节点数组nodeList和一组标签名tagNames, 获取其中能够匹配标签名的节点集合中的第一个节点
filterNodeList(Array nodeList, Function fn, Boolean forAll) 给定一个节点数组,在通过指定的过滤器过滤后, 如果参数forAll为true, 则会返回所有满足过滤 条件的节点集合, 否则, 返回满足条件的节点集合中的第一个节点
isInNodeEndBoundary(UE.dom.Range rng) 查询给定的range选区是否在给定的node节点内,且在该节点的最末尾
模块成员详细描述(UE.dom.domUtils)

getPosition(Node nodeA, Node nodeB)

方法 静态
1.2.6.1
获取节点A相对于节点B的位置关系
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
nodeA Node 需要查询位置关系的节点A
nodeB Node 需要查询位置关系的节点B
返回值
类型 描述
Number 节点A与节点B的关系
示例
javascript代码:
 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;

 }

getNodeIndex(Node node)

方法 静态
1.2.6.1
检测节点node在父节点中的索引位置
所属模块: UE.dom.domUtils
参考 参数列表
参数名 类型 描述
node Node 需要检测的节点对象
返回值
类型 描述
Number 该节点在父节点中的位置

getNodeIndex(Node node, Boolean mergeTextNode)

方法 静态
1.2.6.1
检测节点node在父节点中的索引位置, 根据给定的mergeTextNode参数决定是否要合并多个连续的文本节点为一个节点
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要检测的节点对象
mergeTextNode Boolean 是否合并多个连续的文本节点为一个节点
返回值
类型 描述
Number 该节点在父节点中的位置
示例
javascript代码:
 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 ) );

inDoc(Node node, DomDocument doc)

方法 静态
1.2.6.1
检测节点node是否在给定的document对象上
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要检测的节点对象
doc DomDocument 需要检测的document对象
返回值
类型 描述
Boolean 该节点node是否在给定的document的dom树上
示例
javascript代码:
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 ) );

findParent(Node node, Function filterFn)

方法 静态
1.2.6.1
根据给定的过滤规则filterFn, 查找符合该过滤规则的node节点的第一个祖先节点, 查找的起点是给定node节点的父节点。
  • 提示: 自定义的过滤方法filterFn接受一个Node对象作为参数, 该对象代表当前执行检测的祖先节点。 如果该 节点满足过滤条件, 则要求返回true, 这时将直接返回该节点作为findParent()的结果, 否则, 请返回false。
  • 警告: 查找的终点是到body节点为止
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要查找的节点
filterFn Function 自定义的过滤方法。
返回值
类型 描述
Node | Null 如果找到符合过滤条件的节点, 就返回该节点, 否则返回NULL
示例
javascript代码:
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 );

findParent(Node node, Function filterFn, Boolean includeSelf)

方法 静态
1.2.6.1
根据给定的过滤规则filterFn, 查找符合该过滤规则的node节点的第一个祖先节点, 如果includeSelf的值为true,则查找的起点是给定的节点node, 否则, 起点是node的父节点
  • 提示: 自定义的过滤方法filterFn接受一个Node对象作为参数, 该对象代表当前执行检测的祖先节点。 如果该 节点满足过滤条件, 则要求返回true, 这时将直接返回该节点作为findParent()的结果, 否则, 请返回false。
  • 提示: 如果includeSelf为true, 则过滤器第一次执行时的参数会是节点本身。 反之, 过滤器第一次执行时的参数将是该节点的父节点。
  • 警告: 查找的终点是到body节点为止
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要查找的节点
filterFn Function 自定义的过滤方法。
includeSelf Boolean 查找过程是否包含自身
返回值
类型 描述
Node | Null 如果找到符合过滤条件的节点, 就返回该节点, 否则返回NULL
示例
html代码:
 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>

findParentByTagName(Node node, Array tagNames)

方法 静态
1.2.6.1
查找node的节点名为tagName的第一个祖先节点, 查找的起点是node节点的父节点。
  • 警告: 查找的终点是到body节点为止
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要查找的节点对象
tagNames Array 需要查找的父节点的名称数组
返回值
类型 描述
Node | NULL 如果找到符合条件的节点, 则返回该节点, 否则返回NULL
示例
javascript代码:
1
2
3
 var node = UE.dom.domUtils.findParentByTagName( document.getElementsByTagName("div")[0], [ "BODY" ] );
 //output: BODY
 console.log( node.tagName );

findParentByTagName(Node node, Array tagNames, Boolean includeSelf)

方法 静态
1.2.6.1
查找node的节点名为tagName的祖先节点, 如果includeSelf的值为true,则查找的起点是给定的节点node, 否则, 起点是node的父节点。
  • 警告: 查找的终点是到body节点为止
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要查找的节点对象
tagNames Array 需要查找的父节点的名称数组
includeSelf Boolean 查找过程是否包含node节点自身
返回值
类型 描述
Node | NULL 如果找到符合条件的节点, 则返回该节点, 否则返回NULL
示例
javascript代码:
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 );

findParents(Node node)

方法 静态
1.2.6.1
查找节点node的祖先节点集合, 查找的起点是给定节点的父节点,结果集中不包含给定的节点。
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要查找的节点对象
返回值
类型 描述
Array 给定节点的祖先节点数组

findParents(Node node, Boolean includeSelf)

方法 静态
1.2.6.1
查找节点node的祖先节点集合, 如果includeSelf的值为true, 则返回的结果集中允许出现当前给定的节点, 否则, 该节点不会出现在其结果集中。
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要查找的节点对象
includeSelf Boolean 查找的结果中是否允许包含当前查找的节点对象
返回值
类型 描述
Array 给定节点的祖先节点数组

insertAfter(Node node, Node newNode)

方法 静态
1.2.6.1
在节点node后面插入新节点newNode
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 目标节点
newNode Node 新插入的节点, 该节点将置于目标节点之后
返回值
类型 描述
Node 新插入的节点

remove(Node node)

方法 静态
1.2.6.1
删除节点node及其下属的所有节点
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要删除的节点对象
返回值
类型 描述
Node 返回刚删除的节点对象
示例
html代码:
1
2
3
4
5
6
7
8
 <div id="test">
     <div id="child">你好</div>
 </div>
 <script>
     UE.dom.domUtils.remove( document.body, false );
     //output: false
     console.log( document.getElementById( "child" ) !== null );
 </script>

remove(Node node, Boolean keepChildren)

方法 静态
1.2.6.1
删除节点node,并根据keepChildren的值决定是否保留子节点
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要删除的节点对象
keepChildren Boolean 是否需要保留子节点
返回值
类型 描述
Node 返回刚删除的节点对象
示例
html代码:
1
2
3
4
5
6
7
8
 <div id="test">
     <div id="child">你好</div>
 </div>
 <script>
     UE.dom.domUtils.remove( document.body, true );
     //output: true
     console.log( document.getElementById( "child" ) !== null );
 </script>

getNextDomNode(Node node)

方法 静态
1.2.6.1
取得node节点的下一个兄弟节点, 如果该节点其后没有兄弟节点, 则递归查找其父节点之后的第一个兄弟节点, 直到找到满足条件的节点或者递归到BODY节点之后才会结束。
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 需要获取其后的兄弟节点的节点对象
返回值
类型 描述
Node | NULL 如果找满足条件的节点, 则返回该节点, 否则返回NULL
示例
html代码:
 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>
html代码:
 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>

getNextDomNode(Node node, Boolean startFromChild)

方法 静态
1.2.6.1
取得node节点的下一个兄弟节点, 如果startFromChild的值为ture,则先获取其子节点, 如果有子节点则直接返回第一个子节点;如果没有子节点或者startFromChild的值为false, 则执行getNextDomNode(Node node)的查找过程。
所属模块: UE.dom.domUtils
参考 参数列表
参数名 类型 描述
node Node 需要获取其后的兄弟节点的节点对象
startFromChild Boolean 查找过程是否从其子节点开始
返回值
类型 描述
Node | NULL 如果找满足条件的节点, 则返回该节点, 否则返回NULL

getWindow(Node node)

方法 静态
1.2.6.1
获取节点node所属的window对象
所属模块: UE.dom.domUtils
参数列表
参数名 类型 描述
node Node 节点对象
返回值
类型 描述