vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model

痛定思痛。 2022-08-29 05:47 305阅读 0赞

# 背景 #

本机的环境使用的vue的脚手架，用到了富文本编辑框，所以选择将wangeditor封装为组件调用  
wangeditor官网：https://www.wangeditor.com/

在vue的项目中安装 wangeditor

npm i wangeditor --save

# wangeditor组件封装 #

<template>
      <div>
        <div
          ref="editor"
          style="text-align:left"
        ></div>
      </div>
    </template>
    
    <script>
      import WangEditor from "wangeditor";
      import {  ACCESS_TOKEN } from '@/store/mutation-types'//系统中发送请求需要携带toekn,根据自己的项目决定
      import Vue from 'vue'
      export default { 
        name: "WangEditor",
    
        data() { 
          return { 
            token: "",
            editorE:""//编辑器的对象
          }
        },
        //接收v-model的值
        props: { 
          value: String
        },
        model: { 
          prop: 'value',
          event: 'change'
        },
        mounted() { 
          //初始化编辑框
          this.init();
          this.editorE.txt.html(this.value)
        },
        created(){ 
          this.token = Vue.ls.get(ACCESS_TOKEN);//获取访问的token
        },
    
        watch:{ 
          value(val){ //普通的watch监听
            if (val !== this.editorE.txt.html()) { 
              this.editorE.txt.html(val)
            }
          }
        },
    
        methods: { 
          init() { 
            const _this = this;
            /*实例化*/
            _this.editorE = new WangEditor(_this.$refs.editor);
          // 配置 server 接口地址
            _this.editorE.config.uploadImgServer = window._CONFIG['domianURL']+"/sys/common/upload"
            //设置富文本的高度
            _this.editorE.config.height = 600
            //默认限制图片大小是 5M
            _this.editorE.config.uploadImgMaxSize = 8 * 1024 * 1024 // 8M
            //自定义上传的参数
            _this.editorE.config.uploadFileName = 'file'
            //自定义头部token信息
            _this.editorE.config.uploadImgHeaders = { 
              "X-Access-Token":_this.token
            }
            //设置请求参数
            _this.editorE.config.uploadImgParams = { 
              suffixPath: '@nowm' //后缀水印
            }
            //timeout 即上传接口等待的最大时间，默认是 10 秒钟，可以自己修改
            _this.editorE.config.uploadImgTimeout = 3 * 1000
    
    
            _this.editorE.config.uploadImgHooks = { 
              // 上传图片之前
              before: function(xhr) { 
                console.log(xhr)
    
              /* // 可阻止图片上传 return { prevent: true, msg: '需要提示给用户的错误信息' }*/
              },
              // 图片上传并返回了结果，图片插入已成功
              success: function(xhr) { 
                //console.log('success', xhr)
              },
              // 图片上传并返回了结果，但图片插入时出错了
              fail: function(xhr, editor, resData) { 
                console.log('fail', resData)
              },
              // 上传图片出错，一般为 http 请求的错误
              error: function(xhr, editor, resData) { 
                console.log('error', xhr, resData)
              },
              // 上传图片超时
              timeout: function(xhr) { 
                console.log('timeout')
              },
              // 图片上传并返回了结果，想要自己把图片插入到编辑器中
              // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
              customInsert: function(insertImgFn, result) { 
                // result 即服务端返回的接口
                console.log('customInsert', result)
    
                // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                insertImgFn(result.message)
              }
            }
    
            /*创建编辑器*/
            _this.editorE.create();
    
          // 监控变化，同步更新到文本 向上传递更新
            _this.editorE.config.onchange = function (html) { 
              //console.log(html);
              _this.$emit("change", html);
            }
    
    
          }
        }
    
      };
    </script>

# 页面调用 #

<a-form-model-item label="文章内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="articleContent">
                 <WangEditor v-model="model.articleContent"></WangEditor>
     </a-form-model-item>

//引入包路径
      import WangEditor from '@/components/WangEditor/WangEditor'
      //在引入容器
       export default { 
        name: 'XbSpiderArticleForm',
        components: { 
          WangEditor
        },
        }