百度UEditor在線編輯器-2

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);   ==>  &lt;body&gt;You say:&quot;你好！Baidu &amp; UEditor!&quot;&lt;/body&gt;
UE.utils.unhtml(html,/[<>]/g)  ==>  &lt;body&gt;You say:"你好！Baidu & UEditor!"&lt;/body&gt;

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");

設置當前選中文字的字體

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 替換用的字符串