目录
安装
vue-quill-editorquill-image-resize-module已使用过版本（兼容）
"vue": "^2.6.14",
"quill-image-resize-module": "^3.0.0",
"vue-quill-editor": "^3.0.6",
封装
在 components 新建页面 VueQuillEditor.vue
<template>
<div class="VueQuillEditor">
<!-- 上传 -->
<el-upload :class="z_refs" action="" name="file" :show-file-list="false" :auto-upload="false" :on-change="uploadChange" v-show="false" v-if="z_refs"></el-upload>
<el-upload class="quill-avatar-uploader" action="" name="file" :show-file-list="false" :auto-upload="false" :on-change="uploadChange" v-show="false" v-else></el-upload>
<quill-editor v-model="q_value" :options="editorOption" :ref="z_refs ? z_refs : 'QuillEditor'"></quill-editor>
</div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 调整图片大小
import imageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize)
// 自定义字号/字体（需要在 App.vue 导入字体样式文件 quill_font.css）
let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '32px', '36px', '38px', '40px', '45px', '50px']
Quill.register(fontSizeStyle, true)
// quill编辑器的字体
var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用代码块
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题，键值对的形式；1、2表示字体大小
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ size: fontSizeStyle.whitelist }], // 字体大小
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: fonts }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image', 'video'] // 链接、图片、视频
]
export default {
components: {
quillEditor
},
data() {
return {
z_refs: this.v_ref,
q_value: this.v_data,
// 富文本编辑器配置
editorOption: {
modules: {
toolbar: {
container: toolbarOptions,
class_name: this.v_ref, // 获取上传input的类名
handlers: {
image: function (value) {
if (value) {
// console.log(this.options)
// 调用element的图片上传组件
if (this.options.class_name) {
document.querySelector(`.${this.options.class_name} input`).click()
} else {
document.querySelector('.quill-avatar-uploader input').click()
}
} else {
this.quill.format('image', false)
}
}
}
},
// 调整图片大小
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
}
},
placeholder: '请输入'
}
}
},
// 如需一个页面多次引用此组件可给此组件绑定 v_ref 值
props: ['v_data', 'v_ref'],
model: {
prop: 'v_data',
event: 'toValue'
},
watch: {
v_data() {
this.q_value = this.v_data
},
v_ref() {
this.z_refs = this.v_ref
},
q_value: {
handler(newVal, oldVal) {
this.$emit('toValue', newVal)
}
}
},
mounted() {},
methods: {
// 富文本上传图片
async uploadChange(file) {
// 上传接口
const { data: res } = await this.$api.upload_file(file.raw)
// 获取富文本组件实例
let quill
if (this.z_refs) quill = this.$refs[this.z_refs].quill
else quill = this.$refs.QuillEditor.quill
// quill获取光标位置
let length = quill.getSelection().index
// js获取光标位置
// let length = window.getSelection().focusOffset
// console.log(length)
// 插入图片
quill.insertEmbed(length, 'image', res.filePath)
// 调整光标到最后
quill.setSelection(length + 1)
this.$message.success(res.msg)
}
}
}
</script>
<style lang="less" scoped>
.VueQuillEditor {
height: 100%;
:deep(.quill-editor) {
height: 100%;
.ql-container {
height: calc(100% - 42px);
}
}
}
</style>
单次调用
<template>
<div>
<div>
<Editor v-model="data"></Editor>
</div>
<el-button @click="saveData">保 存</el-button>
</div>
</template>
<script>
import Editor from '../VueQuillEditor.vue'
export default {
components: { Editor },
data() {
return {
data: ''
}
},
methods: {
saveData() {
console.log(this.data)
}
}
}
</script>
<style lang="less" scoped>
</style>多次调用
<template>
<div class="page-view">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="描述" name="first">
<Editor v-model="data.describe" :v_ref="'editorRef'"></Editor>
</el-tab-pane>
<el-tab-pane label="参数" name="second">
<Editor v-model="data.param" :v_ref="'editorRef1'"></Editor>
</el-tab-pane>
<el-tab-pane label="样本" name="third">
<Editor v-model="data.sample" :v_ref="'editorRef2'"></Editor>
</el-tab-pane>
</el-tabs>
<el-button type="primary" size="small" @click="saveData">保 存</el-button>
</div>
</template>
<script>
import Editor from '../VueQuillEditor.vue'
export default {
components: { Editor },
data() {
return {
data: {
describe: '',
param: '',
sample: ''
},
activeName: 'first'
}
},
methods: {
saveData() {
console.log(this.data)
}
}
}
</script>
<style lang="less" scoped>
</style>vue.config.js配置
const { defineConfig } = require('@vue/cli-service')
var webpack = require('webpack')
module.exports = defineConfig({
transpileDependencies: true
})
module.exports = {
publicPath: './',
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
Quill: 'quill/dist/quill.js'
})
]
},
}