方法 | 描述 | |
---|---|---|
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 );
|