富文本 附件上传

ruoyi-ui/src/components/Editor/index.vue

@@ -7,8 +7,8 @@
       :on-error="handleUploadError"
       name="file"
       :show-file-list="false"
+      :on-preview="handlePreview"
       :headers="headers"
-      style="display: none"
       ref="upload"
       v-if="this.type == 'url'"
     >
@@ -19,6 +19,8 @@
 
 <script>
 import Quill from "quill";
+import Link from "./link";
+Quill.register(Link, true);
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
@@ -72,7 +74,8 @@ export default {
         debug: "warn",
         modules: {
           // 工具栏配置
-          toolbar: [
+          toolbar: {
+            container:[
             ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
             ["blockquote", "code-block"],                    // 引用  代码块
             [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
@@ -82,9 +85,25 @@ export default {
             [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
             [{ align: [] }],                                 // 对齐方式
             ["clean"],                                       // 清除文本格式
-            ["link", "image", "video"]                       // 链接、图片、视频
+            ["link", "image", "video"],                       // 链接、图片、视频
-          ],
+            ["uploadfile"],                                   //自定义附件按钮
-        },
+            ],
+            handlers:{
+            uploadfile: function (value) {
+                //自定义上传附件功能
+                this.uploadType = "uploadfile";
+                this.accept = "application/*";
+                setTimeout(() => {
+                  if (value) {
+                    document.querySelector(".el-upload input").click();
+                  } else {
+                    this.quill.format("uploadfile", false);
+                  }
+                }, 100);
+              },
+            },
+          }
+          },
         placeholder: "请输入内容",
         readOnly: this.readOnly,
       },
@@ -122,9 +141,13 @@ export default {
     this.Quill = null;
   },
   methods: {
+   
     init() {
       const editor = this.$refs.editor;
       this.Quill = new Quill(editor, this.options);
+      this.$el.querySelector(
+        ".ql-uploadfile"
+      ).innerHTML = `<i class="el-icon-upload" style="font-size: 18px"/>`;
       // 如果设置了上传地址则自定义图片上传事件
       if (this.type == 'url') {
         let toolbar = this.Quill.getModule("toolbar");
@@ -138,6 +161,7 @@ export default {
       }
       this.Quill.pasteHTML(this.currentValue);
       this.Quill.on("text-change", (delta, oldDelta, source) => {
+
         const html = this.$refs.editor.children[0].innerHTML;
         const text = this.Quill.getText();
         const quill = this.Quill;
@@ -157,11 +181,15 @@ export default {
     },
     // 上传前校检格式和大小
     handleBeforeUpload(file) {
-      const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
+      console.log(file)
-      const isJPG = type.includes(file.type);
+      let arr = file.name.split('.')
+      let fileType = arr[arr.length-1]
+      const type = ['png','jpg','jpeg','svg','doc','docx','xls','xlsx'];
+      const isJPG = type.includes(fileType);
+      console.log(isJPG)
       // 检验文件格式
       if (!isJPG) {
-        this.$message.error(`图片格式错误!`);
+        this.$message.error(`格式错误!`);
         return false;
       }
       // 校检文件大小
@@ -175,19 +203,53 @@ export default {
       return true;
     },
     handleUploadSuccess(res, file) {
-      // 如果上传成功
+      let arr = file.name.split('.')
-      if (res.code == 200) {
+      let fileType = arr[arr.length-1]
-        // 获取富文本组件实例
+      if(['png','jpg','jpeg','svg'].includes(fileType)){
+          // 如果上传成功
+        if (res.code == 200) {
+          // 获取富文本组件实例
+          let quill = this.Quill;
+          // 获取光标所在位置
+          let length = quill.getSelection().index;
+          // 插入图片  res.url为服务器返回的图片地址
+          quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+          // 调整光标到最后
+          quill.setSelection(length + 1);
+        } else {
+          this.$message.error("图片插入失败");
+        }
+      }else{
+         // 获取富文本组件实例
         let quill = this.Quill;
-        // 获取光标所在位置
+        // 如果上传成功
-        let length = quill.getSelection().index;
+        if (res.code === 200) {
-        // 插入图片  res.url为服务器返回的图片地址
+          //光标后移长度，默认是1
-        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+          let shiftLength = 1;
-        // 调整光标到最后
+          // 插入链接
-        quill.setSelection(length + 1);
+          this.lastSelection = res.originalFilename.length;
-      } else {
+
-        this.$message.error("图片插入失败");
+          quill.insertEmbed(this.lastSelection, "link", {
+            href: res.url,
+            innerText: res.originalFilename,
+          });
+          // 调整光标到最后
+          quill.setSelection(this.lastSelection + shiftLength);
+          // this.$modal.closeLoading();
+        } else {
+          // this.$modal.closeLoading();
+          this.$modal.msgError("上传失败，请重试");
+        }
       }
+      
+      
+    },
+    handlePreview(file){
+		      var link = document.createElement("a"); //定义一个a标签
+		      link.download = file.name; //下载后的文件名称
+		      link.href = file.url; //需要生成一个 URL 来实现下载
+		      link.click(); //模拟在按钮上实现一次鼠标点击
+		      window.URL.revokeObjectURL(link.href);
     },
     handleUploadError() {
       this.$message.error("图片插入失败");

ruoyi-ui/src/components/Editor/link.js

@@ -0,0 +1,58 @@
+import Quill from "quill";
+const InlineEmbed = Quill.import("blots/inline");
+// import Inline from '../blots/inline';
+
+// 自定义超链接
+class Link extends InlineEmbed {
+  static blotName = "link";
+  static tagName = "A";
+  static SANITIZED_URL = "about:blank";
+  static PROTOCOL_WHITELIST = ["http", "https", "mailto", "tel", "sms"];
+
+  static create(value) {
+    let node = undefined;
+    if (value && !value.href) {
+      // 自身Link Blot
+      node = super.create(value);
+      node.setAttribute("href", this.sanitize(value));
+      node.setAttribute("rel", "noopener noreferrer");
+      node.setAttribute("target", "_blank");
+    } else {
+      // 自定义Link Blot
+      node = super.create(value.href);
+      node.setAttribute("href", value.href); // 左键点击即下载
+      node.setAttribute("download", value.innerText); // 左键点击即下载
+      node.innerText = value.innerText;
+      node.onclick = function(){
+        window.open(value.href)
+      }
+    }
+    return node;
+  }
+
+  static formats(domNode) {
+    return domNode.getAttribute("href");
+  }
+
+  static sanitize(url) {
+    return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
+  }
+
+  format(name, value) {
+    if (name !== this.statics.blotName || !value) {
+      super.format(name, value);
+    } else {
+      // @ts-expect-error
+      this.domNode.setAttribute("href", this.constructor.sanitize(value));
+    }
+  }
+}
+
+function sanitize(url, protocols) {
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  const protocol = anchor.href.slice(0, anchor.href.indexOf(":"));
+  return protocols.indexOf(protocol) > -1;
+}
+
+export default Link;