wangEditor

一、富文本编辑器

1. npm 安装

   npm i wangeditor --save

    

2. 引用

   <script>
   import wangEditor from 'wangeditor'
   </script>

    

3. 参数

   export default {
     data(){
       return{
         editor:null,
         editorData:''
       }
     }
   }

    

4. 函数

   export default {
     mounted(){
       // 配置 onchange 回调函数，将数据同步到 vue 中
       const editor=new wangEditor(`#demo1`)
   
       editor.config.onchange=newHtml=>{
         this.editorData=newHtml
       }
       // 创建编辑器
       editor.create()
       this.editor=editor
     }
   }

    

5. 获取文本编辑器的值（写在添加方法之前，正则验证之后）

   this.resetForm.GoodsIntroduce=this.editor.txt.html();//获取文本编辑器的值

    

6. 显示富文本编辑器

   <template>
     <div>
       <div id="demo1">
   
     </div>
     </div>
   </template>

    

7. 效果