1.首先第一步是下載壓縮檔案，去官網下載http://www.wangeditor.com/

2.解壓檔案，然後將資料夾放到webapp下面，如圖所示：

3.編寫html頁面，在頁面中構造編輯器

   <!--文字顯示區域，名字id是editor-->
        <div id="editor">

        </div>
        <!--引入wangEditor中的js檔案-->
        <script type="text/javascript" src="wangEditor/release/wangEditor.min.js"></script>
       <!--初始化富文字編輯器-->
        <script type="text/javascript">
            var E = window.wangEditor
            var editor = new E('#editor')
            // 或者 var editor = new E( document.getElementById('editor') )
            //這裡我們選用base64來上傳圖片 
            editor.customConfig.uploadImgShowBase64 = true
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
            editor.customConfig.uploadImgMaxLength = 5
            editor.create()
        </script>
 

4.通過富文字物件名字呼叫.txt.html()來獲得文字中的內容

這個內容，包含你對文字的樣式修改，還包含圖片內容，圖片的內容是通過轉為base64碼來儲存的，可以直接插入資料庫中

，顯示的時候就從資料庫讀出來base64碼，並將之轉換成圖片。但是切記圖片不要太大，否則轉成的base64碼將會非常多，會擠爆你的資料庫的。

5.如此可以得到良好的富文字編輯器，還能上傳圖片