由於業務需要，最近新入手了一款富文字編輯器wangEditor，這是一款輕量級的富文字編輯器，比起百度的ueditor，這款編輯器的介面更加簡單，文件也很詳細。對於需求不是很高的功能來說，這款編輯器實在是不二之選。

一、wangEditor的基本顯示demo

這個部分，也用不著貼程式碼，因為文件很詳細的，具體的參考文件

這裡面有顯示介面的demo。

二、關於編輯器內容的提交

1、這部分剛開始我也很奇怪，因為編輯器是在div裡面，而div又沒有value這個屬性。所以提交表單的時候，其中的內容該怎麼提交上去呢。後來想到用js，把內容同步到input框中，這樣我們就可以愉快的提交了。

//這是編輯器的div
<div id="info1" class="text" > <!--可使用 min-height 實現編輯區域自動增加高度-->
   </div>      

 //下面新增一個input輸入框
    <input class="input-xlarge focused" name="info" type="text" id="info" >                 

介面為：

2、新增JS程式碼

 document.getElementById('info').addEventListener('click'
 
, function () {
    // 讀取 html
    var info = editor1.txt.html();

    document.getElementById("info").value=info;

  }, false);

這段的意思是，給下面的input框架一個點選事件。當點選input框的時候，觸發點選事件，先獲取editor中的html標籤文字，然後，再把編輯器中的內容賦值給input的value
如圖：

這樣，我們提交表單的時候，就可以把編輯器中的內容提交上去了。

3、介面優化

這裡如果大家覺得用這個input框多次一舉的話，我們可以把input框隱藏起來。

<input id='info1' type='hidden' />
//下面跟表單的其他項，比如
   <input class="input-xlarge focused" name="info" type="text" id="info" > 
 //也就是說，當點選表單的其他項的時候,我們還是出發點擊事件，然後把編輯器的值賦值給隱藏的input框，這樣，頁面上不會有什麼反應，但是我們已經把編輯器的值隨著表單提交到伺服器了。

   下面該說上傳圖片了，但是上傳圖片的內容比較多，所以還是下一篇講吧，下一篇主要是上傳圖片到阿里雲OSS，並且在編輯器上顯示我們上傳的圖片。

end