上節課我們一起學習了怎樣解決KindEditor富文字編輯器上傳圖片的瀏覽器相容性問題，這節課我們一起學習下富文字編輯器與淘淘商城相結合的使用方法。

      我們在發表一篇部落格或者微博的時候，都會用到富文字編輯器，因為它提供的功能非常豐富，不僅能寫文字，還能設定字型大小、顏色，還能插入圖片、音訊、視訊等等。現在流行的編輯器有三個，第一個是KindEditor，這是國內人寫的；第二個是百度編輯器，這個不用說了，是百度開源的產品；第三個是ceditor編輯器(http://ckeditor.com/)這是個外國的產品。大家可以根據自己的喜好選擇，本節我們便使用KindEditor作為學習的例子。

      既然要使用KindEditor那麼就要下載它的原始碼，大家可以去GitHub上下載KindEditor的原始碼，網址：https://github.com/kindsoft/kindeditor，如下圖所示，可以看到最新的版本是4.1.12，已經3年沒更新過新版本了。如果大家想下載以前的版本，可以點選下圖的"10 releases"按鈕。

      歷史版本頁面如下圖所示，這裡我選擇下載4.1.10版本的原始碼，點選"Source code(zip)"進行下載。

      我們解壓後可以看到如下圖所示的檔案，這麼多檔案不是都需要的，我們留下圈住的檔案，剩下的可以刪除掉。

     然後我們將檔案放到taotao-manager-web工程的webapp下的js的目錄下。如下圖所示。

        下面我們看看taotao-manager-web工程是如何使用KindEditor工程的。

         由於是新增商品頁面需要使用kindeditor，因此我們需要在list-add.jsp頁面的頭部新增kindeditor的css、js、語言包的引用。如下圖所示。

       我們是在商品描述的時候用的富文字編輯器，需要新增<textarea>元件來初始化我們的編輯器頁面，可以看到它是個隱藏域，它的作用有兩個，第一個是當在富文字編輯器編輯完內容後，將內容賦值給這個textarea，然後就可以隨著表單提交給資料庫處理了。第二個作用是當修改編輯內容的時候，需要先載入以前的內容，kindeditor便可以從這個隱藏域中獲取到原來的資料並展示出來。

       下面通過js來看下使用流程，當頁面載入後，會執行下圖建立文字編輯器的操作，其中所傳的引數是textarea元件（通過id找到form，然後再找到名稱為desc的textarea）。TAOTAO是在common.js中定義的。

       common.js當中createEditor方法如下圖所示，該方法接收一個元件，然後使用KindEditor的create方法來初始化文字編輯器，其中TT.kingEditorParams在var TT=TAOTAO的下面定義。可以看到和我們上傳圖片按鈕是同樣的引數，準確的說是同一個元件。

      我們點選富文字編輯器的上傳圖片按鈕，可以看到回顯的圖片顯示在富文字編輯框中。如下圖所示。

      當我們編輯完之後，在提交表單前會將編輯框中的內容與textarea進行同步。如下圖所示。