- 安装架包 : npm install vue-quill-editor --save
- 封装富文本控件:quillEditor.vue
-
<template> <quill-editor ref="text" :disabled="disabled" v-model="content.value" :options="editorOption" class="myQuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' const toolbarConfig = [ ['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] }], // 标题 [{ color: [] }, { background: [] }], // 颜色选择 [{ font: [] }], // 字体 [{ align: [] }], // 居中 ['clean'], [('link', 'image', 'video')] // 链接、图片、视频 ] export default { name: 'vueQuillEditor', props: { content: { value: '' }, disabled: false }, data() { return { editorOption: { theme: 'snow', boundary: document.body, modules: { toolbar: toolbarConfig }, placeholder: '请输入内容... ...', readOnly: false } } }, components: { quillEditor }, methods: { onEditorReady(editor) { // 准备编辑器 }, onEditorBlur() {}, // 失去焦点事件 onEditorFocus() {}, // 获得焦点事件 onEditorChange() {}, // 内容改变事件 beforeEditorUpload() { // 显示loading动画 this.quillUpdateImg = true }, editorUploadSuccess(res, file) { // 获取富文本组件实例 const quill = this.$refs.myQuillEditor.quill // 如果上传成功 if (res.code === 0) { // 获取光标所在位置 const length = quill.getSelection().index // 插入图片 res.info为服务器返回的图片地址 quill.insertEmbed(length, 'image', res.data.filepath) // 调整光标到最后 quill.setSelection(length + 1) } else { this.$message.error('图片插入失败') } // loading动画消失 this.quillUpdateImg = false }, // 富文本图片上传失败 editorUploadError() { // loading动画消失 this.quillUpdateImg = false this.$message.error('图片插入失败') } } } </script>
- 调用封装好的控件:
<template>
<el-card class="box-card">
<el-form :model="modelInfo" label-width="80px" label-position="top">
<el-form-item label="填写审核信息">
<vueQuillEditor :content="content"></vueQuillEditor>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// 引用控件
import vueQuillEditor from '@/components/quillEditor/quillEditor'
export default {
components: {
//引入组件
vueQuillEditor,
},
data() {
return {
// 定义变量
content: { value: '' },
}
}
}
</script>