看了很多关于富文本框在一个页面内多次使用的例子，可以为了代码的整洁进行封装组件，这些网络例子特别多，本文就不概述，本文要讲述的是最简单的方法，就是实例化两次，就是引用两次富文本组件，则需要引用两次。如下进行代码的演示：
第一处使用：
<el-form-item label="题目内容" prop="question">
<quill-editor
v-model="form.question"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<input type="file"id="upload"@change="change" style="display:none;" />
</el-form-item>
</el-form>
第二次使用
<el-form-item label="题目解析" prop="analysis">
<quill-editor
v-model="form.analysis"
ref="myQuillEditor1"
:options="editorOption1"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<input type="file"id="upload1"@change="change1" style="display:none;" />
</el-form-item>
</el-form>
在js中引用的import........from........本来这块都有
还是写上吧，这是整个功能的就是包括使用，图片放大缩小，图片上传的
import {quillEditor} from 'vue-quill-editor'
import Quill from 'quill'
import {ImageDrop} from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
import { container,ImageExtend, QuillWatch} from 'quill-image-extend-module'
import { upload } from "@/api/system/user";
Quill.register('modules/ImageExtend', ImageExtend);
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);
直接说明两次实例化的editoroption和editoroption1
editorOption: {
modules: {
imageDrop: true, //图片拖拽
imageResize: { //放大缩小
displaySize: true
},
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、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"] // 链接、图片、视频
],
handlers: {
image: function(value) {
// debugger;
if (value) {
document.getElementById('upload').click() ci'chu 此处的upload1就是HTML中的id
} else {
this.quill.format('image', false)
}
},
}
},
syntax: {
highlight: text => hljs.highlightAuto(text).value
}
},
},
editorOption1: {
modules: {
imageDrop: true, //图片拖拽
imageResize: { //放大缩小
displaySize: true
},
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、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"] // 链接、图片、视频
],
handlers: {
image: function(value) {
// debugger;
if (value) {
document.getElementById('upload1').click() 此处的upload1就是HTML中的id
} else {
this.quill.format('image', false)
}
},
}
},
},
},
然后其中的computed
computed:{
editor() {
return this.$refs.myQuillEditor.quill;
},
editor() {
return this.$refs.myQuillEditor1.quill;
},
},
下面对应就是change事件
change1(e) {
let file = e.target.files[0]
const formData = new FormData()
formData.append('file', file)
upload(formData).then(res => { 此处
let quill = this.$refs.myQuillEditor1.quill
if (res.code === 200) {
let length = quill.getSelection().index
quill.insertEmbed(length, 'image', res.data)//位置，标签名称，Url地址
quill.setSelection(length + 1)
}
})
.catch(err => {
console.error(err)
})
},
change(e) {
//debugger;
let file = e.target.files[0]
const formData = new FormData()
formData.append('file', file)
upload(formData).then(res => {此处的upload就是后端，上传图片的时候
let quill = this.$refs.myQuillEditor.quill
if (res.code === 200) {
let length = quill.getSelection().index
quill.insertEmbed(length, 'image', res.data)//位置，标签名称，Url地址
quill.setSelection(length + 1)
}
})
.catch(err => {
console.error(err)
})
},
最后的效果：
综上，一个页面两次使用很简单，只需要保证id不同，然后实例化两次，各自进行引用，
效果图如下：
想要照片上传以及放大缩小的代码，可以私信我，本文只简单的谈谈一个页面使用两个富文本组件。
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)