XHEditor編輯器的使用方法

為了同時支援Firefox和IE，我們常常用document.getElementById(id)方法來取得HTML物件。但是getElementById方法只能取得單個物件，而對於CheckBox陣列則無能為力。 1. 下載xhEditor最新版本。下載地址：http://xheditor.com/download 2. 解壓zip檔案，將其中的xheditor.js以及xheditor_emot和xheditor_skin兩個資料夾上傳到網站相應目錄 3. 在相應html檔案的head標籤結束之前新增 4. 呼叫方法有兩種： 方法1：在textarea上新增屬性： class="xheditor"(設定為xheditor-mini和xheditor-simple，分別預設載入迷你和簡單工具欄)方法2：在您的頁面初始JS程式碼里加上： $('#elm1').xheditor(true);例如：$({$('#elm1').xheditor(true);});相應的隱藏編輯的程式碼為：$('#elm1').xheditor(false); 初始化引數說明 初始化示例程式碼： $('#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：自定義工具按鈕 引數值：full(完全),simple(簡單),mini(迷你)或者自定義字串，例如：'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd'完整按鈕表：GStart：組開始GEnd：組結束Separator：分隔符Cut：剪下Copy：複製Paste：貼上Pastetext：文字貼上Blocktag：段落標籤Fontface：字型FontSize：字型大小Bold：粗體Italic：斜體Underline：下劃線Strikethrough：中劃線FontColor：字型顏色BackColor：字型背景色Removeformat：刪除文字格式Align：對齊List：列表Outdent：減少縮排Indent：增加縮排Link：超連結Unlink：刪除連結Img：圖片Flash：Flash動畫Media：Windows media player視訊Emot：表情Table：表格Source：切換原始碼模式Preview：切換預覽模式Fullscreen：切換全屏模式About：關於xhEditor skin：皮膚風格選擇 引數值：default(預設風格),o2007blue(Office 2007 藍色),o2007silver(Office 2007 銀色) showBlocktag:顯示段落標籤 引數值：true(顯示段落標籤),false(不顯示) internalScript：內部JS程式碼保留狀態 引數值：true(保留內部JS程式碼),false(清理內部JS程式碼) inlineScript：內聯JS程式碼保留狀態 引數值：true(保留內聯JS程式碼),false(清理內聯JS程式碼) internalStyle：內部樣式保留狀態 引數值：true(保留內部樣式),false(清理內部樣式) inlineStyle：內聯樣式保留狀態 引數值：true(保留內聯樣式),false(清理內聯樣式) width：編輯器寬度 引數值：不帶單位的數字，例：300 height：編輯器高度 引數值：不帶單位的數字，例：100 loadCSS：載入樣式 引數值：樣式表網址，例如：'http://www.jb51.net/css/global.css' fullscreen：預設全屏顯示 引數值：true(全屏大小),false(標準大小) readonly：預設只讀模式 引數值：true(只讀模式),false(可編輯模式) sourceMode:預設原始碼模式 引數值：true(原始碼模式),false(編輯模式) forcePtag:強制P標籤 引數值：true(強制使用P標籤),false(不強制) keepValue:自動儲存src和href屬性值 引數值：true(儲存),false(不儲存)說明：在IE等瀏覽器下使用編輯器，插入的圖片和連結地址都會被瀏覽器自動轉為絕對地址，比如輸入：a.gif，自動會轉為：http://test.com/a.gif modalWidth:showModal彈出視窗的預設寬度 引數值：數值，預設為350說明：彈出視窗的預設寬度 modalHeight:showModal彈出視窗的預設高度 引數值：數值，預設為220說明：彈出視窗的預設高度 modalTitle：showModal彈出視窗是否顯示上方的標題欄 引數值：true(顯示),false(不顯示)說明：控制彈出視窗是否顯示上方的標題欄，預設為顯示，若需要顯示一個更定製個性化的iframe視窗，可通過此引數隱藏上方的標題欄 upLinkUrl:超連結檔案上傳接收URL 引數值：接收使用者上傳的伺服器端程式URL，預設留空為禁用超連結上傳功能，具體使用方法請參考demo8演示檔案 upLinkExt:超連結上傳前限制本地副檔名 引數值：超連結上傳前限制的副檔名列表，預設為：zip,rar,txt，建議與服務端副檔名檢查列表一致 upImgUrl:圖片檔案上傳接收URL 引數值：接收使用者上傳的伺服器端程式URL，預設留空為禁用上傳功能，具體使用方法請參考demo8演示檔案 upImgExt:圖片上傳前限制本地副檔名 引數值：圖片上傳前限制的副檔名列表，預設為：jpg,jpeg,gif,png，建議與服務端副檔名檢查列表一致 upFlashUrl:動畫檔案上傳接收URL 引數值：接收使用者上傳的伺服器端程式URL，預設留空為禁用上傳功能，具體使用方法請參考demo8演示檔案 upFlashExt:動畫上傳前限制本地副檔名 引數值：動畫上傳前限制的副檔名列表，預設為：swf，建議與服務端副檔名檢查列表一致 upMediaUrl:視訊檔案上傳接收URL 引數值：接收使用者上傳的伺服器端程式URL，預設留空為禁用上傳功能，具體使用方法請參考demo8演示檔案 upMediaExt:視訊上傳前限制本地副檔名 引數值：視訊上傳前限制的副檔名列表，預設為：avi，建議與服務端副檔名檢查列表一致 上傳介面使用注意事項： demos目錄中的upload.php僅為演示程式碼，若您使用的是其它的伺服器指令碼語言，請自行對初始化引數中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl進行修改，並開發相應伺服器上傳接收程式。若您希望在自己的專案中實際使用，請自行修改程式碼或者重新開發，開發過程中請注意上傳檔案的格式及大小限制，注意伺服器安全問題。 上傳接收程式開發規範：1,上傳檔案域名字為：upload2,返回結構必需為json，並且結構如下：{"err":"","msg":"200906030521128703.gif"}若上傳出現錯誤，請將錯誤內容儲存在err變數中；若上傳成功，請將伺服器上的絕對或者相對地址儲存在msg變數中。編輯器若發現返回的err變數不為空，則彈出視窗顯示返回的錯誤內容。上傳管理方案建議：1,在編輯器初始化時在upload.php後面跟上一個伺服器生成的絕對唯一的跟蹤值，例如：upload.php?infoid=1213121212,在伺服器接收程式中以這個跟蹤值儲存到資料庫中，同時也可以限制單個跟蹤值下總上傳檔案數或者總檔案大小，否則就是一個可以上傳無限個檔案的漏洞了3,最終當前表單提交時，再根據編輯器提交的HTML內容和資料庫中上傳內容進行比較，刪除所有沒有使用的上傳檔案4,定期由伺服器指令碼刪除上傳資料庫中沒提交的檔案記錄，這樣就能防止別人將您的網站作為免費相簿空間了 plugins:自定義按鈕之外掛擴充套件 外掛物件的屬性解釋：c：樣式表名稱　t：外掛名字(滑鼠在按鈕上方時顯示)　s：快捷方式　e：按鈕點選後需要執行的程式碼特別說明：如果您希望樣式表儲存在系統自帶的模板目錄ui.css中，請將外掛物件的樣式名留空，則會自動按照外掛名來呼叫相應的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是外掛名具體呼叫方法請參考演示資料夾中的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('

aaa

')editor.pasteHTML('

aaa

')editor.pasteText('str')sHtml=editor.formatXHTML('aaa')editor.toggleSource()editor.togglePreview()editor.toggleFullscreen()editor.toggleReadonly()alert(editor.settings.upImgExt);editor.settings.upImgExt='txt,doc'; focus：使編輯器獲得焦點 無引數 setSource：設定編輯器原始碼 引數1：要設定的原始碼內容，例：'

aaa

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

uuu

'注：0.9.5版新增 pasteHTML：貼上HTML內容到編輯器當前游標處 引數1：要貼上的HTML程式碼，例：'

uuu

' pasteText：貼上文字到編輯器當前游標處 引數1：要貼上的文字，例：'這裡的內容完全原樣顯示aaa' formatXHTML：格式化XHTML程式碼 引數1：需要格式化的HTML程式碼，例：'aaa'，返回'aaa' toggleSource：在原始碼模式和編輯模式之間切換 引數1：空(切換),true(顯示原始碼模式),false(顯示編輯模式) togglePreview：在預覽模式和編輯模式之間切換 引數1：空(切換),true(顯示預覽模式),false(顯示編輯模式) toggleFullscreen：在全屏模式和標準大小之間切換 引數1：空(切換),true(顯示全屏模式),false(顯示標準模式) toggleReadonly：在只讀模式和可編輯模式之間切換 引數1：空(切換),true(切換為只讀模式),false(切換為可編輯模式) settings：獲取或者修改編輯器內部引數 internalScript:是否清除內部程式碼inlineScript:是否清除內聯程式碼internalStyle:是否清除內部樣式inlineStyle:是否清除內聯樣式forcePtag:強制使用P標籤keepValue:保持屬性值upLinkUrl:超連結上傳介面地址upLinkExt:超連結本地上傳擴充套件限制upImgUrl:圖片上傳介面地址upImgExt:圖片本地上傳擴充套件限制upFlashUrl:動畫上傳介面地址upFlashExt:動畫本地上傳擴充套件限制upMediaUrl:視訊上傳介面地址upMediaExt:視訊本地上傳擴充套件限制beforeSetSource:在設定原始碼到編輯器前呼叫此函式beforeGetSource:從編輯器返回原始碼前呼叫此函式focus:編輯器獲得焦點時回撥此函式blur:編輯器失去焦點時回撥此函式注：修改有效變數僅限以上，其它的變數都僅在編輯器初始化時使用 編輯器初始化回撥函式列表： beforeSetSource和beforeGetSource是編輯器回撥函式，分別在設定原始碼和取回原始碼之前呼叫，詳細使用方法可參考UBB程式碼演示頁面focus和blur是編輯器聚焦和失去焦點時的回撥函式