為了同時(shí)支持Firefox和IE，我們常常用document.getElementById(id)方法來取得HTML對象。但是getElementById方法只能取得單個對象，而對于CheckBox數(shù)組則無能為力。
1. 下載xhEditor最新版本。下載地址：http://xheditor.com/download

2. 解壓zip文件，將其中的xheditor.js以及xheditor_emot和xheditor_skin兩個文件夾上傳到網(wǎng)站相應(yīng)目錄

3. 在相應(yīng)html文件的head標(biāo)簽結(jié)束之前添加

<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
4. 調(diào)用方法有兩種：

方 法1：在textarea上添加屬性： class="xheditor"(設(shè)置為xheditor-mini和xheditor-simple，分別默認(rèn)加載迷你和簡單工具欄)方法2：在您的 頁面初始JS代碼里加上： $('#elm1').xheditor(true);例如：$({$('#elm1').xheditor(true);});相應(yīng)的隱藏編輯的代碼 為：$('#elm1').xheditor(false);
初始化參數(shù)說明
初始化示例代碼：

$('#elm1').xheditor(true,{tools:'full',skin:'default',showBlocktag:true,readonly:false,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://jb51.net/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png",keepValue:true,plugins:{}});
tools：自定義工具按鈕

參數(shù)值：full(完全),simple(簡單),mini(迷你)或者自定義字符串，例 如：'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd' 完整按鈕表：GStart：組開始GEnd：組結(jié)束Separator：分隔符Cut：剪切Copy：復(fù)制Paste：粘貼Pastetext：文本粘貼 Blocktag：段落標(biāo)簽Fontface：字體FontSize：字體大小Bold：粗體Italic：斜體Underline：下劃線 Strikethrough：中劃線FontColor：字體顏色BackColor：字體背景色Removeformat：刪除文字格式Align：對 齊List：列表Outdent：減少縮進(jìn)Indent：增加縮進(jìn)Link：超鏈接Unlink：刪除鏈接Img：圖片F(xiàn)lash：Flash動畫 Media：Windows media player視頻Emot：表情Table：表格Source：切換源代碼模式Preview：切換預(yù)覽模式Fullscreen：切換全屏模式 About：關(guān)于xhEditor
skin：皮膚風(fēng)格選擇

參數(shù)值：default(默認(rèn)風(fēng)格),o2007blue(Office 2007 藍(lán)色),o2007silver(Office 2007 銀色)
showBlocktag:顯示段落標(biāo)簽

參數(shù)值：true(顯示段落標(biāo)簽),false(不顯示)
internalScript：內(nèi)部JS代碼保留狀態(tài)

參數(shù)值：true(保留內(nèi)部JS代碼),false(清理內(nèi)部JS代碼)
inlineScript：內(nèi)聯(lián)JS代碼保留狀態(tài)

參數(shù)值：true(保留內(nèi)聯(lián)JS代碼),false(清理內(nèi)聯(lián)JS代碼)
internalStyle：內(nèi)部樣式保留狀態(tài)

參數(shù)值：true(保留內(nèi)部樣式),false(清理內(nèi)部樣式)
inlineStyle：內(nèi)聯(lián)樣式保留狀態(tài)

參數(shù)值：true(保留內(nèi)聯(lián)樣式),false(清理內(nèi)聯(lián)樣式)
width：編輯器寬度

參數(shù)值：不帶單位的數(shù)字，例：300
height：編輯器高度

參數(shù)值：不帶單位的數(shù)字，例：100
loadCSS：加載樣式

參數(shù)值：樣式表網(wǎng)址，例如：'http://www.jb51.net/css/global.css'
fullscreen：默認(rèn)全屏顯示

參數(shù)值：true(全屏大小),false(標(biāo)準(zhǔn)大小)
readonly：默認(rèn)只讀模式

參數(shù)值：true(只讀模式),false(可編輯模式)
sourceMode:默認(rèn)源代碼模式

參數(shù)值：true(源代碼模式),false(編輯模式)
forcePtag:強(qiáng)制P標(biāo)簽

參數(shù)值：true(強(qiáng)制使用P標(biāo)簽),false(不強(qiáng)制)
keepValue:自動保存src和href屬性值

參數(shù)值：true(保存),false(不保存)說明：在IE等瀏覽器下使用編輯器，插入的圖片和鏈接地址都會被瀏覽器自動轉(zhuǎn)為絕對地址，比如輸入：a.gif，自動會轉(zhuǎn)為：http://test.com/a.gif
modalWidth:showModal彈出窗口的默認(rèn)寬度

參數(shù)值：數(shù)值，默認(rèn)為350說明：彈出窗口的默認(rèn)寬度
modalHeight:showModal彈出窗口的默認(rèn)高度

參數(shù)值：數(shù)值，默認(rèn)為220說明：彈出窗口的默認(rèn)高度
modalTitle：showModal彈出窗口是否顯示上方的標(biāo)題欄

參數(shù)值：true(顯示),false(不顯示)說明：控制彈出窗口是否顯示上方的標(biāo)題欄，默認(rèn)為顯示，若需要顯示一個更定制個性化的iframe窗口，可通過此參數(shù)隱藏上方的標(biāo)題欄
upLinkUrl:超鏈接文件上傳接收URL

參數(shù)值：接收用戶上傳的服務(wù)器端程序URL，默認(rèn)留空為禁用超鏈接上傳功能，具體使用方法請參考demo8演示文件
upLinkExt:超鏈接上傳前限制本地文件擴(kuò)展名

參數(shù)值：超鏈接上傳前限制的文件擴(kuò)展名列表，默認(rèn)為：zip,rar,txt，建議與服務(wù)端擴(kuò)展名檢查列表一致
upImgUrl:圖片文件上傳接收URL

參數(shù)值：接收用戶上傳的服務(wù)器端程序URL，默認(rèn)留空為禁用上傳功能，具體使用方法請參考demo8演示文件
upImgExt:圖片上傳前限制本地文件擴(kuò)展名

參數(shù)值：圖片上傳前限制的文件擴(kuò)展名列表，默認(rèn)為：jpg,jpeg,gif,png，建議與服務(wù)端擴(kuò)展名檢查列表一致
upFlashUrl:動畫文件上傳接收URL

參數(shù)值：接收用戶上傳的服務(wù)器端程序URL，默認(rèn)留空為禁用上傳功能，具體使用方法請參考demo8演示文件
upFlashExt:動畫上傳前限制本地文件擴(kuò)展名

參數(shù)值：動畫上傳前限制的文件擴(kuò)展名列表，默認(rèn)為：swf，建議與服務(wù)端擴(kuò)展名檢查列表一致
upMediaUrl:視頻文件上傳接收URL

參數(shù)值：接收用戶上傳的服務(wù)器端程序URL，默認(rèn)留空為禁用上傳功能，具體使用方法請參考demo8演示文件
upMediaExt:視頻上傳前限制本地文件擴(kuò)展名

參數(shù)值：視頻上傳前限制的文件擴(kuò)展名列表，默認(rèn)為：avi，建議與服務(wù)端擴(kuò)展名檢查列表一致
上傳接口使用注意事項(xiàng)：

demos 目錄中的upload.php僅為演示代碼，若您使用的是其它的服務(wù)器腳本語言，請自行對初始化參數(shù)中的upLinkUrl、upImgUrl、 upFlashUrl和upMediaUrl進(jìn)行修改，并開發(fā)相應(yīng)服務(wù)器上傳接收程序。若您希望在自己的項(xiàng)目中實(shí)際使用，請自行修改代碼或者重新開發(fā)，開 發(fā)過程中請注意上傳文件的格式及大小限制，注意服務(wù)器安全問題。 上傳接收程序開發(fā)規(guī)范：1,上傳文件域名字為：upload2,返回結(jié)構(gòu)必需為json，并且結(jié)構(gòu)如下： {"err":"","msg":"200906030521128703.gif"}若上傳出現(xiàn)錯誤，請將錯誤內(nèi)容保存在err變量中；若上傳成功，請 將服務(wù)器上的絕對或者相對地址保存在msg變量中。編輯器若發(fā)現(xiàn)返回的err變量不為空，則彈出窗口顯示返回的錯誤內(nèi)容。上傳管理方案建議：1,在編輯器 初始化時(shí)在upload.php后面跟上一個服務(wù)器生成的絕對唯一的跟蹤值，例如：upload.php?infoid=1213121212,在服務(wù)器 接收程序中以這個跟蹤值保存到數(shù)據(jù)庫中，同時(shí)也可以限制單個跟蹤值下總上傳文件數(shù)或者總文件大小，否則就是一個可以上傳無限個文件的漏洞了3,最終當(dāng)前表 單提交時(shí)，再根據(jù)編輯器提交的HTML內(nèi)容和數(shù)據(jù)庫中上傳內(nèi)容進(jìn)行比較，刪除所有沒有使用的上傳文件4,定期由服務(wù)器腳本刪除上傳數(shù)據(jù)庫中沒提交的文件記 錄，這樣就能防止別人將您的網(wǎng)站作為免費(fèi)相冊空間了
plugins:自定義按鈕之插件擴(kuò)展

插件對象的屬性解釋：c：樣式表名 稱　t：插件名字(鼠標(biāo)在按鈕上方時(shí)顯示)　s：快捷方式　e：按鈕點(diǎn)擊后需要執(zhí)行的代碼特別說明：如果您希望樣式表存儲在系統(tǒng)自帶的模板目錄 ui.css中，請將插件對象的樣式名留空，則會自動按照插件名來調(diào)用相應(yīng)的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的 Cut和Copy是插件名具體調(diào)用方法請參考演示文件夾中的demo9
JS接口說明
JS接口示例代碼：

var editor=$('#elm1').xheditor(true,{tools:'full',skin:'default',internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://jb51.net/test.css',fullscreen:true,beforeSetSource:ubb2html,beforeGetSource:html2ubb,focus:focusAction,blur:blurAction})[0].xheditor;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.togglePreview()editor.toggleFullscreen()editor.toggleReadonly()alert(editor.settings.upImgExt);editor.settings.upImgExt='txt,doc';
focus：使編輯器獲得焦點(diǎn)

無參數(shù)
setSource：設(shè)置編輯器源代碼

參數(shù)1：要設(shè)置的源代碼內(nèi)容，例：'<p>aaa</p>'
getSource：返回編輯器格式后的源代碼

無參數(shù)
appendHTML：粘貼HTML內(nèi)容到編輯器結(jié)尾處

參數(shù)1：要粘貼的HTML代碼，例：'<p>uuu</p>'注：0.9.5版添加
pasteHTML：粘貼HTML內(nèi)容到編輯器當(dāng)前光標(biāo)處

參數(shù)1：要粘貼的HTML代碼，例：'<p>uuu</p>'
pasteText：粘貼文本到編輯器當(dāng)前光標(biāo)處

參數(shù)1：要粘貼的文本，例：'這里的內(nèi)容完全原樣顯示<strong>aaa</strong>'
formatXHTML：格式化XHTML代碼

參數(shù)1：需要格式化的HTML代碼，例：'<b>aaa</b>'，返回'<strong>aaa</strong>'
toggleSource：在源代碼模式和編輯模式之間切換

參數(shù)1：空(切換),true(顯示源代碼模式),false(顯示編輯模式)
togglePreview：在預(yù)覽模式和編輯模式之間切換

參數(shù)1：空(切換),true(顯示預(yù)覽模式),false(顯示編輯模式)
toggleFullscreen：在全屏模式和標(biāo)準(zhǔn)大小之間切換

參數(shù)1：空(切換),true(顯示全屏模式),false(顯示標(biāo)準(zhǔn)模式)
toggleReadonly：在只讀模式和可編輯模式之間切換

參數(shù)1：空(切換),true(切換為只讀模式),false(切換為可編輯模式)
settings：獲取或者修改編輯器內(nèi)部參數(shù)

internalScript: 是否清除內(nèi)部代碼inlineScript:是否清除內(nèi)聯(lián)代碼internalStyle:是否清除內(nèi)部樣式inlineStyle:是否清除內(nèi)聯(lián)樣式 forcePtag:強(qiáng)制使用P標(biāo)簽keepValue:保持屬性值upLinkUrl:超鏈接上傳接口地址upLinkExt:超鏈接本地上傳擴(kuò)展限制 upImgUrl:圖片上傳接口地址upImgExt:圖片本地上傳擴(kuò)展限制upFlashUrl:動畫上傳接口地址upFlashExt:動畫本地上傳 擴(kuò)展限制upMediaUrl:視頻上傳接口地址upMediaExt:視頻本地上傳擴(kuò)展限制beforeSetSource:在設(shè)置源代碼到編輯器前調(diào) 用此函數(shù)beforeGetSource:從編輯器返回源代碼前調(diào)用此函數(shù)focus:編輯器獲得焦點(diǎn)時(shí)回調(diào)此函數(shù)blur:編輯器失去焦點(diǎn)時(shí)回調(diào)此函數(shù) 注：修改有效變量僅限以上，其它的變量都僅在編輯器初始化時(shí)使用
編輯器初始化回調(diào)函數(shù)列表：

beforeSetSource和beforeGetSource是編輯器回調(diào)函數(shù)，分別在設(shè)置源代碼和取回源代碼之前調(diào)用，詳細(xì)使用方法可參考UBB代碼演示頁面focus和blur是編輯器聚焦和失去焦點(diǎn)時(shí)的回調(diào)函數(shù)

總結(jié)

以上是生活随笔為你收集整理的xheditor的使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。