Vue wangEditor 安裝和使用，文章加載和渲染

1. 安裝wangEditor

   npm install wangeditor

2. 使用說明

   • html部分

     <div>
          <div id="editor" class="editor"></div>
          <button class="btn btn-royal" @click="postfillContent()">保存</button>
     </div>
     

   • js引入文件

     import E from 'wangeditor'
     

   • 方法使用
     官網使用方法

       name: 'editor',
       mounted () {
         var editor = new E('#editor')
               editor.customConfig.onchange = (html) => {
                 this.formArticle = html
               }
               editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上傳URL
               editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
               editor.customConfig.uploadImgMaxLength = 5;    
               editor.customConfig.uploadFileName = 'myFileName';
               editor.customConfig.uploadImgHooks = {
               customInsert: function (insertImg, result, editor) {
                           // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
                           // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
                    
                           // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
                           var url =result.data;
                           insertImg(url);
                    
                           // result 必須是一個 JSON 格式字符串！！！否則報錯
                       }
                   }
                   editor.create();
       }
     

   遇到的問題和解決辦法
   (問題)——官網推薦的這種方法是在新增或者是創建文章這種方法不錯，但是如果在查看文章和修改文章的時候那麼就在富文本編輯器裏顯示不出來。
   (原因)——官網上的方法是在富文本編輯器創建完頁面後再請求接口，那麼在往其中方文章，完全是不可行的，我用了官網寫的兩個方法都是不可行的，這個都是預先寫在頁面裏的，說以說實際並不適用

   editor.txt.html('<p>用 JS 設置的內容</p>')
   editor.txt.append('<p>追加的內容</p>')
   

   (解決辦法)——在請求完接口後再創建富文本編輯器（就莫問題啦，嚶嚶嚶）

   	name: 'editor',
     	mounted () {},
     	activated () {
     			//請求文章
   	      this.aa()
   	  },
     	methods:{
     		aa(){
     			當接口請求成功在執行方法創建富文本編輯器
     			this.bb()
   		},
   		bb(){
         var editor = new E('#editor')
         editor.customConfig.onchange = (html) => {
           this.formArticle = html
         }
         editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上傳URL
         editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
         editor.customConfig.uploadImgMaxLength = 5;    
         editor.customConfig.uploadFileName = 'myFileName';
         editor.customConfig.uploadImgHooks = {
         customInsert: function (insertImg, result, editor) {
                     // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
                     // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
              
                     // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
                     var url =result.data;
                     insertImg(url);
              
                     // result 必須是一個 JSON 格式字符串！！！否則報錯
                 }
             }
             editor.create();
       },
   	}