UEditor API 文档 版本:1.2.4 UE.Editor 依赖 editor.js, UE.Utils, UE.EventBase, UE.browser, core/dom/dtd.js, UE.dom.domUtils, UE.dom.Range, core/dom/Selection.js, plugins/serialize.js 编辑器主类,包含编辑器提供的大部分公用接口 Editor UEditor编辑器类 创建一个跟编辑器实例 container 编辑器容器对象 iframe 编辑区域所在的 iframe 对象 window 编辑区域所在的 window document 编辑区域所在的 document 对象 body 编辑区域所在的 body 对象 selection 编辑区域的选区对象 ready editor.ready(fn) fn是当编辑器渲染好后执行的 function 当编辑器ready 后执行传入的 fn, 如果编辑器已经完成 ready ,就马上执行 fn , fn 的中的 this 是编辑器实例。 大部分的实例接口都需要放在该方法内部执行,否则在IE 下可能会报错。 var editor = new UE.ui.Editor(); editor.render("myEditor"); editor.ready(function(){ editor.setContent("欢迎使用 UEditor ! "); }) destroy editor.destroy(); 销毁编辑器实例对象 render editor.render(containerId); //可以指定一个容器 ID editor.render(containerDom); //也可以直接指定容器对象 渲染编辑器的DOM 到指定容器,必须且只能调用一次 sync editor.sync(); //从编辑器的容器向上查找,如果找到就同步数据 editor.sync(formID); //formID制定一个要同步数据的 form 的 id, 编辑器的数据会同步到你指定 form 下 同步编辑器的数据,为提交数据做准备,主要用于你是手动提交的情况 后台取得数据得键值使用你容器上得name 属性,如果没有就使用参数传入的 textarea editor.sync(); form.sumbit(); //form变量已经指向了 form 元素 setHeight editor.setHeight(number); //纯数值,不带单位 设置编辑器高度 getContent editor.getContent() ⇒ String // 若编辑器中只包含字符 "<p><br /></p/>" 会返回空。 editor.getContent(fn) ⇒ String 获取编辑器内容 getContent默认是会现调用 hasContents 来判断编辑器是否为空,如果是,就直接返回空字符串 你也可以传入一个fn 来接替 hasContents 的工作,定制判断的规则 editor.getContent(function(){ return false //编辑器没有内容 , getContent 直接返回空 }) getAllHtml editor.getAllHtml() ⇒ String 取得完整的html 代码,可以直接显示成完整的 html 文档 getPlainTxt editor.getPlainTxt() ⇒ String 得到编辑器的纯文本内容,但会保留段落格式 getContentTxt editor.getContentTxt() ⇒ String 获取编辑器中的纯文本内容, 没有段落格式 setContent editor.setContent(html) 将html 设置到编辑器中 , 如果是用于初始化时给编辑器赋初值,则必须放在 ready 方法内部执行 var editor = new UE.ui.Editor() editor.ready(function(){ //需要 ready 后执行,否则可能报错 editor.setContent("欢迎使用 UEditor ! "); }) focus editor.focus([toEnd]) //默认 focus 到编辑器头部, toEnd 为 true 时 focus 到内容尾部 让编辑器获得焦点,toEnd 确定 focus 位置 execCommand editor.execCommand(cmdName) ⇒ {*} 执行编辑命令cmdName ,完成富文本编辑效果 queryCommandState editor.queryCommandState(cmdName) ⇒ (-1|0|1) 根据传入的command 命令,查选编辑器当前的选区,返回命令的状态 -1 当前命令不可用 0 当前命令可用 1 当前命令已经执行过了 queryCommandValue editor.queryCommandValue(cmdName) ⇒ {*} 根据传入的command 命令,查选编辑器当前的选区,根据命令返回相关的值 hasContents editor.hasContents() ⇒ (true|false) editor.hasContents(tags) ⇒ (true|false) // 若文档中包含 tags 数组里对应的 tag ,直接返回 true 检查编辑区域中是否有内容,若包含tags 中的节点类型,直接返回 true 默认有文本内容,或者有以下节点都不认为是空 {table:1,ul:1,ol:1,dl:1,iframe:1,area:1,base:1,col:1,hr:1,img:1,embed:1,input:1,link:1,meta:1,param:1} editor.hasContents(['span']) //如果编辑器里有这些,不认为是空 reset editor.reset() 重置编辑器,可用来做多个tab 使用同一个编辑器实例 清空编辑器内容 清空回退列表 enable editor.enable() 设置当前编辑区域可以编辑 disable editor.disable() editor.disable(except) //例外的命令,也即即使设置了 disable ,此处配置的命令仍然可以执行 设置当前编辑区域不可编辑,except 中的命令除外 //禁用工具栏中除加粗和插入图片之外的所有功能 editor.disable(['bold','insertimage']);//可以是单一的 String, 也可以是 Array show editor.show() 显示编辑器 hide editor.hide() 隐藏编辑器 getLang editor.getLang(path) ⇒ ( JSON|String) 路径根据的是 lang 目录下的语言文件的路径结构 根据制定的路径,获取对应的语言资源 editor.getLang('contextMenu.delete') //如果当前是中文,那返回是的是删除 getDialog editor.getDialog(dialogName) ⇒ Object 得到dialog 实例对象 var dialog = editor.getDialog("insertimage"); dialog.open(); //打开 dialog dialog.close(); //关闭 dialog UE.browser UEditor中采用的浏览器判断模块 ie UE.browser.ie ⇒ true|false 检测浏览器是否为IE opera UE.browser.opera ⇒ true|false 检测浏览器是否为Opera webkit UE.browser.webkit ⇒ true|false 检测浏览器是否为webkit 内核 mac UE.browser.mac ⇒ true|false 检测浏览器是否为mac 系统下的浏览器 quirks UE.browser.quirks ⇒ true|false 检测浏览器是否处于怪异模式 gecko UE.browser.gecko ⇒ true|false 检测浏览器是否处为gecko 内核 ie9Compat UE.browser.ie9Compat ⇒ true|false 检测浏览器是否为 IE9 模式 ie8 UE.browser.ie8 ⇒ true|false 检测浏览器是否为 IE8 浏览器 ie8Compat UE.browser.ie8Compat ⇒ true|false 检测浏览器是否为 IE8 模式 ie7Compat UE.browser.ie7Compat ⇒ true|false 检测浏览器是否运行在 兼容IE7 模式 ie6Compat UE.browser.ie6Compat ⇒ true|false 检测浏览器是否IE6 模式或怪异模式 chrome UE.browser.chrome ⇒ true|false 检测浏览器是否为chrome safari UE.browser.safari ⇒ true|false 检测浏览器是否为safari version UE.browser.version ⇒ number 浏览器版本判断 IE系列返回值为 5,6,7,8,9,10 等 gecko系列会返回 10900 , 158900 等 . webkit系列会返回其 build 号 ( 如 522 等 ). if ( UE.browser.ie && UE.browser.version == 6 ){ alert( "Ouch!居然是万恶的 IE6!" ); } isCompatible UE.browser.isCompatible ⇒ true|false 是否是兼容模式的浏览器 if ( UE.browser.isCompatible ){ alert( "你的浏览器相当不错哦! " ); } UE.Utils 依赖 editor.js UEditor封装使用的静态工具函数 each 1.2.4+ UE.utils.each(obj,iterator,[context]) 遍历数组,对象,nodeList obj 要遍历的对象 iterator 遍历的方法 , 方法的第一个是遍历的值,第二个是索引,第三个是 obj context iterator的上下文 UE.utils.each([1,2],function(v,i){ console.log(v)//值 console.log(i)//索引 }) UE.utils.each(document.getElementsByTagName('*'),function(n){ console.log(n.tagName) }) extend UE.utils.extend(target,source) ⇒ Object // 覆盖扩展 UE.utils.extend(target,source,true) =⇒ Object // 保留扩展 将source 对象中的属性扩展到 target 对象上 inherits UE.utils.inherits(subClass,superClass) ⇒ subClass 模拟继承机制,subClass 继承 superClass function SuperClass(){ this.name = "小李 "; } SuperClass.prototype = { hello:function(str){ console.log(this.name + str); } } function SubClass(){ this.name = "小张 "; } UE.utils.inherits(SubClass,SuperClass); var sub = new SubClass(); sub.hello("早上好 !"); ==> " 小张早上好! " bind UE.utils.bind(fn,context) ⇒ fn 用指定的context 作为 fn 上下文,也就是 this defer UE.utils.defer(fn,delay) ⇒ fn // 延迟 delay 毫秒执行 fn ,返回 fn UE.utils.defer(fn,delay,exclusion) ⇒ fn // 延迟 delay 毫秒执行 fn ,若 exclusion 为真,则互斥执行 fn 创建延迟delay 执行的函数 fn function test(){ console.log("延迟输出! "); } //非互斥延迟执行 var testDefer = UE.utils.defer(test,1000); testDefer(); => "延迟输出! "; testDefer(); => "延迟输出! "; //互斥延迟执行 var testDefer1 = UE.utils.defer(test,1000,true); testDefer1(); => //本次不执行 testDefer1(); => "延迟输出! "; indexOf UE.utils.indexOf(array,item) ⇒ index|-1 // 默认从数组开头部开始搜索 UE.utils.indexOf(array,item,start) ⇒ index|-1 //start 指定开始查找的位置 查找元素item 在数组 array 中的索引 , 若找不到返回 -1 removeItem UE.utils.removeItem(array,item) 移除数组array 中的元素 item trim UE.utils.trim(str) ⇒ String 删除字符串str 的首尾空格 listToMap UE.utils.listToMap(list) ⇒ Object //Object 形如 {test:1,br:1,textarea:1} 将字符串list( 以 ',' 分隔 ) 或者数组 list 转成哈希对象 unhtml UE.utils.unhtml(str); ⇒ String UE.utils.unhtml(str,reg) ⇒ String 将str 中的 html 符号转义 , 默认将转义 &<"> 四个字符,可自定义 reg 来确定需要转义的字符 var html = '<body>You say:"你好! Baidu & UEditor!"'; UE.utils.unhtml(html); ==> <body>You say:"你好! Baidu & UEditor!"</body> UE.utils.unhtml(html,/[<>]/g) ==> <body>You say:"你好! Baidu & UEditor!"</body> html UE.utils.html(str) ⇒ String // 详细参见 unhtml 将str 中的转义字符还原成 html 字符 cssStyleToDomStyle UE.utils.cssStyleToDomStyle(cssName) ⇒ String 将css 样式转换为驼峰的形式。如 font-size => fontSize loadFile UE.utils.loadFile(doc,obj) UE.utils.loadFile(doc,obj,fn) 动态加载文件到doc 中,并依据 obj 来设置属性,加载成功后执行回调函数 fn //指定加载到当前 document 中一个 script 文件,加载成功后执行 function utils.loadFile( document, { src:"test.js", tag:"script", type:"text/javascript", defer:"defer" }, function () { console.log('加载成功! ') }); isEmptyObject UE.utils.isEmptyObject(obj) ⇒ true|false 判断obj 对象是否为空 UE.utils.isEmptyObject({}) ==>true UE.utils.isEmptyObject([]) ==>true UE.utils.isEmptyObject("") ==>true fixColor UE.utils.fixColor(name,value) ⇒ value 统一将颜色值使用16 进制形式表示 rgb(255,255,255) => "#ffffff" clone UE.utils.clone(source) ⇒ anthorObj 新的对象是完整的 source 的副本 UE.utils.clone(source,target) ⇒ target 包含了 source 的所有内容,重名会覆盖 深度克隆对象,从source 到 target transUnitToPx UE.utils.transUnitToPx('20pt') ⇒ '27px' UE.utils.transUnitToPx('0pt') ⇒ '0' 转换cm/pt 到 px domReady UE.utils.domReady(fn) ⇒ fn // 返回一个延迟执行的方法 DomReady方法,回调函数将在 dom 树 ready 完成后执行 cssRule UE.utils.cssRule('添加的样式的节点名称 ',[' 样式 ' , ' 放到哪个 document 上 ']) UE.utils.cssRule('body','body{background:#ccc}') ⇒ null // 给 body 添加背景颜色 UE.utils.cssRule('body') ⇒样式的字符串 // 取得 key 值为 body 的样式的内容 , 如果没有找到 key 值先关的样式将返回空,例如刚才那个背景颜色,将返回 body{background:#ccc} UE.utils.cssRule('body','') ⇒ null // 清空给定的 key 值的背景颜色 动态添加css 样式 isString UE.utils.isString(str) ⇒ true|false 判断str 是否为字符串 isArray UE.utils.isArray(obj) ⇒ true|false 判断array 是否为数组 isFunction UE.utils.isFunction(obj) ⇒ true|false 判断obj 对象是否为方法 isNumber UE.utils.isNumber(obj) ⇒ true|false 判断obj 对象是否为数字 UE.EventBase 依赖 editor.js, UE.Utils UE采用的事件基类,继承此类的对应类将获取 addListener,removeListener,fireEvent 方法。 在UE 中, Editor 以及所有 ui 实例都继承了该类,故可以在对应的 ui 对象以及 editor 对象上使用上述方法。 addListener editor.addListener(types,fn) //types为事件名称,多个可用空格分隔 注册事件监听器 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 editor.removeListener(types,fn) //types为事件名称,多个可用空格分隔 移除事件监听器 //changeCallback为方法体 editor.removeListener("selectionchange",changeCallback); fireEvent editor.fireEvent(types) //types为事件名称,多个可用空格分隔 触发事件 editor.fireEvent("selectionchange"); UE.dom.domUtils 依赖 editor.js, UE.Utils, UE.browser, core/dom/dtd.js UEditor封装的底层 dom 操作库 getPosition UE.dom.domUtils.getPosition(nodeA,nodeB) ⇒ Number 获取节点A 相对于节点 B 的位置关系 switch (returnValue) { case 0: //相等,同一节点 case 1: //无关,节点不相连 case 2: //跟随,即节点 A 头部位于节点 B 头部的后面 case 4: //前置,即节点 A 头部位于节点 B 头部的前面 case 8: //被包含,即节点 A 被节点 B 包含 case 10://组合类型,即节点 A 满足跟随节点 B 且被节点 B 包含。实际上,如果被包含,必定跟随,所以 returnValue 事实上不会存在 8 的情况。 case 16://包含,即节点 A 包含节点 B case 20://组合类型,即节点 A 满足前置节点 A 且包含节点 B 。同样,如果包含,必定前置,所以 returnValue 事实上也不会存在 16 的情况 } getNodeIndex UE.dom.domUtils.getNodeIndex(node) ⇒ Number // 索引值从 0 开始 返回节点node 在父节点中的索引位置 inDoc UE.dom.domUtils.inDoc(node,doc) ⇒ true|false 检测节点node 是否在节点 doc 的树上,实质上是检测是否被 doc 包含 findParent UE.dom.domUtils.findParent(node) ⇒ Element // 直接返回 node 节点的父节点 UE.dom.domUtils.findParent(node,filterFn) ⇒ Element //filterFn 为过滤函数, node 作为参数,返回 true 时才会将 node 作为符合要求的节点返回 UE.dom.domUtils.findParent(node,filterFn,includeSelf) ⇒ Element //includeSelf 指定是否包含自身 查找node 节点的祖先节点 findParentByTagName UE.dom.domUtils.findParentByTagName(node,tagNames) ⇒ Element //tagNames 支持数组,区分大小写 UE.dom.domUtils.findParentByTagName(node,tagNames,includeSelf) ⇒ Element //includeSelf 指定是否包含自身 UE.dom.domUtils.findParentByTagName(node,tagNames,includeSelf,excludeFn) ⇒ Element //excludeFn 指定例外过滤条件,返回 true 时忽略该节点 通过tagName 查找 node 节点的祖先节点 findParents UE.dom.domUtils.findParents(node) ⇒ Array // 返回一个祖先节点数组集合,不包含自身 UE.dom.domUtils.findParents(node,includeSelf) ⇒ Array // 返回一个祖先节点数组集合, includeSelf 指定是否包含自身 UE.dom.domUtils.findParents(node,includeSelf,filterFn) ⇒ Array // 返回一个祖先节点数组集合, filterFn 指定过滤条件,返回 true 的 node 将被选取 UE.dom.domUtils.findParents(node,includeSelf,filterFn,closerFirst) ⇒ Array // 返回一个祖先节点数组集合, closerFirst 为 true 的话, node 的直接父亲节点是数组的第 0 个 查找节点node 的祖先节点集合 insertAfter UE.dom.domUtils.insertAfter(node,newNode) ⇒ newNode 在节点node 后面插入新节点 newNode remove UE.dom.domUtils.remove(node) ⇒ node UE.dom.domUtils.remove(node,keepChildren) ⇒ node 删除节点node ,并根据 keepChildren 指定是否保留子节点 getNextDomNode UE.dom.domUtils.getNextDomNode(node) ⇒ Element 取得node 节点在 dom 树上的下一个节点 , 即多叉树遍历 isBookmarkNode UE.dom.domUtils.isBookmarkNode(node) ⇒ true|false 检测节点node 是否属于 bookmark 节点 getWindow UE.dom.domUtils.getWindow(node) ⇒ window 对象 获取节点node 所在的 window 对象 getCommonAncestor UE.dom.domUtils.getCommonAncestor(nodeA,nodeB) ⇒ Element 得到nodeA 与 nodeB 公共的祖先节点 clearEmptySibling UE.dom.domUtils.clearEmptySibling(node) UE.dom.domUtils.clearEmptySibling(node,ignoreNext) //ignoreNext指定是否忽略右边空节点 UE.dom.domUtils.clearEmptySibling(node,ignoreNext,ignorePre) //ignorePre指定是否忽略左边空节点 清除node 节点左右兄弟为空的 inline 节点 <b></b><i>>xxxx<b>bb</b> --> xxxx<b>bbb> split UE.dom.domUtils.split(node,offset) ⇒ TextNode // 返回从切分位置开始的后一个文本节点 将一个文本节点node 拆分成两个文本节点, offset 指定拆分位置 isWhitespace UE.dom.domUtils.isWhitespace(node) ⇒ true|false 检测节点node 是否为空节点(包括空格、换行、占位符等字符) getXY UE.dom.domUtils.getXY(element) ⇒ Object // 返回坐标对象 {x:left,y:top} 获取元素element 相对于 viewport 的位置坐标 on UE.dom.domUtils.on(element,type,handler) //type支持数组传入 为元素element 绑定原生 DOM 事件, type 为事件类型, handler 为处理函数 UE.dom.domUtils.on(document.body,"click",function(e){ //e为事件对象, this 为被点击元素对戏那个 }) UE.dom.domUtils.on(document.body,["click","mousedown"],function(evt){ //evt为事件对象, this 为被点击元素对象 }) un UE.dom.donUtils.un(element,type,handler) //参见 on 解除原生DOM 事件绑定 isSameElement UE.dom.domUtils.isSameElement(nodeA,nodeB) ⇒ true|false 比较节点nodeA 与节点 nodeB 是否具有相同的标签名、属性名以及属性值 <span style="font-size:12px">ssss</span> and <span style="font-size:12px">bbbbbspan> => true <span style="font-size:13px">ssss</span> and <span style="font-size:12px">bbbbbspan> => false isSameStyle UE.dom.domUtils.isSameStyle(nodeA,nodeB) ⇒ true|false 判断节点nodeA 与节点 nodeB 的元素属性是否一致 isBlockElm UE.dom.domUtils.isBlockElm(node) ⇒ true|false 检查节点node 是否为块元素 isBody UE.dom.domUtils.isBody(node) ⇒ true|false 检测node 节点是否为 body 节点 breakParent UE.dom.domUtils.breakParent(node,parent) ⇒ node 以node 节点为中心,将该节点的指定祖先节点 parent 拆分成 2 块 <b>ooo</b>是 node 节点 <p>xxxx<b>ooo</b>xxx</p> ==> <p>xxx</p><b>ooo</b><p>xxx</p> <p>xxxxx<span>xxxx<b>ooo</b>xxxxxx</span></p> => <p>xxxxx<span>xxxx</span></p><b>ooo</b><p><span>xxxxxx</span></p> isEmptyInlineElement UE.dom.domUtils.isEmptyInlineElement(node) ⇒ 1|0 检查节点node 是否是空 inline 节点 <b><i></i></b> => 1 <b><i></i><u>u></b> => 1 <b></b> => 1 <b>xx<i></i></b> => 0 trimWhiteTextNode UE.dom.domUtils.trimWhiteTextNode(node) 删除node 节点下的左右空白文本子节点 mergeChild 合并node 节点下相同的子节点 UE.dom.domUtils.mergeChild(node,tagName) //tagName要合并的子节点的标签 <p><span style="font-size:12px;">xx<span style="font-size:12px;">aa</span>xx</span></p> ==> UE.dom.domUtils.mergeChild(node,'span') <p><span style="font-size:12px;">xxaaxx</span></p> getElementsByTagName UE.dom.domUtils.getElementsByTagName(node,tagName) ⇒ Array // 节点集合数组 原生方法getElementsByTagName 的封装 mergeToParent UE.dom.domUtils.mergeToParent(node) 将节点node 合并到父节点上 <span style="color:#fff"><span style="font-size:12px">xxx</span></span> ==> <span style="color:#fff;font-size:12px">xxx</span> mergeSibling UE.dom.domUtils.mergeSibling(node) UE.dom.domUtils.mergeSibling(node,ignorePre) //ignorePre指定是否忽略左兄弟 UE.dom.domUtils.mergeSibling(node,ignorePre,ignoreNext) //ignoreNext指定是否忽略右兄弟 合并节点node 的左右兄弟节点 <b>xxxx</b><b>ooob><b>xxxx</b> ==> <b>xxxxoooxxxxb> unSelectable UE.dom.domUtils.unSelectable(node) 设置节点node 及其子节点不会被选中 removeAttributes UE.dom.domUtils.removeAttributes(node,attrNames) 删除节点node 上的属性 attrNames , attrNames 为属性名称数组 //Before remove <span style="font-size:14px;" id="test" name="followMe">xxxxx</span> //Remove UE.dom.domUtils.removeAttributes(node,["id","name"]); //After remove <span style="font-size:14px;">xxxxx</span> createElement UE.dom.domUtils.createElement(doc,tag,attrs) ⇒ Node // 返回创建的节点 在doc 下创建一个标签名为 tag ,属性为 attrs 的元素 setAttributes UE.dom.domUtils.setAttributes(node,attrs) ⇒ node 为节点node 添加属性 attrs , attrs 为属性键值对 getComputedStyle UE.dom.domUtils.getComputedStyle(element,styleName) ⇒ String // 返回对应样式名称的样式值 获取元素element 的计算样式 getComputedStyle(document.body,"font-size") => "15px" getComputedStyle(form,"color") => "#ffccdd" removeClasses UE.dom.domUtils.removeClasses(element,classNames) 在元素element 上删除 classNames ,支持同时删除多个 //执行方法前的 dom 结构 <span class="test1 test2 test3">xxx</span> //执行方法 UE.dom.domUtils.removeClasses(element,["test1","test3"]) //执行方法后的 dom 结构 <span class="test2">xxx</span> addClass UE.dom.domUtils.addClass(element,classNames) 在元素element 上增加一个样式类 className ,支持以空格分开的多个类名 如果相同的类名将不会添加 hasClass UE.dom.domUtils.hasClass(element,className) ⇒ true|false 判断元素element 是否包含样式类名 className, 支持以空格分开的多个类名 , 多个类名顺序不同也可以比较 getStyle UE.dom.domUtils.getStyle(element,name) ⇒ String 获取元素element 的某个样式值 setStyle UE.dom.domUtils.setStyle(element,name,value) 为元素element 设置样式属性值 setStyles UE.dom.domUtils.setStyle(element,styles) //styles为样式键值对 为元素element 设置样式属性值 filterNodeList 1.2.4+ UE.dom.domUtils.filterNodeList(nodelist,filter,onlyFirst) ⇒ 节点 对于nodelist 用 filter 进行过滤 UE.dom.domUtils.filterNodeList(document.getElementsByTagName('*'),'div p') //返回第一个是 div 或者 p 的节点 UE.dom.domUtils.filterNodeList(document.getElementsByTagName('*'),function(n){return n.getAttribute('src')}) //返回第一个带 src 属性的节点 UE.dom.domUtils.filterNodeList(document.getElementsByTagName('*'),'i',true) //返回数组,里边都是 i 节点 UE.dom.Range 依赖 editor.js, UE.Utils, UE.browser, UE.dom.domUtils, core/dom/dtd.js Range范围实现类,本类是 UEditor 底层核心类,统一 w3cRange 和 ieRange 之间的差异,包括接口和属性 Range new UE.dom.Range(document) ⇒ Range 实例 创建一个跟document 绑定的空的 Range 实例 startContainer 开始边界的容器节点 , 可以是 elementNode 或者是 textNode startOffset 容器节点中的偏移量,如果是 elementNode 就是 childNodes 中的第几个,如果是 textNode 就是 nodeValue 的第几个字符 endContainer 结束边界的容器节点 , 可以是 elementNode 或者是 textNode endOffset 容器节点中的偏移量,如果是 elementNode 就是 childNodes 中的第几个,如果是 textNode 就是 nodeValue 的第几个字符 document 跟 range 关联的 document 对象 collapsed 是否是闭合状态 cloneContents range.cloneContents() ⇒ DocumentFragment 克隆选中的内容到一个fragment 里,如果选区是空的将返回 null deleteContents range.deleteContents() ⇒ Range 删除当前选区范围中的所有内容并返回range 实例,这时的 range 已经变成了闭合状态 DOM Element : <b>x<i>x[x<i>xx]x</b> //执行方法后 <b>x<i>x<i>|x</b> 注意range 改变了 range.startContainer => b range.startOffset => 2 range.endContainer => b range.endOffset => 2 range.collapsed => true extractContents range.extractContents() ⇒ DocumentFragment 将当前的内容放到一个fragment 里并返回这个 fragment ,这时的 range 已经变成了闭合状态 DOM Element : <b>x<i>x[x<i>xx]x</b> //执行方法后 返回的fragment 里的 dom 结构是 <i>x<i>xx dom树上的结构是 <b>x<i>x<i>|x</b> 注意range 改变了 range.startContainer => b range.startOffset => 2 range.endContainer => b range.endOffset => 2 range.collapsed => true setStart range.setStart(node,offset) ⇒ Range 设置range 的开始位置位于 node 节点内,偏移量为 offset 如果node 是 elementNode 那 offset 指的是 childNodes 中的第几个,如果是 textNode 那 offset 指的是 nodeValue 的第几个字符 setEnd range.setEnd(node,offset) ⇒ Range 设置range 的结束位置位于 node 节点,偏移量为 offset 如果node 是 elementNode 那 offset 指的是 childNodes 中的第几个,如果是 textNode 那 offset 指的是 nodeValue 的第几个字符 setStartAfter range.setStartAfter(node) ⇒ Range 将Range 开始位置设置到 node 节点之后 <b>xx<i>x|x</i>x</b> 执行setStartAfter(i) 后 range.startContainer =>b range.startOffset =>2 setStartBefore range.setStartBefore(node) ⇒ Range 将Range 开始位置设置到 node 节点之前 <b>xx<i>x|x</i>x</b> 执行setStartBefore(i) 后 range.startContainer =>b range.startOffset =>1 setEndAfter range.setEndAfter(node) ⇒ Range 将Range 结束位置设置到 node 节点之后 <b>xx<i>x|x</i>x</b> setEndAfter(i)后 range.endContainer =>b range.endtOffset =>2 setEndBefore range.setEndBefore(node) ⇒ Range 将Range 结束位置设置到 node 节点之前 <b>xx<i>x|x</i>x</b> 执行setEndBefore(i) 后 range.endContainer =>b range.endtOffset =>1 setStartAtFirst range.setStartAtFirst(node) ⇒ Range 将Range 开始位置设置到 node 节点内的开始位置 setStartAtLast range.setStartAtLast(node) ⇒ Range 将Range 开始位置设置到 node 节点内的结束位置 setEndAtFirst range.setEndAtFirst(node) ⇒ Range 将Range 结束位置设置到 node 节点内的开始位置 setEndAtLast range.setEndAtLast(node) ⇒ Range 将Range 结束位置设置到 node 节点内的结束位置 selectNode range.selectNode(node) ⇒ Range 选中完整的指定节点, 并返回包含该节点的 range selectNodeContents range.selectNodeContents(node) ⇒ Range 选中node 内部的所有节点,并返回对应的 range <b>xx[x<i>xxx</i>]xxx</b> 执行后 <b>[xxx<i>xxx</i>xxx]</b> range.startContainer =>b range.startOffset =>0 range.endContainer =>b range.endOffset =>3 cloneRange range.cloneRange() ⇒ Range 克隆一个新的range 对象 collapse range.collapse() ⇒ Range range.collapse(true) ⇒ Range // 闭合选区到头部 让选区闭合到尾部,若toStart 为真,则闭合到头部 shrinkBoundary range.shrinkBoundary() ⇒ Range //range 开始位置和结束位置都调整,参见 adjustmentBoundary range.shrinkBoundary(true) ⇒ Range // 仅调整开始位置,忽略结束位置 调整range 的边界,使其 " 收缩 " 到最小的位置 <b>xx[</b>xxxxx] ==> <b>xxb>[xxxxx] <b>x[xx</b><i>]xxx> ==> <b>x[xx]</b><i>xxx> [<b><i>xxxx</i>xxxxxxx</b>] ==> <b><i>[xxxx</i>xxxxxxx]</b> getCommonAncestor range.getCommonAncestor([includeSelf, ignoreTextNode]) ⇒ Element 获取当前range 所在位置的公共祖先节点,当前 range 位置可以位于文本节点内,也可以包含整个元素节点,也可以位于两个节点之间 <b>xx[xx<i>xx]x</i>xxx</b> ==>getCommonAncestor() ==> b <b>[<img/>]</b> range.startContainer ==> b range.startOffset ==> 0 range.endContainer ==> b range.endOffset ==> 1 range.getCommonAncestor() ==> b range.getCommonAncestor(true) ==> img <b>xxx|xx</b> range.startContainer ==> textNode range.startOffset ==> 3 range.endContainer ==> textNode range.endOffset ==> 3 range.getCommonAncestor() ==> textNode range.getCommonAncestor(null,true) ==> b trimBoundary range.trimBoundary([ignoreEnd]) ⇒ Range //true 忽略结束边界 调整边界容器,如果是textNode, 就调整到 elementNode 上 DOM Element : <b>|xxx</b> startContainer = xxx; startOffset = 0 //执行后本方法后 startContainer = <b>; startOffset = 0 Dom Element : <b>xx|x</b> startContainer = xxx; startOffset = 2 //执行本方法后, xxx 被实实在在地切分成两个 TextNode startContainer = <b>; startOffset = 1 txtToElmBoundary 如果选区在文本的边界上,就扩展选区到文本的父节点上 Dom Element : <b> |xxx</b> startContainer = xxx; startOffset = 0 //本方法执行后 startContainer = <b>; startOffset = 0 Dom Element : <b> xxx| </b> startContainer = xxx; startOffset = 3 //本方法执行后 startContainer = <b>; startOffset = 1 insertNode range.insertNode(node) ⇒ Range //node 可以是 textNode,elementNode,fragment 在当前选区的开始位置前插入一个节点或者fragment , range 的开始位置会在插入节点的前边 Range : xxx[x<p>xxxx</p>xxxx]x<p>sdfsdfp> 待插入Node : <p>ssss</p> 执行本方法后的Range : xxx[<p>ssss</p>x<p>xxxxp>xxxx]x<p>sdfsdf</p> setCursor range.setCursor([toEnd]) ⇒ Range //toEnd 为 true 时,光标闭合到选区的末尾 设置光标闭合位置,toEnd 设置为 true 时光标将闭合到选区的结尾 createBookmark range.createBookmark([serialize]) ⇒ Object //{start: 开始标记 ,end: 结束标记 ,id:serialize} serialize 为真时,开始结束标记是插入节点的 id ,否则是插入节点的引用 创建当前range 的一个书签,记录下当前 range 的位置,方便当 dom 树改变时,还能找回原来的选区位置 moveToBookmark range.moveToBookmark(bookmark) ⇒ Range // 让当前的 range 选到给定 bookmark 的位置 ,bookmark 对象是由 range.createBookmark 创建的 移动边界到书签位置,并删除插入的书签节点 enlarge range.enlarge() ⇒ Range 调整range 的边界,使其 " 放大 " 到最近的父 block 节点 <p><span>xxx</span><b>x[xb>xxxxx]</p><p>xxxp> ==> [<p><span>xxx</span><b>xxb>xxxxx</p>]<p>xxxp> adjustmentBoundary range.adjustmentBoundary() ⇒ Range // 参见 shrinkBoundary 调整Range 的边界,使其 " 缩小 " 到最合适的位置 <b>xx[</b>xxxxx] ==> <b>xxb>[xxxxx] <b>x[xx</b><i>]xxx> ==> <b>x[xx</b>]<i>xxx> applyInlineStyle range.applyInlineStyle(tagName) ⇒ Range //tagName 为需要添加的样式标签名 range.applyInlineStyle(tagName,attrs) ⇒ Range //attrs 为属性 json 对象 给range 选区中的内容添加给定的标签,主要用于 inline 标签 <p>xxxx[xxxx]x</p> ==> range.applyInlineStyle("strong") ==> <p>xxxx[<strong>xxxx</strong>]x</p> <p>xx[dd<strong>yyyy</strong>]x</p> ==> range.applyInlineStyle("strong") ==> <p>xx[<strong>ddyyyy</strong>]x</p> <p>xxxx[xxxx]x</p> ==> range.applyInlineStyle("strong",{"style":"font-size:12px"}) ==> <p>xxxx[<strong style="font-size:12px">xxxx</strong>]x</p> removeInlineStyle range.removeInlineStyle(tagNames) ⇒ Range //tagNames 为需要去掉的样式标签名 , 支持 "b" 或者 ["b","i","u"] 对当前range 选中的节点,去掉给定的标签节点,但标签中的内容保留,主要用于处理 inline 元素 xx[x<span>xxx<em>yyy</em>zz]z</span> => range.removeInlineStyle(["em"]) => xx[x<span>xxxyyyzz]z</span> getClosedNode range.getClosedNode() ⇒ node|null 得到一个自闭合的节点, 常用于获取自闭和的节点,例如图片节点 <b>xxxx[<img />]xxx</b> select range.select(); ⇒ Range 根据当前range 选中内容节点(在页面上表现为反白显示) scrollToView range.scrollToView([win,offset]) ⇒ Range // 针对 window 对象,若不指定,将以编辑区域的窗口为准 ,offset 偏移量 滚动条跳到当然range 开始的位置 UE.ajax 依赖 UE.Utils UEditor内置的 ajax 请求模块 request UE.ajax.request(url,ajaxOpt); 发出ajax 请求, ajaxOpt 中默认包含 method , timeout , async , data , onsuccess 以及 onerror 等六个,支持自定义添加参数 UE.ajax.request('http://www.xxxx.com/test.php',{ //可省略,默认 POST method:'POST', //可以自定义参数 content:'这里是提交的内容 ', //也可以直接传 json ,但是只能命名为 data ,否则当做一般字符串处理 data:{ name:'UEditor', age:'1' } onsuccess:function(xhr){ console.log(xhr.responseText); }, onerror:function(xhr){ console.log(xhr.responseText); } }) UE UEditor的顶部命名空间 getEditor 1.2.4+ UE.getEditor(id,[opt]) ⇒ Editor 实例 提供一个全局的方法得到编辑器实例 id 放置编辑器的容器 id, 如果容器下的编辑器已经存在,就直接返回 opt 编辑器的可选参数 UE.getEditor('containerId',{onready:function(){//创建一个编辑器实例 this.setContent('hello') }}); UE.getEditor('containerId'); //返回刚创建的实例 编辑器事件接口 ready editor.addListener("ready",fn) 编辑器加载完成事件(核心),在编辑器准备好所有运行条件时触发,大部分场景可以使用editor.ready(fn) 取代。 editor.addListener("ready",function(){ //this为 editor 实例 this.setContent("欢迎使用 UEditor ! "); }) //同如下接口方式调用 editor.ready(function(){ this.setContent("欢迎使用 UEditor ! "); }) selectionChange editor.addListener("selectionChange",fn) editor.fireEvent("selectionChange") 选区变化事件(核心),当选区出现变化时触发。 在UEditor 中,任何涉及到光标改变的操作都会触发选区变化事件,该事件主要用来实现工具栏状态反射。 editor.addListener("selectionChange",function(){ //this为 editor 实例 }) contentChange editor.addListener("contentChange",fn) editor.fireEvent("contentChange") 内容变化事件(核心),当编辑区域中的文本内容出现变化时触发 (before|after)Paste editor.addListener("beforePaste",fn) 粘贴事件(核心),当使用ctr+v 快捷键粘贴 ( 包括 Chrome 、 FF 浏览器的右键粘贴 ) 时会触发本事件 beforePaste 在将粘贴的内容写到编辑器之前触发,这个事件触发时,粘贴的内容还未在编辑器内显示 afterPaste 粘贴的内容已经写到编辑器里边后触发 editor.addListener("beforePaste",function(type,data){ //beforePaste事件监听区别于 afterPaste 事件监听最主要的一个方面是存在一个 data 参数, //该 data 参数是一个对象,包含属性 html 。 //若用户在此处更改该 html 的值时,将会影响粘贴到编辑器中的内容 , 主要用于粘贴时需要特殊处理的一些场景。 console.log(this.getContent) //this都是当前编辑器的实例 //before事件才用这个参数,用来在写出编辑器之前对粘贴进来的内容进行最后的修改 data.html = "我把粘贴内容改成了这句话 "; }) (before|after)SetContent editor.addListener("beforeSetContent",fn) 设置内容事件(核心),当调用setContent 方法时触发 beforeSetContent 在内容写到编辑器之前触发 afterSetContent 内容已经写到编辑器里边后触发 editor.addListener("beforeSetContent",function(type,data){ //beforeSetContent事件监听区别于 afterSetContent 事件监听最主要的一个方面是存在一个 data 参数, //该 data 参数是一个对象,包含属性 html 。 //若用户在此处更改该 html 的值时,将会影响设置到编辑器中的内容 , 主要用于设置内容时需要特殊处理的一些场景。 data.html = "我把设置内容改成了这句话 "; }) getAllHtml editor.addListener("getAllHtml",fn) getAllHtml事件,当调用 getAllHtml 方法时触发 主要用来对于生成的整个html 代码中的 head 内容进行定制,比如你想插入你自己的样式, script 标签等,用来在展示时使用 editor.addListener("getAllHtml",function(type,data){ //data是 document 中 head 部分 html 的封装,可通过 data.html 来获取对应字符串。 //需要修改的话得重新赋值 data.html = '<style type="text/css"> body{margin:0;}'; }) beforeSubmit editor.addListener("beforeSubmit",fn) //若 fn 返回 false ,则阻止本次提交 内容提交事件( 插件 ) ,当内容提交插件加载并调用了 autosubmit 命令时触发,多用于提交之前的验证 editor.addListener("beforeSubmit",function(){ if(!editor.hasContents()){ return false; } }) catchRemoteError editor.addListener("catchRemoteError",fn) 如果抓取远程的图片失败了,就触发 editor.addListener("catchRemoteError",function(){ console.log("抓取失败了! ") }) catchRemoterSuccess editor.addListener("catchRemoterSuccess",fn) 当抓取远程的图片成功并会返回生成图片的链接时触发 editor.addListener("catchRemoterSuccess",function(){ console.log("抓取成功 ") }) sourceModeChanged editor.addListener("sourceModeChanged",fn) 编辑模式切换事件(插件),当源码模式和富文本模式发生切换时触发事件 editor.addListener("sourceModeChanged",function(type,mode){ //mode代表了当前的编辑模式, true 代表切换到了源码模式, false 代表切换到了富文本模式 }) fullScreenChanged editor.addListener("fullScreenChanged",fn) 全屏切换事件(插件),当执行全屏切换的时候触发事件 editor.addListener("fullScreenChanged",function(type,mode){ //mode代表当前是否全屏, true 代表切换到了全屏模式, false 代表切换到了普通模式 }) wordCountOverflow editor.addListener("wordCountOverflow",fn) 字数超出限制事件(插件),当输入的字符数超出配置项配置时触发 editor.addListener("wordCountOverflow",function(type,length){ console.log(length) }) 编辑器命令接口 UEditor中执行命令的统一调用格式为 editor.execCommand("cmdName"[,opt]); 检测当前命令是否可用的方法是 editor.queryCommandState("cmdName"); 部分命令可以返回命令值,其格式为 editor.queryCommandValue("cmdName"); anchor editor.execCommand("anchor","name"); //锚点的名字 插入锚点 bold editor.execCommand("bold"); 为当前选中文字添加粗体效果 italic editor.execCommand("italic"); 为当前选中文字添加斜体效果 underline editor.execCommand("underline"); 为当前选中文字添加下划线效果 strikethrough editor.execCommand("strikethrough"); 为当前选中文字添加删除线效果 superscript editor.execCommand("superscript"); 将当前选中文字转换成上标 subscript editor.execCommand("subscript"); 将当前选中文字转换成下标 foreColor editor.execCommand("foreColor","#ffffff"); 为当前选中文字添加颜色 backColor editor.execCommand("backColor","#dddddd"); 为当前选中文字添加背景颜色 fontFamily editor.execCommand("fontFamily","微软雅黑 ,Microsoft YaHei"); 设置当前选中文字的字体 fontSize editor.execCommand("fontSize","32px"); 设置当前选中文字的字号 paragraph editor.execCommand("paragraph","h1"); 设置当前选区的段落格式, 如 p,h1,h2,h3,... insert(Un)OrderedList editor.execCommand("insertOrderedList"); 将当前选区变换成有序或者无序列表 lineHeight editor.execCommand("lineHeight"); 设置当前选区的行间距 justify editor.execCommand("justify",align); //align可为 Left , Right , Center , Justify 设置当前选区中的字体对齐方式 toUppercase editor.execCommand("toUppercase"); 将当前选中文字中的字母转换成大写 toLowercase editor.execCommand("toLowercase"); 将当前选中文字中的字母转换成小写 blockquote editor.execCommand("blockquote"); 为当前选区所在的块级元素添加引用标记 directionality editor.execCommand("directionality",dir); //dir可为 LTR,RTL 设置当前选区所在块级元素的文字输入方向 removeFormat editor.execCommand("removeFormat") //根据 editor_config.js 里的 removeFormatTags , removeFormatAttributes 两个属性作为规则 editor.execCommand("removeFormat",tags,style); //清除指定 tags 上的指定 style 清除当前选中文字上的所有样式或者指定样式 editor.execCommand("removeFormat",'span,a','color,background-color') pastePlain ue.execCommand("pastePlain"); 切换纯文本粘贴模式 formatMatch editor.execCommand("formatMatch"); 开启格式刷功能 clearDoc editor.execCommand("clearDoc"); 清空文档 delete editor.execCommand("delete"); 删除当前选中文本 selectAll editor.execCommand("selectAll"); 全部选择 undo editor.execCommand("undo"); 撤销操作 redo editor.execCommand("redo"); 恢复操作 autoTypeset editor.execCommand("autoTypeset"); 对整个编辑文档进行自动排版 insertHtml editor.execCommand("insertHtml","欢迎使用 UEditor ! ") 在当前选区位置插入一段html 代码,最基本功能。大部分其他插入命令都会调用此命令完成最后的插入 link editor.execCommand("link",linkObj); 在当前选区位置插入一个超链接 editor.execCommand("link",{ href: "http://ueditor.baidu.com", //超链地址,必选 data_ue_src: "http://ueditor.baidu.com", //UE内部使用参数,与 href 保持一致即可,可选 target: "_self", //目标窗口,可选 textValue: "UEditor", //链接显示文本,可选 title: "百度开源富文本编辑器 UEditor 官网 " // 标题,可选 }) insertImage editor.execCommand("insertImage",imageObj); 在当前选区位置插入一个图片 editor.execCommand("insertImage",{ src: "http://ueditor.baidu.com/logo.jpg", //图片链接地址 , 必选 data_ue_src: "http://ueditor.baidu.com/logo.jpg", //UE内部使用参数,与 src 保持一致即可,可选 width: 300, //图片显示宽度,可选 height: 400, //图片显示高度,可选 border: 2, //图片边框,可选 hspace: 5, //图片左右边距,可选 vspace: 2, //图片上下边距,可选 alt: 'UEditor-logo', //图片替换文字,可选 title: "百度开源富文本编辑器 UEditor 官网 " // 图片标题,可选 }) insertVideo editor.execCommand("insertVideo",videoObj); 在当前选区位置插入一个视频 editor.execCommand("insertVideo",{ url: "http://youku.com/id?id=1233122", //视频地址,必选 width: 420, //视频宽度,可选 height: 280, //视频高度,可选 align: "none" //对齐方式,支持 right , left , center , none ,可选 }) date|time editor.execCommand("date"); 在当前选区位置插入一个日期或者时间 pageBreak editor.execCommand("pageBreak"); 在当前选区位置插入一个分页符标记 source editor.execCommand("source"); 切换源码编辑模式和富文本编辑模式 snapScreen editor.execCommand("snapScreen"); IE下进入截屏模式 insertTable editor.execCommand("insertTable",rows,cols); 插入表格 searchreplace editor.execCommand("searchreplace",opt); 查找替换 opt是个 json 对象 , 属性如下 all true表示查找整个文档, false 表示从上次的位置开始查找 , 默认是 false casesensitive 大小写铭感, true 是铭感 , 默认是 false dir 1表示从前往后查,- 1 表示从后往前 searchStr 查找的字符串 replaceStr 替换用的字符串