2.2. 初始化參數列表
2.3. API函數接口列表
2.4. 上傳程序開發規范
2.5. 插件開發指南
2.6. 皮膚設計指南
2.2. 初始化參數列表
初始化參數示例代碼：
$('#elm1').xheditor({tools:'full',skin:'default',showBlocktag:true,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://xheditor.com/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png"});
初始化參數列表：
-
tools：自定義工具按鈕
參數值：full(完全),mfull(多行完全),simple(簡單),mini(迷你)
或者自定義字符串，例如：'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'完整按鈕表： |：分隔符 /：強制換行 Cut：剪切 Copy：復制 Paste：粘貼 Pastetext：文本粘貼 Blocktag：段落標簽 Fontface：字體 FontSize：字體大小 Bold：粗體 Italic：斜體 Underline：下划線 Strikethrough：中划線 FontColor：字體顏色 BackColor：字體背景色 SelectAll：全選 Removeformat：刪除文字格式 Align：對齊 List：列表 Outdent：減少縮進 Indent：增加縮進 Link：超鏈接 Unlink：刪除鏈接 Anchor：錨點 Img：圖片 Flash：Flash動畫 Media：Windows media player視頻 Hr：插入水平線 Emot：表情 Table：表格 Source：切換源代碼模式 Preview：預覽當前代碼 Print：打印 Fullscreen：切換全屏模式 About：關於xhEditor -
skin：皮膚風格選擇
參數值：default(默認風格),o2007blue(Office 2007 藍色),o2007silver(Office 2007 銀色),vista(Vista),nostyle(NoStyle) -
layerShadow：陰影的深度(按鈕面板和模式窗口的背景陰影)
參數值：0(不顯示陰影),大於0的數值(顯示陰影並設置陰影的深度) -
clickCancelDialog：點擊任意位置取消按鈕面板功能
參數值：默認true(開啟點擊取消功能),false(關閉點擊取消功能，必需要點擊“取消”按鈕才能關閉按鈕面板) -
showBlocktag：顯示段落標簽
參數值：true(顯示段落標簽),false(不顯示) -
linkTag：樣式鏈接link標簽保留狀態
參數值：true(保留樣式鏈接link標簽),false(清理樣式鏈接link標簽) -
internalScript：內部JS代碼保留狀態
參數值：true(保留內部JS代碼),false(清理內部JS代碼) -
inlineScript：內聯JS代碼保留狀態
參數值：true(保留內聯JS代碼),false(清理內聯JS代碼) -
internalStyle：內部樣式保留狀態
參數值：true(保留內部樣式),false(清理內部樣式) -
inlineStyle：內聯樣式保留狀態
參數值：true(保留內聯樣式),false(清理內聯樣式) -
width：編輯器寬度
參數值：不帶單位的數字，例：300 -
height：編輯器高度
參數值：不帶單位的數字，例：100 -
background：編輯器背景
參數值：字符串，例：url(test.gif) no-repeat，設置編輯器背景，格式同CSS同名參數一致。建議直接設置textarea的css背景
備注：v1.1.1新添加 -
loadCSS：加載樣式
參數值：URL地址、URL數組以及直接內部樣式，例如：'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'<br />備注：1.0.0 RC3新添加加載內部樣式功能 -
fullscreen：默認全屏顯示
參數值：true(全屏大小),false(標准大小) -
sourceMode：默認源代碼模式
參數值：true(源代碼模式),false(編輯模式) -
forcePtag：強制P標簽
參數值：true(強制使用P標簽),false(不強制),默認true -
cleanPaste：是否清理粘貼的HTML代碼
參數：0(不做任何清理),1(簡單清理Word),2(深入清理Word),3(強制轉文本),默認為1簡單清理Word
說明：若網站應用需要保留更多的Word樣式效果，請設置此值為1，不過產生的HTML代碼體積會大大增大
備注：1.1.4版本中新變更，原為wordDeepClean和forcePasteText兩個參數 -
disableContextmenu：禁用編輯區的右鍵菜單
參數值：true(禁用右鍵菜單),false(不禁用),默認false
備注：v1.1.0新添加 -
editorRoot：編輯器JS文件所在的根路徑
參數值：編輯器所在的根路徑，用在某些特殊情況下定位編輯器的根路徑，默認為空，讀取默認的編輯器根路徑
備注：v1.1.0新添加 -
shortcuts：自定義鍵盤快捷方式
參數：快捷鍵對應事件代碼的對象數組
示例：{'ctrl+enter':function(){$('#frmTest').submit();}}
備注：1.0.0 beta2新添加 -
urlBase：相對URL地址的基地址
參數：字符串的URL地址，用以解決前后台不在同一路徑的資源定位問題
備注：1.1.0新添加 -
urlType：本地URL地址強制轉換方式選擇
參數：abs(絕對路徑),root(根路徑),rel(相對路徑)
備注：1.0.0 beta2新添加,v1.1.0版中名字由localUrl變更為urlType -
emotPath：修改表情圖片的URL根路徑
參數：字符串的URL地址，默認為空，指向編輯器路徑下的默認表情
備注：1.1.0新添加 -
emotMark：是否在表情img標簽上標注emot屬性
參數：true(標注),false(不標注),默認為false
說明：若使用了ubb插件，請設置此屬性為true
備注：1.0.0 beta2新添加 -
emots：添加自定義表情
參數：可定義多個JSON對象數組，示例如下：{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}}
name：表情分組名
count：表情數量
list：表情列表，例：{test1:'表情1',test2:'表情2'}，鍵名代表文件名，擴展名必需為gif，鍵值代表alt信息
width：單個表情區域寬度，必需大於或等於表情最大寬度
height：單表情區域高度，必需大於或等於表情最大高度
line：單行顯示表情數量
說明：count和list必需選其中一個值，注意count模式插入表情img的alt為空
備注：1.0.0 beta2新添加 -
hoverExecDelay：懸停自動執行延遲的時間
參數：數值(單位毫秒)，默認為100，設置為-1關閉此功能
備注：1.0.0 rc2新添加 -
defLinkText：超鏈接的默認文字
參數值：字符串(默認值：“點擊打開鏈接”)
說明：只在不選擇任何內容的情況下才會用到這個參數值 -
modalWidth：showModal彈出窗口的默認寬度
參數值：數值，默認為350
說明：彈出窗口的默認寬度 -
modalHeight：showModal彈出窗口的默認高度
參數值：數值，默認為220
說明：彈出窗口的默認高度 -
modalTitle：showModal彈出窗口是否顯示上方的標題欄
參數值：true(顯示),false(不顯示)
說明：控制彈出窗口是否顯示上方的標題欄，默認為顯示，若需要顯示一個更定制個性化的iframe窗口，可通過此參數隱藏上方的標題欄 -
upBtnText：上傳按鈕的文字
參數值：任意字符串,默認值：“上傳”
備注：1.0.0 beta2新添加 -
html5Upload：是否開啟HTML5上傳支持
參數值：true(允許),false(不允許),默認為true允許
說明：本功能需要瀏覽器支持HTML5上傳
備注：1.0.0 Final新添加 -
upMultiple：允許一次上傳多少個文件
參數值：大於0的數值,默認：99,設置為1關閉多文件上傳
說明：本功能需要瀏覽器支持HTML5上傳
備注：1.0.0 RC3新添加 -
upLinkUrl：超鏈接文件上傳接收URL
參數值：接收用戶上傳的服務器端程序URL，默認留空為禁用超鏈接上傳功能，具體使用方法請參考demo8演示文件
注：可使用內置變量：{editorRoot}，代表當前編輯器的根路徑，例：{editorRoot}upload.php -
upLinkExt：超鏈接上傳前限制本地文件擴展名
參數值：超鏈接上傳前限制的文件擴展名列表，默認為：zip,rar,txt，建議與服務端擴展名檢查列表一致 -
upImgUrl：圖片文件上傳接收URL
參數值：接收用戶上傳的服務器端程序URL，默認留空為禁用上傳功能，具體使用方法請參考demo8演示文件
注：可使用內置變量：{editorRoot}，代表當前編輯器的根路徑，例：{editorRoot}upload.php -
upImgExt：圖片上傳前限制本地文件擴展名
參數值：圖片上傳前限制的文件擴展名列表，默認為：jpg,jpeg,gif,png，建議與服務端擴展名檢查列表一致 -
upFlashUrl：動畫文件上傳接收URL
參數值：接收用戶上傳的服務器端程序URL，默認留空為禁用上傳功能，具體使用方法請參考demo8演示文件
注：可使用內置變量：{editorRoot}，代表當前編輯器的根路徑，例：{editorRoot}upload.php -
upFlashExt：動畫上傳前限制本地文件擴展名
參數值：動畫上傳前限制的文件擴展名列表，默認為：swf，建議與服務端擴展名檢查列表一致 -
upMediaUrl：視頻文件上傳接收URL
參數值：接收用戶上傳的服務器端程序URL，默認留空為禁用上傳功能，具體使用方法請參考demo8演示文件
注：可使用內置變量：{editorRoot}，代表當前編輯器的根路徑，例：{editorRoot}upload.php -
upMediaExt：視頻上傳前限制本地文件擴展名
參數值：視頻上傳前限制的文件擴展名列表，默認為：avi，建議與服務端擴展名檢查列表一致 -
onUpload：文件上傳成功回調函數
參數值：成功后需要執行的函數
說明：這個函數執行時返回的值為上傳程序返回的msg變量，可能為字符串或者數組，若為字符串則直接代表url，若是數組，則必需包含一個url的變量，其它可由可開發者自定義
備注：1.0.0 beta2新添加 -
plugins：自定義按鈕之插件擴展
插件對象的屬性解釋：
c：樣式表名稱
t：插件名字(鼠標在按鈕上方時顯示)
s：快捷方式，例："ctrl+enter"
h：是否鼠標懸停直接執行,1:直接執行(省略當前值代表不直接執行)
e：按鈕點擊后需要執行的代碼(省略執行代碼，則把當前的插件名作為參數，調用瀏覽器的execCommand函數)
特別說明：
如果您希望樣式表存儲在系統自帶的模板目錄ui.css中，請將插件對象的樣式名留空，則會自動按照插件名來調用相應的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名
具體調用方法請參考演示文件夾中的demo9 -
submitID：觸發表單提交的按鈕ID值
參數值：表單提交按鈕的ID值，默認在form表單上綁定submit以同步結果
說明：通過本參數，在非標准submit提交環境下，比如AJAX提交，可以由用戶點擊提交按鈕以觸發編輯器最新值的同步
備注：v1.1.7新添加 -
onPaste：剪切板粘貼回調函數
參數值：用戶粘貼后需要執行的函數
說明：此函數用來過濾用戶粘貼的代碼，若返回false禁用粘貼
備注：v1.1.8新添加 -
localUrlTest：非本站域名測試正則表達式
參數值：正則表達式
說明：本參數用來測試某些組件中測試URL是否屬於本站域名
備注：v1.1.8新添加 -
remoteImgSaveUrl：遠程圖片抓取接收程序URL
參數值：字符串(若不設置不開啟此功能)
說明：當localUrlTest測試為false時，會將圖片URL發往當前參數指定的服務器端上傳接收程序，抓取成功后將本地URL返回並替換
備注：v1.1.8新添加 -
readTip：無障礙讀屏提示
參數值：字符串(默認為空)
說明：無障礙讀屏軟件提示文字，可用來為殘疾人士提示快捷鍵等信息
備注：v1.1.9新添加
2.3. API函數接口列表
API接口示例代碼：
var editor=$('#elm1').xheditor({tools:'full',skin:'default'});
editor.focus();
editor.setSource('str')
sHtml=editor.getSource()
editor.appendHTML('<p>aaa</p>')
editor.pasteHTML('<p>aaa</p>')
editor.pasteText('str')
sHtml=editor.formatXHTML('<b>aaa</b>')
editor.toggleSource()
editor.toggleFullscreen()
alert(editor.settings.upImgExt);
editor.settings.upImgExt='txt,doc';
API接口列表：
-
focus：使編輯器獲得焦點
無參數 -
setSource：設置編輯器源代碼
參數1：要設置的源代碼內容，例：'<p>aaa</p>' -
getSource：返回編輯器格式后的源代碼
無參數 -
appendHTML：粘貼HTML內容到編輯器結尾處
參數1：要粘貼的HTML代碼，例：'<p>uuu</p>'
注：0.9.5版添加 -
getSelect：返回當前選中的內容
參數1：返回格式，可選'text'返回文本格式，其它所有值都返回HTML格式 -
pasteHTML：粘貼HTML內容到編輯器當前光標處
參數1：要粘貼的HTML代碼，例：'<p>uuu</p>'
參數2：是否覆蓋粘貼，留空(覆蓋粘貼)、true(粘貼在光標選擇區域之前)、false(粘貼在光標選擇區域之后) -
pasteText：粘貼文本到編輯器當前光標處
參數1：要粘貼的文本，例：'這里的內容完全原樣顯示<strong>aaa</strong>'
參數2：是否覆蓋粘貼，留空(覆蓋粘貼)、true(粘貼在光標選擇區域之前)、false(粘貼在光標選擇區域之后) -
formatXHTML：格式化XHTML代碼
參數1：需要格式化的HTML代碼，例：'<b>aaa</b>'，返回'<strong>aaa</strong>'
參數2：是否代碼縮進換行,true(執行縮進格式化),false(不執行縮進格式化),默認為false -
toggleSource：在源代碼模式和編輯模式之間切換
參數1：空(切換),true(顯示源代碼模式),false(顯示編輯模式) -
toggleFullscreen：在全屏模式和標准大小之間切換
參數1：空(切換),true(顯示全屏模式),false(顯示標准模式) -
toggleShowBlocktag：切換塊標簽顯示狀態
參數1：空(切換),true(切換為顯示塊標簽),false(切換為不顯示塊標簽) -
addShortcuts：添加快捷鍵
參數1：快捷鍵值，例：'ctrl+enter'
參數2：用戶按下快捷鍵后需要響應的程序代碼，例：function(){$('#frmTest').submit();}
說明：允許為某個相同快捷鍵值重復添加多個響應代碼
備注：1.0.0 beta2新添加 -
delShortcuts：刪除快捷鍵
參數1：快捷鍵值，例：'ctrl+enter'
備注：1.0.0 Final新添加 -
exec：立即執行按鈕及插件
參數1：工具按鈕名稱(不區分大小寫)，例：Link、img
說明：此函數可以在插件內部或者外部Javascript代碼中進行調用 -
showModal：顯示模式窗口
參數1：模式窗口的標題title
參數2：模式窗口的內容content
參數3：模式窗口的寬度w
參數4：模式窗口的高度h
參數5：模式窗口關閉時的回調函數onRemove -
showIframeModal：顯示iframe式的模式窗口
參數1：模式窗口的標題
參數2：iframe的地址ifmurl，可使用內置變量：{editorRoot}，代表當前編輯器的根路徑，例：{editorRoot}xheditor_plugins/test.html
參數3：提供給目標iframe頁面回調用的回調函數，可以在iframe頁面中以這樣的形式調用：callback('1.gif');
參數4：模式窗口的寬度w
參數5：模式窗口的高度h
參數6：模式窗口關閉時的回調函數onRemove -
settings：獲取或者修改編輯器內部參數
internalScript:是否清除內部代碼
inlineScript:是否清除內聯代碼
internalStyle:是否清除內部樣式
inlineStyle:是否清除內聯樣式
forcePtag:強制使用P標簽
upLinkUrl:超鏈接上傳接口地址
upLinkExt:超鏈接本地上傳擴展限制
upImgUrl:圖片上傳接口地址
upImgExt:圖片本地上傳擴展限制
upFlashUrl:動畫上傳接口地址
upFlashExt:動畫本地上傳擴展限制
upMediaUrl:視頻上傳接口地址
upMediaExt:視頻本地上傳擴展限制
beforeSetSource:在設置源代碼到編輯器前調用此函數
beforeGetSource:從編輯器返回源代碼前調用此函數
focus:編輯器獲得焦點時回調此函數
blur:編輯器失去焦點時回調此函數
注：修改有效變量僅限以上，其它的變量都僅在編輯器初始化時使用
2.4. 上傳程序開發規范
上傳接收程序開發必讀：
- 上傳程序分標准HTML4上傳和HTML5上傳兩種情況處理：
1, HTML4上傳使用標准的表單上傳域，上傳文件域的name為：filedata
2, HTML5上傳的整個POST數據流就是上傳的文件完整數據，而本地文件名等信息儲存於HTTP_CONTENT_DISPOSITION這個服務器變量中 - 返回內容必需是標准的json字符串，結構可以是如下：{"err":"","msg":"200906030521128703.gif"} 或者 {"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}} 注：若選擇結構2，則url變量是必有
需了解更多細節，請參考發行包中的demos文件夾。其中upload.php、upload.asp、upload.aspx僅為演示參考代碼，若您使用的是其它的服務器腳本語言，請自行對初始化參數中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl進行修改，並開發相應服務器上傳接收程序。若您希望在自己的項目中實際使用，請自行修改代碼或者重新開發，開發過程中請注意上傳文件的格式及大小限制，注意服務器腳本安全問題。
上傳文件管理建議方案：
- 在編輯器初始化時在upload.php后面跟上一個服務器生成的絕對唯一的跟蹤值，例如：upload.php?infoid=123
- 在服務器接收程序中以這個跟蹤值保存到數據庫中，同時也可以限制單個跟蹤值下總上傳文件數或者總文件大小，否則就是一個可以上傳無限個文件的漏洞了
- 最終當前表單提交時，再根據編輯器提交的HTML內容和數據庫中上傳內容進行比較，刪除所有沒有使用的上傳文件
- 定期由服務器腳本刪除上傳數據庫中沒提交的文件記錄，這樣就能防止別人將你的網站作為免費相冊空間了
2.5. 插件開發指南
標准插件開發流程：
- 設計插件圖標並在頁面中定義好CSS
- 定義插件參數並寫入初始化參數plugins
- 編寫插件調用時要執行的代碼
下面我們就demo09中的一個最簡單插件作介紹：
<style type="text/css">
.testClassName {
background:transparent url(img/plugin.gif) no-repeat 20px 20px;
background-position:3px 3px;
}
</style>
test7:{c:'testClassName',t:'測試7：showIframeModal (Ctrl+7)',s:'ctrl+7',i:function(editor){
editor.setSource('test');
},e:function(){
var _this=this;
_this.saveBookmark();
_this.showIframeModal('測試showIframeModal接口','uploadgui.html',function(v){
_this.loadBookmark();
_this.pasteText('返回值：\r\n'+v);
},500,300);
}}
這個插件實現的功能是打開一個iframe，並將iframe返回的參數字符串插入到當前編輯器光標處。
- 其中test7為插件的name，用來在tools初始化參數中調用
- c:'testClassName'為插件的樣式名稱
- t:'測試7：showIframeModal (Ctrl+7)'是鼠標放在按鈕上顯示的提示文字
- s:'ctrl+7'是定義插件的快捷方式，在編輯器區域里按設置的快捷方式就會執行此插件事件；
- i:function(){}為插件初始化函數，編輯器初始化完成后會調用此函數
- e:function(){}為插件點擊后要執行的代碼
特別說明：
- 插件執行函數中可以用this.的方式調用2.3.章節中所有的API接口函數。如果使用回調函數，請將this變量保存在臨時變量中，例如_this;
- 在某些瀏覽器下，打開會轉移焦點的操作界面，會導致編輯區域焦點丟失。例如：showIframeModal，在showIframeModal之前要先執行saveBookmark保存焦點，再在回調函數中執行loadBookmark函數恢復焦點，之后才能調用pasteHTML等函數;
- 如果希望樣式表存儲在系統自帶的模板目錄ui.css中，請將插件對象樣式名留空，則會自動按照插件名來調用相應的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名;
若希望xhEditor開發團隊為您定制特殊的功能、皮膚和插件，請參閱我們提供的商業服務頁面。
2.6. 皮膚設計指南
xhEditor的皮膚保存在xheditor_skin文件夾中，每個皮膚一個子文件夾，文件夾結構如下：
xheditor_skin
└─default
├─ui.css
├─iframe.css
└─img
├─icons.gif
├─...
└─loading.gif
- 編輯器按鈕、面板、模式窗口等樣式全部統一存儲在ui.css文件中
- 編輯區域的樣式存儲在iframe.css文件中
- 編輯器內核用到的圖片及css文件中用到的所有圖片統一存儲在img文件夾中
ui.css文件簡單解析
xheLayout：編輯器table樣式；xheTool：工具按鈕所在區域的樣式；xheButton：按鈕樣式；xhePanel：操作面板的樣式；xheMenu：菜單樣式；xheEmot：表情樣式；xheColor：顏色選擇器的樣式；xheDialog：面板上的對話框樣式；xheModal：模式窗口樣式；
xhEditor皮膚結構相對非常簡單，有一定的HTML和CSS設計基礎即可完成設計工作。
若希望xhEditor開發團隊為您定制特殊的功能、皮膚和插件，請參閱我們提供的商業服務頁面。