之前项目用的是百度的UEditor,这个编辑器已经很多年没有人维护,并且配置太繁琐,于是换了Quill(还有一个wangEditor,因为Vue-Quill-Editor对图片编辑更友好)。
最终界面:
安装
1 | # 安装 Vue-Quill-Editor |
配置
在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
9import 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 | # 目录结构 |
👇editor.vue
1 |
|
👇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>