wangeditor在vue中的组件封装以及图片上传功能实现

1. wangeditor官网https://www.wangeditor.com/doc/
2. 依赖下载：

   cnpm install wangeditor --save

3. 组件封装

   <template>
     <div :class="prefixCls">
       <div ref="editor" class="editor-wrapper"></div>
     </div>
   </template>
   
   <script>
   import { baseUrl } from '../../api/url'
   import WEditor from 'wangeditor'
   export default {
     props: {
       prefixCls: {
         type: String,
         default: 'my-editor'
       },
       value: {
         type: String,
         default: ''
       },
       isClear: {
         type: Boolean
       }
     },
     data() {
       return {
         editor: null,
         editorContent: 'getEditor'
       }
     },
     watch: {
       isClear(val) {
         // 触发清除文本域内容
         if (val) {
           this.editor.txt.clear()
           this.editorContent = null
         }
       }
     },
     mounted() {
       this.initEditor()
       this.setText()
     },
     methods: {
       // 获取文本内容
       getText() {
         this.editor.txt.text(this.editorContent)
       },
       // 设置文本内容
       setText(val) {
         this.editor.txt.html(val)
       },
       /**
        * @name:组件初始化
        */
       initEditor() {
         this.editor = new WEditor(this.$refs.editor)
         this.editor.config.uploadImgServer =
          baseUrl + '上传接口'
         this.editor.config.uploadFileName = 'file' // 上传参数
         this.editor.config.onchange = (newHtml) => {
           this.editorContent = newHtml
           this.$emit('change', this.editorContent) // 将内容同步到父组件中
         }
         this.editor.config.uploadImgMaxSize = 50 * 1024 * 1024 // 50M
         this.editor.config.pasteIgnoreImg = true // 忽略粘贴的图片
         this.editor.config.uploadImgHooks = {
           customInsert: function (insertImgFn, result) {
             var response = result.data[0]
             let dowUrl =
              baseUrl + '下载接口'+?fileName=' +
               response.fileSaveName +
               '&filePath=' +
               response.filePath
             insertImgFn(dowUrl)
           }
         }
         this.editor.config.zIndex = 999 // 配置富文本的权重 不然会覆盖其他组件
         this.editor.create()
       }
     }
   }
   </script>
   
   <style lang="scss" scoped>
   .my-editor {
     .editor-wrapper {
       text-align: left;
     }
   }
   </style>
   

4. 页面中使用

   <template>
     <div class="">
       <editor-bar
         v-model="content"
         @change="getEditor"
         ref="weditor"
       ></editor-bar>
     </div>
   </template>
   
   <script>
   import EditorBar from "../../components/wangEditor.vue";
   export default {
     components: {
       EditorBar,
     },
     data() {
       return {
         content: "hhhhhhh"
       };
     },
     computed: {},
     methods: {    // 获取富文本内容
       getEditor(value) {
         console.log(value);
         this.content = value;
       }  },
     mounted() {
       this.getEditor();
       this.$refs.weditor.setText("hhh");  },
   };
   </script>
   
   <style lang="scss" scoped></style>