最近開發Vue項目，想要一個功能更全面的編輯器，我找了好久，目前常見的編輯器有這些：

UEditor：百度前端的開源項目，功能強大，基于 jQuery，但已經沒有再維護，而且限定了后端代碼，修改起來比較費勁，并且比較重。

bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...

kindEditor：功能強大，代碼簡潔，需要配置后臺，而且好久沒見更新了。

quill：本身功能不多，不過可以自行擴展，api 也很好懂，如果能看懂英文的話...

summernote：沒深入研究，UI挺漂亮，也是一款小而美的編輯器，就是用的人不多。

tinymce：GitHub 上星星很多，功能也齊全；唯一一個從 word 粘貼過來還能保持絕大部分格式的編輯器； 不需要找后端人員掃碼改接口，前后端分離；但是，在項目里配置麻煩一點。

wangEditor：輕量、簡潔、易用，但是升級到 3.x 之后，不便于定制化開發。不過作者很勤奮，廣義上和我是一家人，打個call。

于是就選擇則WangEditor2。

1. 安裝：

   點擊 https://github.com/wangfupeng1988/wangEditor/releases 下載最新版
   使用git下載： git clone https://github.com/wangfupeng1988/wangEditor.git
   使用npm安裝: npm install wangeditor （注意 wangeditor 全部是小寫字母）
   使用bower下載：bower install wangEditor （前提保證電腦已安裝了bower）
   

   在項目中直接 npm install wangeditor --save，如果安裝了淘寶鏡像，就使用 cnpm install wangeditor --save，會快一點。

2. 在頁面中放入

   <div id="editor"></div>
   

   然后

   import WangEditor from 'wangeditor'
   

   let that = this
   this.editor = new WangEditor('#WangEditor')  //這個地方傳入div元素的id 需要加#號
   // 配置 onchange 事件
   this.editor.change = function () {          // 這里是change 不是官方文檔中的 onchange
     // 編輯區域內容變化時，實時打印出當前內容
     console.log(this.txt.html())
   }
   this.editor.create()     // 生成編輯器
   this.editor.txt.html('<p>輸入內容...</p>')   //注意：這個地方是txt  不是官方文檔中的$txt
   

3. 在開發中碰到過這么個問題，就是在用v-if動態顯示隱藏頁面元素時，頁面會進行重繪，目標元素div依然存在于dom樹中，但是wanEditor實例需要重新生成，且需要在this.$nextTick方法中調用

   this.editor = new WangEditor('#WangEditor')
   

   方可生效

4. wangEditor的輸入控制欄與輸入區域默認的z-index為100001 10000，當富文本編輯框上方有下拉菜單時，選擇框會被覆蓋。解決辦法

   .w-e-menu{
     z-index: 2 !important;
   }
     .w-e-text-container{
       z-index: 1 !important;
     }
   

   注：w-e-menu的z-index必須比container的大，不然選擇菜單欄選項時，會選不上

   代碼示例：

   import WangEditor from 'wangeditor';
   export default {
       data(){
           return{
               dataInterface: {
                   editorUpImgUrl: 'http://xxxx'  // 編輯器插入的圖片上傳地址
               },
               editor: '',  // 存放實例化的wangEditor對象，在多個方法中使用
           }
       },
       ready(){
           this.createEditor();
       },
       beforeDestroy(){
           this.destroyEditor();
       },
       methods: {
           createEditor(){  // 創建編輯器
               this.editor = new WangEditor('account--editor');
               this.initEditorConfig();  // 初始化編輯器配置，在create之前
               this.editor.create();  // 生成編輯器
               this.editor.$txt.html('<p>要初始化的內容</p>');  // 初始化內容
               $('#account--editor').css('height', 'auto');  // 使編輯器內容區自動撐開，在css中定義min-height
           },
           destroyEditor(){  // 銷毀編輯器，官方沒有給出完美方案。此方案是作者給出的臨時方案
               this.editor.destroy();  // 這個沒有完全銷毀實例，只是作了隱藏
               // $('#account--editor').remove();  // 不報錯的話，這一步可以省略
               this.editor = null;
               WangEditor.numberOfLocation--;  // 手動清除地圖的重復引用，作者的臨時解決方案。否則單頁面來回切換時，地圖報錯重復引用
           },
           initEditorConfig(){  // 初始化編輯器配置
               this.editor.config.fontsizes = {  // 字號配置，增加14px
                   // 格式：'value': 'title'
                   1: '12px',
                   2: '13px',
                   3: '14px',
                   4: '16px',
                   5: '18px',
                   6: '24px',
                   7: '32px',
                   8: '48px'
               };
               this.editor.config.uploadImgUrl = this.dataInterface.editorUpImgUrl;  // 圖片上傳地址
   
               this.editor.config.uploadImgFileName = '_img';  // 統一指定上傳的文件name，需要指定。否則默認不同的上傳方式是不同的name
   
               const usersecret = window.localStorage.getItem('usersecret');  // 獲取 usersecret
   
               this.editor.config.uploadParams = {  // 自定義上傳參數配置
                   usersecret: usersecret
               };
           },
           getEditorContent(){  // 獲取編輯器 內容區內容
               this.editorContent = this.editor.$txt.html();  // 獲取 html 格式
               // this.editor.$txt.text();  // 獲取純文本
               // this.editor.$txt.formatText();  // 獲取格式化后的純文本
           },
       }
   }