feat: 🚀 切换富文本编辑器

src/components/Editor/index.scss

@@ -0,0 +1,80 @@
+.editor,
+.ql-toolbar {
+    line-height: normal !important;
+    white-space: pre-wrap !important;
+}
+.editor-img-uploader {
+    display: none;
+}
+.ql-editor {
+    min-height: 600px;
+    max-height: 600px;
+    overflow: auto;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+    content: "请输入链接地址:";
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    padding-right: 0;
+    content: "保存";
+    border-right: 0;
+}
+.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: "等宽字体";
+}

src/components/Editor/index.vue

@@ -0,0 +1,242 @@
+<template>
+    <el-upload
+        :id="uuid"
+        action="#"
+        :multiple="false"
+        :show-file-list="false"
+        :http-request="handleHttpUpload"
+        :before-upload="handleBeforeUpload"
+        class="editor-img-uploader"
+        accept=".jpeg,.jpg,.png"
+    >
+        <i ref="uploadRef" class="Plus editor-img-uploader"></i>
+    </el-upload>
+
+    <!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
+    <input
+        type="file"
+        accept="video/*"
+        name="file"
+        ref="uploadFileVideo"
+        id="uploadFileVideo"
+        @change="handleVideoUpload"
+        style="width: 0; height: 0; cursor: pointer; opacity: 0"
+    />
+    <div class="editor">
+        <QuillEditor
+            id="editorId"
+            ref="myQuillEditor"
+            v-model:content="editorContent"
+            contentType="html"
+            @update:content="onContentChange"
+            :options="options"
+        />
+    </div>
+</template>
+
+<script setup name="Editor">
+import { QuillEditor, Quill } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
+import { generateUUID } from "@/utils";
+import { h } from "@/utils/url";
+import { routerObj } from "./utils.js";
+import { titleConfig } from "./titleConfig.js";
+import { uploadVideo, uploadImg } from "@/api/modules/upload";
+// 引入插入图片标签自定义的类
+import ImageBlot from "./quill-image";
+import Video from "./quill-video";
+const uuid = ref("id-" + generateUUID());
+const $router = useRouter();
+const routerValueName = $router.currentRoute.value.name;
+
+const routerName = ref(routerObj[routerValueName]);
+
+Quill.register(Video);
+Quill.register(ImageBlot);
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
+const uploadFileVideo = ref(null);
+const props = defineProps({
+    /* 编辑器的内容 */
+    content: {
+        type: String,
+        default: ""
+    },
+    /* 只读 */
+    readOnly: {
+        type: Boolean,
+        default: false
+    },
+    // 上传文件大小限制(MB)
+    fileSizeLimit: {
+        type: Number,
+        default: 10
+    }
+});
+//值
+const editorContent = computed({
+    get: () => props.content,
+    set: val => {
+        emit("update:content", val);
+    }
+});
+//富文本ref
+const myQuillEditor = ref(null);
+//富文本值
+const oldContent = ref("");
+//富文本配置项
+const options = reactive({
+    theme: "snow",
+    debug: "warn",
+    modules: {
+        // 工具栏配置
+        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: {
+                // 重写图片上传事件
+                image: function (value) {
+                    if (value) {
+                        //调用图片上传
+                        proxy.$refs.uploadRef.click();
+                    } else {
+                        Quill.format("image", true);
+                    }
+                },
+                video: function (value) {
+                    if (value) {
+                        // 劫持原来的视频点击按钮事件
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else {
+                        Quill.format("video", true);
+                    }
+                }
+            }
+        }
+    },
+    placeholder: "请输入内容...",
+    readOnly: props.readOnly,
+    clipboard: {
+        matchers: [
+            [
+                "img",
+                (node, delta) => {
+                    const src = node.getAttribute("src");
+                    const id = node.getAttribute("id");
+                    delta.insert({ image: { src, id: id } });
+                }
+            ]
+        ]
+    }
+});
+//上传前的钩子
+const handleBeforeUpload = file => {
+    const fileType = file.type;
+
+    // 图片
+    if (
+        fileType == "image/jpeg" ||
+        fileType == "image/png" ||
+        fileType == "image/gif" ||
+        fileType == "image/jpg" ||
+        fileType == "image/bmp" ||
+        fileType == "image/webp" ||
+        fileType == "video/mov" ||
+        fileType == "video/ts" ||
+        fileType == "video/mp4" ||
+        fileType == "video/avi"
+    ) {
+        const fileSizeLimit = file.size;
+        // 校检文件大小
+        const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
+        if (!isLt) {
+            console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
+            alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
+            return false;
+        } else {
+            console.log(`RIch MB!`);
+            return true;
+        }
+    } else {
+        alert(`文件格式不正确！`);
+        return false;
+    }
+};
+//图片上传
+const handleHttpUpload = async options => {
+    let formData = new FormData();
+    //这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
+    formData.append("image", options.file);
+    try {
+        const result = await uploadImg(formData, routerName.value);
+        if (result?.code === 0) {
+            const { data } = result;
+            let rawMyQuillEditor = toRaw(myQuillEditor.value);
+            // 获取富文本实例
+            let quill = rawMyQuillEditor.getQuill();
+            // 获取光标位置
+            let length = quill.selection.savedRange.index;
+            quill.insertEmbed(length, "image", {
+                url: h + data.path,
+                id: generateUUID()
+            });
+            quill.setSelection(length + 1);
+        }
+    } catch (error) {}
+};
+
+//视频上传
+const handleVideoUpload = async evt => {
+    if (evt.target.files.length === 0) {
+        return;
+    }
+    const formData = new FormData();
+    formData.append("video", evt.target.files[0]);
+    try {
+        let quill = toRaw(myQuillEditor.value).getQuill();
+        // 获取光标位置
+        let length = quill.selection.savedRange.index;
+        const { data } = await uploadVideo(formData);
+        quill.insertEmbed(length, "video", {
+            url: h + data.path, //h + data.fileUrl, //
+            id: generateUUID()
+        });
+        uploadFileVideo.value.value = "";
+    } catch (error) {
+        console.log(error);
+    }
+};
+
+// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
+const onContentChange = content => {
+    emit("handleRichTextContentChange", content);
+};
+// 增加hover工具栏有中文提示
+const initTitle = () => {
+    document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
+    for (let item of titleConfig.value) {
+        let tip = document.querySelector(".ql-toolbar " + item.Choice);
+        if (!tip) continue;
+        tip.setAttribute("title", item.title);
+    }
+};
+onMounted(() => {
+    initTitle();
+    oldContent.value = props.content;
+});
+</script>
+<style lang="scss">
+@import "./index.scss";
+</style>

src/components/Editor/quill-image.js

@@ -0,0 +1,20 @@
+import { Quill } from "@vueup/vue-quill";
+let BlockEmbed = Quill.import("blots/block/embed");
+class ImageBlot extends BlockEmbed {
+    static create(value) {
+        let node = super.create();
+        node.setAttribute("src", value.url);
+        node.setAttribute("id", value.id);
+        return node;
+    }
+
+    static value(node) {
+        return {
+            url: node.getAttribute("src"),
+            id: node.getAttribute("id")
+        };
+    }
+}
+ImageBlot.blotName = "image";
+ImageBlot.tagName = "img";
+export default ImageBlot;

src/components/Editor/quill-video.js

@@ -0,0 +1,64 @@
+import { Quill } from "@vueup/vue-quill";
+// 源码中是import直接倒入，这里要用Quill.import引入
+const BlockEmbed = Quill.import("blots/block/embed");
+const Link = Quill.import("formats/link");
+
+const ATTRIBUTES = ["height", "width"];
+
+class Video extends BlockEmbed {
+    static create(value) {
+        let node = super.create();
+        // 添加video标签所需的属性
+        node.setAttribute("controls", "controls");
+        node.setAttribute("playsinline", "true");
+        node.setAttribute("webkit-playsinline", "true");
+        node.setAttribute("type", "video/mp4");
+        // poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
+        node.setAttribute("poster", value.poster);
+        node.setAttribute("src", this.sanitize(value.url));
+        return node;
+    }
+
+    static formats(domNode) {
+        return ATTRIBUTES.reduce((formats, attribute) => {
+            if (domNode.hasAttribute(attribute)) {
+                formats[attribute] = domNode.getAttribute(attribute);
+            }
+            return formats;
+        }, {});
+    }
+
+    static sanitize(url) {
+        return Link.sanitize(url);
+    }
+
+    static value(domNode) {
+        // 设置自定义的属性值
+        return {
+            url: domNode.getAttribute("src"),
+            poster: domNode.getAttribute("poster")
+        };
+    }
+
+    format(name, value) {
+        if (ATTRIBUTES.indexOf(name) > -1) {
+            if (value) {
+                this.domNode.setAttribute(name, value);
+            } else {
+                this.domNode.removeAttribute(name);
+            }
+        } else {
+            super.format(name, value);
+        }
+    }
+
+    html() {
+        const { video } = this.value();
+        return `<a href="${video}">${video}</a>`;
+    }
+}
+Video.blotName = "video"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
+Video.className = "ql-video"; // 可添加样式，看实际使用需要
+Video.tagName = "video"; // 用video标签替换iframe
+
+export default Video;

src/components/Editor/titleConfig.js

@@ -0,0 +1,47 @@
+// toolbar标题（此项是用来增加hover标题）
+export const titleConfig = ref([
+    { Choice: ".ql-insertMetric", title: "跳转配置" },
+    { Choice: ".ql-bold", title: "加粗" },
+    { Choice: ".ql-italic", title: "斜体" },
+    { Choice: ".ql-underline", title: "下划线" },
+    { Choice: ".ql-header", title: "段落格式" },
+    { Choice: ".ql-strike", title: "删除线" },
+    { Choice: ".ql-blockquote", title: "块引用" },
+    { Choice: ".ql-code", title: "插入代码" },
+    { Choice: ".ql-code-block", title: "插入代码段" },
+    { Choice: ".ql-font", title: "字体" },
+    { Choice: ".ql-size", title: "字体大小" },
+    { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
+    { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
+    { Choice: ".ql-direction", title: "文本方向" },
+    { Choice: '.ql-header[value="1"]', title: "h1" },
+    { Choice: '.ql-header[value="2"]', title: "h2" },
+    { Choice: ".ql-align", title: "对齐方式" },
+    { Choice: ".ql-color", title: "字体颜色" },
+    { Choice: ".ql-background", title: "背景颜色" },
+    { Choice: ".ql-image", title: "图像" },
+    { Choice: ".ql-video", title: "视频" },
+    { Choice: ".ql-link", title: "添加链接" },
+    { Choice: ".ql-formula", title: "插入公式" },
+    { Choice: ".ql-clean", title: "清除字体格式" },
+    { Choice: '.ql-script[value="sub"]', title: "下标" },
+    { Choice: '.ql-script[value="super"]', title: "上标" },
+    { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
+    { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
+    { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
+    { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
+    { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
+    { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
+    { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
+    { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
+    { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
+    { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
+    { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
+    { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
+    { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
+    { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
+    { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
+    { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: "居中对齐" },
+    { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: "居右对齐" },
+    { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: "两端对齐" }
+]);

src/components/Editor/utils.js

@@ -0,0 +1,8 @@
+export const routerObj = {
+    articleEditIndex: "article",
+    productEditIndex: "product",
+    bannerListIndex: "banner",
+    downloadListIndex: "download",
+    videoListIndex: "video",
+    QAListIndex: "QA"
+};