话不多说直接上代码
基础版本的富文本
1.安装插件
npm i vue-quill-editor
# 或者
yarn add vue-quill-editor
2.页面部分
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
3.逻辑部分
import { quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: { quillEditor },
data() {
return {
content: null,
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"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
], //工具菜单栏配置
},
placeholder: '请在这里添加产品描述', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
methods: {
// 失去焦点
onEditorBlur(editor) { },
// 获得焦点
onEditorFocus(editor) { },
// 开始
onEditorReady(editor) { },
// 值发生变化
onEditorChange(editor) {
this.content = editor.html;
console.log(editor);
},
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
}
到这里简单版本的富文本就可以实现了，如果你的需求仅仅是实现一个简单的富文本那么上面的代码就足够了，下面接着列举如何自定义上传图片和实现图片的拖动以及大小裁剪
升级版的富文本
1.依赖安装
npm i vue-quill-editor
npm i quill
npm i quill-image-resize-module
如果安装过后遇到 Reason: TypeError: Cannot read properties of undefined (reading 'imports') 这行报错那么需要在vue.config.js 中添加如下代码
configureWebpack: {
...
plugins: [
...
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
Quill: 'quill/dist/quill.js'
})
]
},
2.页面部分
图片上传地址/api/activity
// 图片上传
export const EXPORT_API = process.env.VUE_APP_BASE_API + '/api/xxx/xxx'
注：process.env.VUE_APP_BASE_API为环境配置的自定义项想学习process.env可以看博主的另一篇文章
[这里附上入口](搞懂vue配置中的process.env - 掘金 (juejin.cn))
// 这里图片自定义上传，借助elementUI的 el-upload 组件实现具体功能
<el-upload
class="avatarUploader"
:action="EXPORT_API" //在实际项目中是需要将图片上传到服务器然后服务器生成一个访问地址在后端数据库进行存储，这里是图片上传服务器的地址
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon editor-img-plus" style="display: none"></i>
</el-upload>
<quill-editor
class="editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
3.逻辑部分
<script>
import Quill from 'quill'
import { quillEditor } from "vue-quill-editor"; //引入插件
import { EXPORT_API } from "@/api/activity"; // 此处引入我的上传图片的路径，
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"; // css部分一定要有，否则会出现乱码
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
components: {
quillEditor,
},
props: ["backfill"],
data() {
return {
EXPORT_API, // 此处代表图片上传的网络地址
content: null,
editorOption: {
placeholder: "请输入文本...",
theme: 'snow', //主题 snow：有工具栏的；bubble：只有文本域的
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
modules: {
imageDrop: true, //图片拖拽
imageResize: { //放大缩小
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]
},
toolbar: {
// 配置工具栏，此次引入了全部工具栏，也可自行配置
container: [
["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] }],
[{ font: [] }],
[{ color: [] }, { background: [] }],
[{ align: [] }],
["link", "image", "video"],
],
// 2.第二步：自定义图片按钮事件
handlers: {
// 自定义图片上传
image: function (value) {
if (value) {
// 点击图片按触发elmentui上传的input选择图片事件.quill-avatar-uploader是上传文件组件的那个类名
document.querySelector(".avatarUploader input").click();
} else {
this.quill.format("image", false);
}
},
},
},
},
},
imageUrl: "",
};
},
mounted() { },
methods: {
backfillTests(val) {
this.content = val
},
onEditorBlur(e) { },
onEditorFocus(e) { },
onEditorChange(e) { },
handleAvatarSuccess(res, file) {
// 图片上传成功后的回调
console.log("res, file", res, file);
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功，res.url为服务器返回的图片地址
if (res !== null) {
// 获取光标所在位置
let length = quill.getSelection().index;
console.log(length);
// 插入图片
quill.insertEmbed(length, "image", res);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
},
beforeAvatarUpload(data) { },
},
};
</script>
到此需求基本实现
