diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue index 6bb5a18..fee10ea 100644 --- a/src/components/Editor/index.vue +++ b/src/components/Editor/index.vue @@ -1,19 +1,22 @@ @@ -23,7 +26,8 @@ import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; import { getToken } from "@/utils/auth"; - +import Video from "@/utils/quillVideo"; +Quill.register(Video, true); export default { name: "Editor", props: { @@ -60,30 +64,45 @@ export default { }, data() { return { + videotype: { + type: 'commonVideoUrl' + }, uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 + videouploadUrl: process.env.VUE_APP_BASE_API + "/manage/file/uploadFile", // 上传地址 headers: { Authorization: "Bearer " + getToken() }, Quill: null, + getindex: 0, currentValue: "", + dialogFormVisible: false, options: { theme: "snow", bounds: document.body, debug: "warn", modules: { // 工具栏配置 - toolbar: [ - ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 - ["blockquote", "code-block"], // 引用 代码块 - [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 - [{ indent: "-1" }, { indent: "+1" }], // 缩进 - [{ size: ["small", false, "large", "huge"] }], // 字体大小 - [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 - [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 - [{ align: [] }], // 对齐方式 - ["clean"], // 清除文本格式 - ["link", "image", "video"] // 链接、图片、视频 - ], + toolbar: { + container: [ + ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 + ["blockquote", "code-block"], // 引用 代码块 + [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 + [{ indent: "-1" }, { indent: "+1" }], // 缩进 + [{ size: ["small", false, "large", "huge"] }], // 字体大小 + [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 + [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 + [{ align: [] }], // 对齐方式 + ["clean"], // 清除文本格式 + ["link", "image", "video"] // 链接、图片、视频 + ], + handlers: { + // 点击上传视频阻止默认上传替换成自定义上传 + video: () => { + this.getindex = this.Quill.getSelection().index + this.dialogFormVisible = true; + }, + }, + }, }, placeholder: "请输入内容", readOnly: this.readOnly, @@ -186,21 +205,63 @@ export default { handleUploadError() { this.$message.error("图片插入失败"); }, + // el-文件上传组件 + onBeforeUploadVideo(file) { + let acceptArr = ["video/mp4"]; + const isVideo = acceptArr.includes(file.type); + const isLt1M = file.size / 1024 / 1024 < 30; + if (!isVideo) { + this.$message.error("只能上传mp4格式文件!"); + } + if (!isLt1M) { + this.$message.error(`上传文件大小不能超过 30MB!`); + } + return isLt1M && isVideo; + }, + // 文件上传成功时的钩子 + onSuccessVideo(res) { + if (res.code === 200) { + this.insertVideoLink(process.env.VUE_APP_BASE_API + res.imgUrl); + } else { + this.$message.error(res.msg); + } + }, + // 文件上传失败时的钩子 + onErrorVideo() { + this.$message.error("上传失败"); + }, + // 插入视频 + insertVideoLink(videoLink) { + if (!videoLink) return this.$message.error("视频地址不能为空!"); + this.dialogFormVisible = false; + // 获取富文本 + let range = this.getindex; + // 获取光标位置:当编辑器中没有输入文本时,这里获取到的 range 为 null + let index = range ? range : 0; + // 在光标所在位置 插入视频 + this.Quill.insertEmbed(index, "video", { url: videoLink, poster: 'https://7up.pics/images/2024/01/23/101sh.png' }); + // 调整光标到最后 + this.Quill.setSelection(index + 1); + }, }, };