1。Xheditor

xhEditor 是一個基於 jQuery 開發的簡單迷你並且高效的視覺化 XHTML 編輯器，基於網路訪問並且相容 IE 6.0-8.0、Firefox 3.0、Opera 9.6、Chrome 1.0、Safari 3.22。

2. 獲取xhEditor

可以從GitHub下載原始碼

3.初始化引數列表

初始化引數示例程式碼：

$(’#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：刪除連結
Img：圖片
Flash：Flash動畫
Media：Windows media player視訊
Emot：表情
Table：表格
Source：切換原始碼模式
Preview：預覽當前程式碼
Print：列印
Fullscreen：切換全屏模式
About：關於xhEditor
skin：皮膚風格選擇
引數值：default(預設風格),o2007blue(Office2007藍色),o2007silver(Office2007銀色),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
loadCSS：載入樣式
引數值：URL地址、URL陣列以及直接內部樣式，例如：‘1.css’、[‘1.css’,‘2.css’]、‘‘
備註：1.0.0 RC3新新增載入內部樣式功能
fullscreen：預設全屏顯示
引數值：true(全屏大小),false(標準大小)
sourceMode：預設原始碼模式
引數值：true(原始碼模式),false(編輯模式)
forcePtag：強制P標籤
引數值：true(強制使用P標籤),false(不強制),預設true
forcePasteText：強制將貼上的內容轉換為文字
引數值：true(強制轉文字),false(不轉文字),預設false
備註：v1.1.0新新增
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新新增
wordDeepClean：Word文件深入清理選項
引數：true(深入清理),false(不深入清理，保留style樣式效果),預設為true
說明：若網站應用需要保留更多的Word樣式效果，請設定此值為false，不過產生的HTML程式碼體積會大大增大
備註：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.0Final新新增
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

4. API函式介面列表

API介面示例程式碼：

var editor=$(’#elm1’).xheditor({tools:‘full’,skin:‘default’});
editor.focus();
editor.setSource(‘str’)
sHtml=editor.getSource()
editor.appendHTML(‘

aaa

’)
editor.pasteHTML(‘

aaa

’)
editor.pasteText(‘str’)
sHtml=editor.formatXHTML(‘ aaa’)
editor.toggleSource()
editor.toggleFullscreen()
alert(editor.settings.upImgExt);
editor.settings.upImgExt=‘txt,doc’;
API介面列表：

focus：使編輯器獲得焦點
無引數
setSource：設定編輯器原始碼
引數1：要設定的原始碼內容，例：‘

aaa

’
getSource：返回編輯器格式後的原始碼
無引數
appendHTML：貼上HTML內容到編輯器結尾處
引數1：要貼上的HTML程式碼，例：‘

uuu

’
注：0.9.5版新增
getSelect：返回當前選中的內容
引數1：返回格式，可選’text’返回文字格式，其它所有值都返回HTML格式
pasteHTML：貼上HTML內容到編輯器當前游標處
引數1：要貼上的HTML程式碼，例：‘

uuu

’
引數2：是否覆蓋貼上，留空(覆蓋貼上)、true(貼上在游標選擇區域之前)、false(貼上在游標選擇區域之後)
pasteText：貼上文字到編輯器當前游標處
引數1：要貼上的文字，例：‘這裡的內容完全原樣顯示 aaa’
引數2：是否覆蓋貼上，留空(覆蓋貼上)、true(貼上在游標選擇區域之前)、false(貼上在游標選擇區域之後)
formatXHTML：格式化XHTML程式碼
引數1：需要格式化的HTML程式碼，例：‘ aaa’，返回’ aaa’
引數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.0Final新新增
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:編輯器失去焦點時回撥此函式

注：修改有效變數僅限以上，其它的變數都僅在編輯器初始化時使用

5.上傳程式開發規範

上傳接收程式開發必讀：
上傳程式分標準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內容和資料庫中上傳內容進行比較，刪除所有沒有使用的上傳檔案
定期由伺服器指令碼刪除上傳資料庫中沒提交的檔案記錄，這樣就能防止別人將你的網站作為免費相簿空間了

6.外掛開發指南

標準外掛開發流程：

設計外掛圖示並在頁面中定義好CSS
定義外掛引數並寫入初始化引數plugins
編寫外掛呼叫時要執行的程式碼
下面我們就demo09中的一個最簡單外掛作介紹：

<styletype=“text/css”>
.testClassName {
background:transparent url(img/plugin.gif)no-repeat 20px20px;
background-position:3px3px;
}

test7:{c:‘testClassName’,t:‘測試7：showIframeModal (Ctrl+7)’,s:‘ctrl+7’,e:function(){
var _this=this;
_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’是定義外掛的快捷方式，在編輯器區域裡按設定的快捷方式就會執行此外掛事件；
e:function(){}為外掛點選後要執行的程式碼
特別說明：

外掛執行函式中可以用this.的方式呼叫2.3.章節中所有的API介面函式。如果使用回撥函式，請將this變數儲存在臨時變數中，例如_this;
在某些瀏覽器下，開啟會轉移焦點的操作介面，會導致編輯區域焦點丟失。例如：showIframeModal，在回撥函式中需先執行loadBookmark函式恢復焦點，之後才能呼叫pasteHTML等函式;
如果希望樣式表儲存在系統自帶的模板目錄ui.css中，請將外掛物件樣式名留空，則會自動按照外掛名來呼叫相應的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是外掛名;
若希望xhEditor開發團隊為您定製特殊的功能、皮膚和外掛，請參閱我們提供的商業服務頁面。

7.皮膚設計指南

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開發團隊為您定製特殊的功能、皮膚和外掛，請參閱我們提供的商業服務頁面。

2.7. 關於二次開發
由於二次開發相對複雜度較高，需要對xhEditor原始碼結構熟悉，而開發者的水平有高有低，因此容易出現的問題也五花八門。鑑於這個原因，xhEditor開發團隊對非商業授權使用者不提供任何的技術文件和技術支援，希望大家理解。

若希望xhEditor開發團隊為您定製特殊的功能、皮膚和外掛，請參閱我們提供的商業服務頁面。

8. 其它相關

3.1. 使用常見問題

3.1. 使用常見問題
xhEditor能相容哪些jQuery版本？
我的網頁是GB2312編碼的，怎樣才能使xhEditor編輯器沒有亂碼？
正常載入了xhEditor，讀取textarea的value值，為什麼讀取不到最新編輯結果？
怎麼新增自定義的表情？
怎麼覆蓋編輯器自帶的預設表情？
當前頁面設定了document.domain，如何讓xhEditor工作正常？
textarea處在隱藏的區域中，如何初始化編輯器？
使用普通表單提交，怎麼每次服務端取到的值總是之前舊的編輯結果？
xhEditor能相容哪些jQuery版本？
xhEditor最初的版本是基於jQuery 1.3.2開發的，因此目前v1.0系列的所有版本都能最大的相容1.3.2。為了獲得更好的程式碼效能，目前xhEditor官方更建議使用最新的1.4.2版本。

雖然說v1.0版本系列能最大的相容jQuery 1.3.2，但是在實際測試過程中，也發現一個不可修正的問題：在IE6下無法使用縮圖上傳模式。如果你不需要使用縮圖模式，可以在jQuery 1.3.2基礎上完美的執行xhEditor v1.0版本系列。

我的網頁是GB2312編碼的，怎樣才能使xhEditor編輯器沒有亂碼？
如果使用最新版xhEditor的mini壓縮版本，因為裡面的文字完全utf-8編碼化，可以直接呼叫，不會出現亂碼現象。

如果使用的是原始碼js檔案或早期的xhEditor版本，在非utf-8編碼的網頁中使用就會出現亂碼現象，只需將script的charset屬性設定成utf-8即可完美解決：

<scripttype="text/javascript"charset="utf-8"src=“xheditor-zh-cn.js”>
正常載入了xhEditor，讀取textarea的value值，為什麼讀取不到最新編輯結果？
目前網路中所有的線上編輯器都是利用新建立的iframe來實現視覺化編輯功能，xhEditor也不例外，所以在提交前必需要將最新的編輯結果重新同步到原來的textarea。

xhEditor預設會在textarea所在的form物件中繫結onsubmit事件，當使用者點選submit按鈕時，xhEditor就會將最新結果同步回textarea，隨後隨表單中的其它表單項一同提交到服務端指令碼。因此，如果不需要用Javascript額外處理，普通的表單式提交是沒任何問題的。

如果網頁中需要用Javascript額外處理編輯結果，比如ajax提交表單，則有三種解決方案：

使用jQuery的事件繫結或者標準DOM繫結方法在form上繫結submit事件(繫結程式碼必需在xhEditor初始化程式碼後面)，即是在xhEditor把值回傳後再讀取，在相應繫結的函式中讀取textarea的value值即是最新編輯結果;
使用jQuery的標準取值方法:$(’#textarea_id’).val();
使用xhEditor提供的專用讀值API介面：editor.getSource();