開源HTML編輯器xhEditor用法詳解

這個是我在17年CSDN中寫的一篇博客，今天以舊換新，再溫習一遍...

1、在線可視化HTML編輯器概述

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

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

2、使用xhEditor

一、下載xhEditor 最新版本

下載地址：http://xheditor.com/download

二、解壓壓縮文件 【demo 文件夾中能夠查看各類形式的配置實例】，將其中的jquery- 1.4.2.min.js 、xheditor-zh-cn.min.js 【這裏暫時使用中文版】以及 xheditor_emot、xheditor_plugins 和xheditor_skin 三個文件夾拷貝到項目的相應目錄。

三、在相應html 文件的head 標籤結束以前添加： 
<script src="jquery-1.4.2.min.js"  type="text/javascript"></script>
<script src="xheditor-zh-cn.min.js"  type="text/javascript"></script>

四、調用方法

方法1 

　　在textarea 上添加屬性： class="xheditor {skin:'default'}" ，前面主參數也能夠是xheditor-mini 和xheditor-simple ，分別加載迷你和簡單工具欄，後面詳細參數能夠省略。

方法2 【推薦使用】

　　在您的頁面初始JS 代碼里加上： $(「#helpInfo」).xheditor();

<script type="text/javascript">
  $(document).ready(function(){
    //初始化xhEditor編輯器插件
    $("#helpInfo").xheditor({
     　　tools:'simple',
     　　skin:'default',
     　　upMultiple:true,
     　　upImgUrl: '{editorRoot}/upload.jsp',
     　　upImgExt: "jpg,jpeg,gif,bmp,png",
     　　onUpload:insertUpload
    });
    //xbhEditor編輯器圖片上傳回調函數
    function insertUpload(msg) {
     　　var _msg = msg.toString();
     　　var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
     　　var _picture_path = Substring(_msg);
     　　var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
     　　$("#helpInfo").append(_msg);
     　　//$("#uploadList").append(_str);
    }
    //處理服務器返回到回調函數的字符串內容,格式是JSON的數據格式.
    function Substring(s){
     　　return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
    }
   });
  </script>

五、 使用MyEclipse建立Java Web項目

把 下載的xhEditor源代碼包中的相關文件拷貝到本身的web目錄，能夠建立一個文件夾scripts存放。 

能夠看出咱們大體須要這幾個步驟： 

1. 獲取xheditor源文件並放置到項目的相應位置。 
2. 加入文件上傳組件須要的jar包。 
3. 指 定文件存放目錄ARTICLE_IMG。 
4. 建立Servlet文件，並在web.xml中配置路徑。 
5. 建立並編寫基於jquery腳本的xheditor.html文件。

6. 編寫HTML或者JSP頁面

注意：上述代碼基於jquery。upImgUrl屬性配置的是圖片上傳的後臺路徑，/xheditor /servlet /UploadFileServlet：xheditor屬於項目名稱，後面的/servlet/UploadFileServlet是web.xml中 配置的servlet地址。

七、 編寫後臺文件上傳處理的Servlet代碼

八、web.xml的servlet配置

九、 配置基本完成，部署到tomcat容器測試。 
打來瀏覽器，進入HTML頁面，xheditor編輯器初始化狀態。如圖所示。 

十、 圖片上傳到後臺而且顯示到編輯器 
點擊工具欄的圖片上傳按 鈕，而後根據上傳按鈕選擇本地文件，圖片將馬上以AJAX的方式上傳到後臺。如圖所示。

到這裏基於Java後臺的xheditor編輯器的 圖片上傳功能基本實現完畢，編輯器基於jquery編寫，具備很是好的拓展性和伸縮性，各位讀者還能夠根據本身的興趣慢慢挖掘源代碼包中的其餘示例，同時 也能用Java去實現它們，這樣就最好咯。之後咱們作項目的時候就能夠馬上拿來使用，方便快捷，省去不少麻煩事。

圖片文件上傳成功後，點擊肯定按鈕才能把圖片顯示到編輯器中，同時 頁面下方將會保存checkbox，對應的是文件的名稱，這樣方便頁面提交後，到後臺相應的目錄尋找文章對應的圖片有那些，而後能夠把圖片寫入到數據庫。