wangeditor使用

安装wangeditor

npm i wangeditor -S

<template>
  <div id='wangeditor'>
	<div id="wangeditor">
      <div ref="editorElem" style="text-align:left;"></div>
   </div>
    <button @click="updata">提交啊</button>
  </div>
</template>
 
<script>
  import E from "wangEditor";
  import 'wangeditor/release/wangEditor.min.css'
  export default {
    name:'wangeditor',
    data() {
      return {
         form: {
                title: '',
                ImageUrl: '',
                content:'',
                titleSource:'',
                fileSource:'',
            },
      }
    },
    mounted(){
 
          this.editor = new E(this.$refs.editorElem); 
            // 编辑器的事件，每次改变会获取其html内容 
            this.editor.customConfig.onchange = html => {
            this.form.content = html; 
            //  this.catchData(this.editorContent); 
            // 把这个html通过catchData的方法传入父组件 
            }; 

            this.editor.customConfig.menus = [
              // 菜单配置 
              'head', // 标题 
              'bold', // 粗体 
              'fontSize', // 字号 
              'fontName', // 字体 
              'italic', // 斜体 
              'underline', // 下划线 
              'strikeThrough', // 删除线 
              'foreColor', // 文字颜色 
              'backColor', // 背景颜色 
              'link', // 插入链接 
              'list', // 列表 
              'justify', // 对齐方式 
              'quote', // 引用 
              'emoticon', // 表情 
              'image', // 插入图片 
              'table', // 表格 
              'code', // 插入代码 
              'undo', // 撤销 
              'redo' // 重复 
              ]; 
              
            this.editor.customConfig.pasteFilterStyle = false
           	// 手过滤word样式
            this.editor.customConfig.pasteTextHandle = function (content) {
              // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
              if (content == '' && !content) return ''
              var str = content
              str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
              str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
              str = str.replace(/<\/?[^>]*>/g, '')
              str = str.replace(/[ | ]*\n/g, '\n')
              str = str.replace(/&nbsp;/ig, '')
              console.log('****', content)
              console.log('****', str)
              return str
          }
            this.editor.customConfig.uploadFileName = "file";
            this.editor.customConfig.uploadImgHeaders = {
            'token':this.$store.getters.token
            }
            this.editor.customConfig.uploadImgServer = '/prod-api/file/upload' 
            // this.editor.customConfig.uploadImgServer = '/file/upload' 
            this.editor.customConfig.uploadImgTimeout = 10 * 60 * 1000 // 设置超时时间
            //自定义上传图片事件
            this.editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                },
                success: function (xhr, editor, result) {
                    console.log("上传成功");
                },
                fail: function (xhr, editor, result) {
                    console.log("上传失败,原因是" + result);
                    Message({
                      message: "请重新登录!",
                      type: 'error',
                      duration: 5 * 1000
                    })
                    this.$router.push({
                            path: '/login',
                        })
                },
                error: function (xhr, editor) {
                    console.log("上传出错");
                    Message({
                      message: "请重新登录!",
                      type: 'error',
                      duration: 5 * 1000
                    })
                    console.log(this.$router)
                    this.$router.push({
                            path: '/login',
                        })
                },
                timeout: function (xhr, editor) {
                  Message({
                      message: "上传超时!",
                      type: 'error',
                      duration: 5 * 1000
                    })
                    console.log("上传超时");
                },
          customInsert: function (insertImg, result, editor) {
            console.log(result)
            var url = result.data.url;
            insertImg(url)
        }
      };
            // this.editor.customConfig.uploadImgShowBase64 = true //图片以base64形式保存
            this.editor.customConfig.uploadImgMaxSize = 1024 * 1024 * 1024; // 将图片大小限制为 3M
            this.editor.create();
        },
    },
  }
</script>
 
<style>
 
</style>


组件封装参考：https://www.bbsmax.com/A/amd0g2Vq5g/