vue富文本 vue-quill-editor + 上传图片到阿里云服务器 + 修改富文本内容

前言

使用富文本编辑器，需要将图片上传到服务器，完成之后，还需要在修改页面完成修改富文本内容，使用的富文本插件是vue-quill-editor,

一 、安装 vue-quill-editor

npm i vue-quill-editor
npm install quill --save
npm install quill-image-resize-module --save // 图片缩放组件引用
npm i quill-image-drop-module  -S // 图片拖动组件引用
npm install axios // 上传阿里云服务器用

二、引入

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor, Quill } from 'vue-quill-editor';
import axios from 'axios';// 如果要图片拖拽功能，增加这两个插件
import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用
import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop); // 注册
Quill.register("modules/imageResize", ImageResize); // 注册

三、配置 vue.config

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack') // 引入webpack
module.exports = defineConfig({configureWebpack: {plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})]},
})

四 、上传图片到阿里云成功后的图片显示预览

五、富文本组件代码

<template><div class="editor"><quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption"@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor></div>
</template><script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor, Quill } from 'vue-quill-editor';
import axios from 'axios';// 如果要图片拖拽功能，增加这两个插件
import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用
import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop); // 注册
Quill.register("modules/imageResize", ImageResize); // 注册export default {name: "customEditor",components: {quillEditor},props: {value: {type: String,default: ''}},watch: {value(newValue) {this.content = newValue; // 监听 props.value 的变化},content(newValue) {this.$emit('content-changed', newValue); // 向父组件发出事件}},data() {return {content: this.value,editorOption: {modules: {toolbar: [["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"], //清除字体样式["image",], //上传图片、上传视频 "video"]},imageDrop: true,imageResize: {displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']}},};},mounted() {// 获取工具栏实例并覆盖图片处理函数const toolbar = this.$refs.myQuillEditor.quill.getModule('toolbar');toolbar.addHandler('image', this.handleImageUpload);},methods: {// 处理图片上传事件handleImageUpload() {const input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', 'image/*');input.onchange = async () => {const file = input.files[0];if (file) {await this.uploadImage(file);}};input.click();},// 上传图片到阿里云服务器async uploadImage(file) {// console.log("file", file);try {// 获取阿里云上传凭证const res = await this.$axios("feiyong/ossNews")// console.log("res", JSON.parse(JSON.stringify(res)));const formData = new FormData();const fileName = res.data.dir + res.data.gsid + '/' + `${Date.now()}_${Math.random()}`;// 添加必要字段formData.append("key", fileName); // 最终存储的文件名formData.append("policy", res.data.policy);formData.append("OSSAccessKeyId", res.data.accessid);formData.append('success_action_status', "200");formData.append("signature", res.data.signature);formData.append("callback", res.data.callback);formData.append("file", file); // 图片文件      // 发送上传请求const uploadRes = await axios.post(res.data.host, formData);// 获取图片URLconst imageUrl = `${res.data.host}/${uploadRes.data.data.filename}${res.data.style2}`;// const imageUrl = `${res.data.host}/${uploadRes.data.data.filename}${res.data.style1}`;// 插入图片到编辑器this.insertImageToEditor(imageUrl);} catch (error) {console.error('上传失败', error.response ? error.response.data : error.message);}},// 插入图片到编辑器insertImageToEditor(url) {const range = this.$refs.myQuillEditor.quill.getSelection();this.$refs.myQuillEditor.quill.insertEmbed(range.index, 'image', url);this.$refs.myQuillEditor.quill.setSelection(range.index + 1);},async onEditorChange({ html}) {// console.log(quill, "quill");// console.log(text, "text");// console.log(html, "html");this.content = html;this.$emit('content-changed', html); // 发出事件},onEditorBlur(e) {console.log(e, '失去焦点事件');},onEditorFocus(e) {console.log(e, '获得焦点事件');},},};
</script><style lang="less">
.ql-snow .ql-tooltip[data-mode="link"]::before {content: "请输入链接地址:";
}.ql-snow .ql-tooltip.ql-editing a.ql-action::after {border-right: 0px;content: "保存";padding-right: 0px;
}.ql-snow .ql-tooltip[data-mode="video"]::before {content: "请输入视频地址:";
}.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";
}.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";
}.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";
}.edit_container {width: 100%;
}:deep(.ql-editor) {min-height: 400px;
}
</style>

六、 父页面使用富文本组件

修改的时候直接赋值就可以获取到原来的内容

<template><fuwenben @content-changed="handleContentChange" v-model="editorContent"></fuwenben>
</template>
<script>
import fuwenben from '@/components/fuwenben/fuwenben'
export default {name: "WenZhang",data() {return {editorContent: '',}},methods: {handleContentChange(content) {this.editorContent = content;},}}
</script>