Vue富文本编辑器 Vue-Quill-Editor #S05

Vue 富文本编辑器 评论

摘要：富文本编辑器 Vue-Quill-Editor

之前项目用的是百度的UEditor，这个编辑器已经很多年没有人维护，并且配置太繁琐，于是换了Quill（还有一个wangEditor，因为Vue-Quill-Editor对图片编辑更友好）。

最终界面：
富文本编辑器.png

安装

1
2
3
4
5
6
# 安装 Vue-Quill-Editor
npm install Vue-Quill-Editor --save
# 如果需要调整图片大小，还需要安装
# quill-image-drop-module、quill-image-resize-module
npm install quill-image-drop-module --save
npm install quill-image-resize-module --save

配置

在vue.config.js文件中添加：

1
2
3
4
5
6
7
8
9
10
11
+ const webpack = require('webpack');
module.exports = {
  configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({
+        'window.Quill': 'quill/dist/quill.js',
+        'Quill': 'quill/dist/quill.js'
+      }),
    ]
  }
}

在.vue文件中添加：

1
2
3
4
5
6
7
8
9
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

最终代码

1
2
3
4
5
# 目录结构
├─editor
 |   ├─index.vue
 |   ├─components
 |   |     └editor.vue

👇editor.vue

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

<template>
  <quill-editor v-model="innerContent" :options="editorOption" @change="onEditorChange" />
</template>
<script>
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  model: {
    prop: 'content',
    event: 'change'
  },
  props: {
    content: { type: String, default: () => '' }
  },
  data() {
    return {
      innerContent: this.content,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ['clean'],
            ['link', 'image', 'video']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        },
        placeholder: '请输入正文'
      }
    }
  },
  watch: {
    content(value) {
      console.log(value)
      this.innerContent = value
    }
  },
  methods: {
    onEditorChange({ quill, html, text }) {
      this.$emit('change', html)
    }
  }
}
</script>
<style>
.ql-container {
  min-height: 300px;
}
</style>

👇index.vue

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
<template>
  <div class="app-container">
    <el-form label-position="right" :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="form.source" />
      </el-form-item>
      <el-form-item label="内容">
        <editor v-model="form.content" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="submitForm()">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import editor from './components/editor'
export default {
  components: {
    editor
  },
  data() {
    return {
      form: {
        title: '',
        source: '',
        content: ''
      }
    }
  },
  methods: {
    submitForm() {
      console.log(this.form)
    }
  }
}
</script>
<style>
</style>

饭盒尽头

个人简介。