【轉】xhEditor技術手冊 網頁編輯器基礎教程

時間  2019-11-13
標籤 xheditor 技術 手冊 網頁 編輯器 基礎 教程 欄目 HTML 简体版
原文   原文鏈接

1. xhEditor入門基礎

1.1. 在線可視化HTML編輯器概述1.2. 獲取xhEditor1.3. xhEditor運行環境1.4. xhEditor基本使用指南javascript

 

1.1. 在線可視化HTML編輯器概述

在Web程序應用中，最多見的一種行爲是信息和言論的發佈和交流。而在信息發佈的同時，每每會有對信息發佈的格式、類型和功能上的需求，好比：加粗、下劃線等等，以使文字信息可以更形象更美觀的傳達給閱讀者，同時也提升信息發佈的工做效率。在這個需求的背景下，HTML在線編輯器就應運而生了。php

顧名思義，在線HTML編輯器就是在線編輯HTML代碼的工具，它常常被應用於留言板留言、論壇發貼、Blog編寫日誌或等須要用戶輸入HTML的地方，是Web應用的經常使用模塊之一。在線HTML編輯器能夠實現對編輯內容添加各類豐富多彩的文字效果，以及提供各類方便快捷的操做功能，最大的提升編輯工做效率。在線HTML編輯器是任何網站不可或缺的重要功能組件，是互聯網用戶駕輕就熟的馳騁網絡的有力工具。css

 

1.2. 獲取xhEditor

您能夠訪問xhEditor官方網站下載最新版本的xhEditor編輯器，xhEditor官方網站地址爲：http://xheditor.com/，打開右上角的免費下載 | 代碼嚮導連接，便可找到最新版本的下載地址。html

xhEditor無需任何安裝，無需任何設置，直接解壓縮並拷貝到你的網站相應文件夾下面便可直接調用。html5

 

1.3. xhEditor運行環境

xhEditor是基於瀏覽器的HTML、CSS和Javascript環境開發的，所以原則上市場上絕大部分瀏覽器咱們都能完美的運行，目前已測試的瀏覽器兼容列表以下：IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ (+號表明日後全部新版本)。xhEditor是徹底基於瀏覽器環境的，所以不存在操做系統選擇性，是徹底跨平臺的。xhEditor同時也能夠應用在任何的服務端語言環境下，例如：PHP、ASP、ASP.NET、JAVA等，能夠在您的CMS、博客、論壇、商城等互聯網平臺上完美的嵌入運行，可以很是靈活簡單的和您的系統實現完美的無縫銜接。java

 

1.4. xhEditor基本使用指南

您只需按照如下簡單步驟便可學會使用xhEditor：jquery

  1. 下載最新版本xhEditor:http://xheditor.com/download
  2. 將下載的壓縮文件解壓縮，上傳其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三個文件夾到網站相應文件夾中
  3. 在須要調用xhEditor編輯器的網頁head標籤結束以前添加如下代碼： 
    <scripttype="text/javascript"src="/js/jquery-1.4.2.min.js"></script>  <scripttype="text/javascript"src="/js/xheditor-zh-cn.min.js"></script>
    注：jQuery和xhEditor的js文件路徑請根據你網站具體路徑狀況相應修改
  4. 在須要實現可視化的文本框textarea屬性中添加： 
     class="xheditor {skin:'default'}"
    注：前面主參數也能夠是xheditor-mfull、xheditor-mini或xheditor-simple，分別加載多行徹底、迷你和簡單工具欄。後面大括號用來定義更多的初始化參數，能夠省略。

通過以上步驟，你就已經成功的將xhEditor編輯器安裝在你的網頁中。若須要學習更多xhEditor編輯器的使用技術，請參閱：xhEditor進階使用。ajax

 

2. xhEditor進階使用

2.1. 進階使用指導2.2. 初始化參數列表2.3. API函數接口列表2.4. 上傳程序開發規範2.5. 插件開發指南2.6. 皮膚設計指南2.7. 關於二次開發數據庫

 

2.1. 進階使用指導

閱讀本章節請先閱讀：xhEditor入門基礎，若你已經熟悉xhEditor的基本使用，請往下繼續。json

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);

 

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"});

初始化參數列表：

  1. 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

  2. skin：皮膚風格選擇

    參數值：default(默認風格),o2007blue(Office2007藍色),o2007silver(Office2007銀色),vista(Vista),nostyle(NoStyle)

  3. layerShadow：陰影的深度(按鈕面板和模式窗口的背景陰影)

    參數值：0(不顯示陰影),大於0的數值(顯示陰影並設置陰影的深度)

  4. clickCancelDialog：點擊任意位置取消按鈕面板功能

    參數值：默認true(開啓點擊取消功能),false(關閉點擊取消功能，必須要點擊「取消」按鈕才能關閉按鈕面板)

  5. showBlocktag：顯示段落標籤

    參數值：true(顯示段落標籤),false(不顯示)

  6. linkTag：樣式連接link標籤保留狀態

    參數值：true(保留樣式連接link標籤),false(清理樣式連接link標籤)

  7. internalScript：內部JS代碼保留狀態

    參數值：true(保留內部JS代碼),false(清理內部JS代碼)

  8. inlineScript：內聯JS代碼保留狀態

    參數值：true(保留內聯JS代碼),false(清理內聯JS代碼)

  9. internalStyle：內部樣式保留狀態

    參數值：true(保留內部樣式),false(清理內部樣式)

  10. inlineStyle：內聯樣式保留狀態

    參數值：true(保留內聯樣式),false(清理內聯樣式)

  11. width：編輯器寬度

    參數值：不帶單位的數字，例：300

  12. height：編輯器高度

    參數值：不帶單位的數字，例：100

  13. loadCSS：加載樣式

    參數值：URL地址、URL數組以及直接內部樣式，例如：'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'<br />備註：1.0.0 RC3新添加加載內部樣式功能

  14. fullscreen：默認全屏顯示

    參數值：true(全屏大小),false(標準大小)

  15. sourceMode：默認源代碼模式

    參數值：true(源代碼模式),false(編輯模式)

  16. forcePtag：強制P標籤

    參數值：true(強制使用P標籤),false(不強制),默認true

  17. forcePasteText：強制將粘貼的內容轉換爲文本

    參數值：true(強制轉文本),false(不轉文本),默認false  備註：v1.1.0新添加

  18. disableContextmenu：禁用編輯區的右鍵菜單

    參數值：true(禁用右鍵菜單),false(不由用),默認false  備註：v1.1.0新添加

  19. editorRoot：編輯器JS文件所在的根路徑

    參數值：編輯器所在的根路徑，用在某些特殊狀況下定位編輯器的根路徑，默認爲空，讀取默認的編輯器根路徑  備註：v1.1.0新添加

  20. shortcuts：自定義鍵盤快捷方式

    參數：快捷鍵對應事件代碼的對象數組  示例：{'ctrl+enter':function(){$('#frmTest').submit();}}  備註：1.0.0 beta2新添加

  21. urlBase：相對URL地址的基地址

    參數：字符串的URL地址，用以解決先後臺不在同一路徑的資源定位問題  備註：1.1.0新添加

  22. urlType：本地URL地址強制轉換方式選擇

    參數：abs(絕對路徑),root(根路徑),rel(相對路徑)  備註：1.0.0 beta2新添加,v1.1.0版中名字由localUrl變動爲urlType

  23. emotPath：修改表情圖片的URL根路徑

    參數：字符串的URL地址，默認爲空，指向編輯器路徑下的默認表情  備註：1.1.0新添加

  24. emotMark：是否在表情img標籤上標註emot屬性

    參數：true(標註),false(不標註),默認爲false  說明：若使用了ubb插件，請設置此屬性爲true  備註：1.0.0 beta2新添加

  25. 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新添加

  26. wordDeepClean：Word文檔深刻清理選項

    參數：true(深刻清理),false(不深刻清理，保留style樣式效果),默認爲true  說明：若網站應用須要保留更多的Word樣式效果，請設置此值爲false，不過產生的HTML代碼體積會大大增大  備註：1.0.0 beta2新添加

  27. hoverExecDelay：懸停自動執行延遲的時間

    參數：數值(單位毫秒)，默認爲100，設置爲-1關閉此功能  備註：1.0.0 rc2新添加

  28. defLinkText：超連接的默認文字

    參數值：字符串(默認值：「點擊打開連接」)  說明：只在不選擇任何內容的狀況下才會用到這個參數值

  29. modalWidth：showModal彈出窗口的默認寬度

    參數值：數值，默認爲350  說明：彈出窗口的默認寬度

  30. modalHeight：showModal彈出窗口的默認高度

    參數值：數值，默認爲220  說明：彈出窗口的默認高度

  31. modalTitle：showModal彈出窗口是否顯示上方的標題欄

    參數值：true(顯示),false(不顯示)  說明：控制彈出窗口是否顯示上方的標題欄，默認爲顯示，若須要顯示一個更定製個性化的iframe窗口，可經過此參數隱藏上方的標題欄

  32. upBtnText：上傳按鈕的文字

    參數值：任意字符串,默認值：「上傳」  備註：1.0.0 beta2新添加

  33. html5Upload：是否開啓HTML5上傳支持

    參數值：true(容許),false(不容許),默認爲true容許  說明：本功能須要瀏覽器支持HTML5上傳  備註：1.0.0Final新添加

  34. upMultiple：容許一次上傳多少個文件

    參數值：大於0的數值,默認：99,設置爲1關閉多文件上傳  說明：本功能須要瀏覽器支持HTML5上傳  備註：1.0.0 RC3新添加

  35. upLinkUrl：超連接文件上傳接收URL

    參數值：接收用戶上傳的服務器端程序URL，默認留空爲禁用超連接上傳功能，具體使用方法請參考demo8演示文件  注：可以使用內置變量：{editorRoot}，表明當前編輯器的根路徑，例：{editorRoot}upload.php

  36. upLinkExt：超連接上傳前限制本地文件擴展名

    參數值：超連接上傳前限制的文件擴展名列表，默認爲：zip,rar,txt，建議與服務端擴展名檢查列表一致

  37. upImgUrl：圖片文件上傳接收URL

    參數值：接收用戶上傳的服務器端程序URL，默認留空爲禁用上傳功能，具體使用方法請參考demo8演示文件  注：可以使用內置變量：{editorRoot}，表明當前編輯器的根路徑，例：{editorRoot}upload.php

  38. upImgExt：圖片上傳前限制本地文件擴展名

    參數值：圖片上傳前限制的文件擴展名列表，默認爲：jpg,jpeg,gif,png，建議與服務端擴展名檢查列表一致

  39. upFlashUrl：動畫文件上傳接收URL

    參數值：接收用戶上傳的服務器端程序URL，默認留空爲禁用上傳功能，具體使用方法請參考demo8演示文件  注：可以使用內置變量：{editorRoot}，表明當前編輯器的根路徑，例：{editorRoot}upload.php

  40. upFlashExt：動畫上傳前限制本地文件擴展名

    參數值：動畫上傳前限制的文件擴展名列表，默認爲：swf，建議與服務端擴展名檢查列表一致

  41. upMediaUrl：視頻文件上傳接收URL

    參數值：接收用戶上傳的服務器端程序URL，默認留空爲禁用上傳功能，具體使用方法請參考demo8演示文件  注：可以使用內置變量：{editorRoot}，表明當前編輯器的根路徑，例：{editorRoot}upload.php

  42. upMediaExt：視頻上傳前限制本地文件擴展名

    參數值：視頻上傳前限制的文件擴展名列表，默認爲：avi，建議與服務端擴展名檢查列表一致

  43. onUpload：文件上傳成功回調函數

    參數值：成功後須要執行的函數  說明：這個函數執行時返回的值爲上傳程序返回的msg變量，可能爲字符串或者數組，若爲字符串則直接表明url，如果數組，則必需包含一個url的變量，其它可由可開發者自定義  備註：1.0.0 beta2新添加

  44. plugins：自定義按鈕之插件擴展

    插件對象的屬性解釋：  c：樣式表名稱  t：插件名字(鼠標在按鈕上方時顯示)  s：快捷方式，例："ctrl+enter"  h：是否鼠標懸停直接執行,1:直接執行(省略當前值表明不直接執行)  e：按鈕點擊後須要執行的代碼(省略執行代碼，則把當前的插件名做爲參數，調用瀏覽器的execCommand函數)    特別說明：  若是您但願樣式表存儲在系統自帶的模板目錄ui.css中，請將插件對象的樣式名留空，則會自動按照插件名來調用相應的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名    具體調用方法請參考演示文件夾中的demo9

 

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接口列表：

  1. focus：使編輯器得到焦點

    無參數

  2. setSource：設置編輯器源代碼

    參數1：要設置的源代碼內容，例：'<p>aaa</p>'

  3. getSource：返回編輯器格式後的源代碼

    無參數

  4. appendHTML：粘貼HTML內容到編輯器結尾處

    參數1：要粘貼的HTML代碼，例：'<p>uuu</p>'  注：0.9.5版添加

  5. getSelect：返回當前選中的內容

    參數1：返回格式，可選'text'返回文本格式，其它全部值都返回HTML格式

  6. pasteHTML：粘貼HTML內容到編輯器當前光標處

    參數1：要粘貼的HTML代碼，例：'<p>uuu</p>'  參數2：是否覆蓋粘貼，留空(覆蓋粘貼)、true(粘貼在光標選擇區域以前)、false(粘貼在光標選擇區域以後)

  7. pasteText：粘貼文本到編輯器當前光標處

    參數1：要粘貼的文本，例：'這裏的內容徹底原樣顯示<strong>aaa</strong>'  參數2：是否覆蓋粘貼，留空(覆蓋粘貼)、true(粘貼在光標選擇區域以前)、false(粘貼在光標選擇區域以後)

  8. formatXHTML：格式化XHTML代碼

    參數1：須要格式化的HTML代碼，例：'<b>aaa</b>'，返回'<strong>aaa</strong>'  參數2：是否代碼縮進換行,true(執行縮進格式化),false(不執行縮進格式化),默認爲false

  9. toggleSource：在源代碼模式和編輯模式之間切換

    參數1：空(切換),true(顯示源代碼模式),false(顯示編輯模式)

  10. toggleFullscreen：在全屏模式和標準大小之間切換

    參數1：空(切換),true(顯示全屏模式),false(顯示標準模式)

  11. toggleShowBlocktag：切換塊標籤顯示狀態

    參數1：空(切換),true(切換爲顯示塊標籤),false(切換爲不顯示塊標籤)

  12. addShortcuts：添加快捷鍵

    參數1：快捷鍵值，例：'ctrl+enter'  參數2：用戶按下快捷鍵後須要響應的程序代碼，例：function(){$('#frmTest').submit();}  說明：容許爲某個相同快捷鍵值重複添加多個響應代碼  備註：1.0.0 beta2新添加

  13. delShortcuts：刪除快捷鍵

    參數1：快捷鍵值，例：'ctrl+enter'    備註：1.0.0Final新添加

  14. exec：當即執行按鈕及插件

    參數1：工具按鈕名稱(不區分大小寫)，例：Link、img  說明：此函數能夠在插件內部或者外部Javascript代碼中進行調用

  15. showModal：顯示模式窗口

    參數1：模式窗口的標題title  參數2：模式窗口的內容content  參數3：模式窗口的寬度w  參數4：模式窗口的高度h  參數5：模式窗口關閉時的回調函數onRemove

  16. showIframeModal：顯示iframe式的模式窗口

    參數1：模式窗口的標題  參數2：iframe的地址ifmurl，可以使用內置變量：{editorRoot}，表明當前編輯器的根路徑，例：{editorRoot}xheditor_plugins/test.html  參數3：提供給目標iframe頁面回調用的回調函數，能夠在iframe頁面中以這樣的形式調用：callback('1.gif');  參數4：模式窗口的寬度w  參數5：模式窗口的高度h  參數6：模式窗口關閉時的回調函數onRemove

  17. 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. 插件開發指南

標準插件開發流程：

  1. 設計插件圖標並在頁面中定義好CSS
  2. 定義插件參數並寫入初始化參數plugins
  3. 編寫插件調用時要執行的代碼

下面咱們就demo09中的一個最簡單插件做介紹：

<styletype="text/css">  .testClassName {          background:transparent url(img/plugin.gif)no-repeat 20px20px;          background-position:3px3px;  }  </style>
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(){}爲插件點擊後要執行的代碼

特別說明：

  1. 插件執行函數中能夠用this.的方式調用2.3.章節中全部的API接口函數。若是使用回調函數，請將this變量保存在臨時變量中，例如_this;
  2. 在某些瀏覽器下，打開會轉移焦點的操做界面，會致使編輯區域焦點丟失。例如：showIframeModal，在回調函數中需先執行loadBookmark函數恢復焦點，以後才能調用pasteHTML等函數;
  3. 若是但願樣式表存儲在系統自帶的模板目錄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開發團隊爲您定製特殊的功能、皮膚和插件，請參閱咱們提供的商業服務頁面。

 

2.7. 關於二次開發

因爲二次開發相對複雜度較高，須要對xhEditor源代碼結構熟悉，而開發者的水平有高有低，所以容易出現的問題也五花八門。鑑於這個緣由，xhEditor開發團隊對非商業受權用戶不提供任何的技術文檔和技術支持，但願你們理解。

若但願xhEditor開發團隊爲您定製特殊的功能、皮膚和插件，請參閱咱們提供的商業服務頁面。

 

 

3. 其它相關

3.1. 使用常見問題

 

3.1. 使用常見問題

  1. xhEditor能兼容哪些jQuery版本？
  2. 個人網頁是GB2312編碼的，怎樣才能使xhEditor編輯器沒有亂碼？
  3. 正常加載了xhEditor，讀取textarea的value值，爲何讀取不到最新編輯結果？
  4. 怎麼添加自定義的表情？
  5. 怎麼覆蓋編輯器自帶的默認表情？
  6. 當前頁面設置了document.domain，如何讓xhEditor工做正常？
  7. textarea處在隱藏的區域中，如何初始化編輯器？
  8. 使用普通表單提交，怎麼每次服務端取到的值老是以前舊的編輯結果？

  1. 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版本系列。

  2. 個人網頁是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"></script>

  3. 正常加載了xhEditor，讀取textarea的value值，爲何讀取不到最新編輯結果？

    目前網絡中全部的在線編輯器都是利用新建立的iframe來實現可視化編輯功能，xhEditor也不例外，因此在提交前必須要將最新的編輯結果從新同步到原來的textarea。

    xhEditor默認會在textarea所在的form對象中綁定onsubmit事件，當用戶點擊submit按鈕時，xhEditor就會將最新結果同步回textarea，隨後隨表單中的其它表單項一同提交到服務端腳本。所以，若是不須要用Javascript額外處理，普通的表單式提交是沒任何問題的。

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

    1. 使用jQuery的事件綁定或者標準DOM綁定方法在form上綁定submit事件(綁定代碼必需在xhEditor初始化代碼後面)，便是在xhEditor把值回傳後再讀取，在相應綁定的函數中讀取textarea的value值便是最新編輯結果;
    2. 使用jQuery的標準取值方法:$('#textarea_id').val();
    3. 使用xhEditor提供的專用讀值API接口：editor.getSource();

     

  4. 怎麼添加自定義的表情？

    能夠在初始化參數中使用emots參數來自

原文地址：https://www.cnblogs.com/xionghui/archive/2012/05/05/2485412.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程