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 @@
-
+
+
+
+
+ 将文件拖到此处,或点击上传
+ 只能上传MP4文件,且不超过10M
+
+
+
@@ -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);
+ },
},
};