富文本编辑器：Vue整合wangEditor_wangeditor vue

最近在做项目时，客户有个发布新闻动态的功能，具体页面内容让客户自己编写，所以要选择富文本编辑器，这样用户体验好一点。网上有很多的富文本编辑器， 因为项目的功能并不是很复杂，所以选择了wangEditor，界面简洁，使用起来也挺方便的；

实现思路

1.安装wangEditor
2.封装成组件
3.父组件中直接调用

官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

一、wangEditor安装

这里使用npm命令安装；

npm install wangeditor 
1

二、组件封装

2.1、创建组件

这里我们创建一个名为editor.vue的文件，并导入文件；

import E from "wangeditor"
1

2.2、初始化wangeditor

(1)我们创建一个初始化方法
(2)编写初始化代码
(3)在mounted()中调用

    <!---html代码-->
    <div id="e" >
    </div>
1
2
3

js代码

    initE() {
      this.editor = new E('#e')
      //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
      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.create()
    },
    mounted(){
      this.initE()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.3、配置图片上传

 this.editor.customConfig.uploadFileName = 'file'
      this.editor.customConfig.uploadImgServer = `url`  // 你的服务器上传地址
      this.editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          console.log(result.url)
          var url = result.url
          insertImg(url)

          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

该代码需放置在this.editor = new E(‘#e’) 和 this.editor.create()之间；

2.4、接收wangeditor接收值

 this.editor.customConfig.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
  }
1
2
3
4

2.5、接收父组件传递过来的值

这里我们可以使用props属性指定字段来接收值，并使用model指定字段和事件

    model: {
      prop: 'desc',
      event:'change'
    },
    props:{
      desc:{
        type:String,
        default:""
      },
      //业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
      isClear:{
        type:Boolean,
        default:false
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.6、将父组件传递过来的值传入wangeditor

这里我们需要使用watch来监听值的变化，并进行赋值操作

watch:{
    //判断用户是否清除编辑器缓存
      isClear(val){
     //   console.log(val)
        if (val){
          this.editor.txt.clear()
        }
      },
      //接收父组件传递过来的值
      desc(value) {
        //console.log("desc",value)
        //判断父组件传递过来的值跟当前编辑器内容是否一样
        if (value != this.editor.txt.html()) {
          this.editor.txt.html(this.desc)
        }
      }
     },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.7、子组件代码汇总

<template>
  <div class="editor">
    <div id="e" >
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import E from "wangeditor"
  export default {
    name: 'editor',
    data(){
      return{
        content:"",
        editor: null,
        info_:null
      }
    },
    model: {
      prop: 'desc',
      event:'change'
    },
    watch:{
      isClear(val){
       // console.log(val)
        if (val){
          this.editor.txt.clear()
         // this.info_=null
        }
      },
      desc(value) {
        //console.log("desc",value)
        if (value != this.editor.txt.html()) {
          this.editor.txt.html(this.desc)
        }
      }
    },
    props:{
      desc:{
        type:String,
        default:""
      },
 //业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
      isClear:{
        type:Boolean,
        default:false
      }
    },

    methods:{
      initE(){
         this.editor = new E('#e')
        this.editor.customConfig.onchangeTimeout = 1000 // 单位 ms
        this.editor.customConfig.uploadFileName = 'file'
        this.editor.customConfig.uploadImgServer = `url`  // 你的服务器地址
        this.editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
          },
          success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },
          timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },

          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            console.log(result.url)
            var url = result.url
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
          }
        }
        this.editor.customConfig.onchange = (html) => {
          this.info_ = html // 绑定当前逐渐地值
          this.$emit('change', this.info_) // 将内容同步到父组件中
        }
        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.create()
       // this.editor.txt.html(this.desc)
      //  this.editor.txt.html(this.desc)
        }
    },
    mounted () {
      this.initE();
    }
  }
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

三、父组件中进行调用

3.1、创建父组件，这里我们创建文件add-or-update.vue文件

(1)导入子组件
(2)在comonents中创建组件
(3)使用组件

import editor from './editor'
1

components: {
      EDITOR: editor,
    }
1
2
3

<EDITOR v-model="content" :isClear="isClear" ></EDITOR>
1

3.2、代码汇总

<template>
   <EDITOR v-model="content" :isClear="isClear" ></EDITOR>
</template>
<script>
  import editor from './editor'
  export default {
    components: {
      EDITOR: editor
    },
    data () {

      return {
        content:"",
        isClear: false//清除富文本编辑器内容
        }
      }
    },
    methods: {
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

富文本编辑器完成，快去撸起你代码~