在Web程序應用中，經常會有編輯文章等需求。爲了文章的排版佈局如word文檔編輯器一樣美觀方便，如：加粗、下劃線、左右對齊等等，以使文字信息能夠更形象更美觀的傳達給閱讀者，同時也提高信息發佈的工作效率。在這個需求的背景下，HTML在線編輯器就應運而生了。
1、導入JS庫
您可以訪問xhEditor官方網站下載最新版本的xhEditor編輯器，xhEditor官方網站地址爲：http://xheditor.com/，打開右上角的免費下載 | 代碼嚮導鏈接，即可找到最新版本的下載地址。xhEditor無需任何安裝，無需任何設置，直接解壓縮並拷貝到你的網站相應文件夾下面即可直接調用。
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>2、HTML實現可視化的文本框textarea
<form id="frmDemo" method="post" action="">
<span style="white-space:pre"> </span><textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
</form>class="xheditor {skin:'default'}"
注：前面主參數也可以是xheditor-mfull、xheditor-mini或xheditor-simple，分別加載多行完全、迷你和簡單工具欄。後面大括號用來定義更多的初始化參數，可以省略。
3、xhEditor的調用
通過js調用xheditor插件
<script>
$('#elm1').xheditor();
$('#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"
});
</script>xhEditor提供兩種方式初始化編輯器：
- 方法1：利用class屬性來初始化和傳遞各種初始化參數，例：
class="xheditor {skin:'default'}"
- 方法2：利用xhEditor提供的jQuery插件接口來實現對特定textarea的初始化和傳遞參數，例：
$('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'});
特別說明：兩種初始化方法只能選擇其中一種使用，如果兩種方法的代碼同時存在頁面中，方法2的代碼不會有任何效果。
我們更傾向於推薦大家使用方法1，因爲更簡單易用，不涉及任何的Javascript代碼。通過簡單的參數設置即可定製各種效果的編輯器界面，簡單易用且功能強大。
如果想實現更加複雜的交互應用，或者希望xhEditor編輯器能夠和自己的Javascript代碼實現互相訪問，那麼你可以選擇使用方法2，相對具有更大的自由空間。
xhEditor也提供了即時的卸載編輯器方法：
$('#elm1').xheditor(false);
4、初始化的參數列表
-
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']、'<style>body{font-size:20px;}</style>'<br />備註：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
5、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.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:編輯器失去焦點時回調此函數 注：修改有效變量僅限以上，其它的變量都僅在編輯器初始化時使用
6、案例完整代碼
以上就是xhEditor可視化編輯器的基本用法，下面我附上整篇完整的代碼，有需要的隨意拿走
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xhEditor</title>
</head>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui.css" />
<body>
<form id="frmDemo" method="post" action="">
<textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
</form>
<script>
$('#elm1').xheditor();
$('#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"
});
</script>
</body>
</html>