From 7f69847a102b46b5a7aed43a009ba0204ca8478d Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sat, 9 Sep 2023 14:40:10 +0800
Subject: [PATCH] feat: quill plugin ImageCompress

---
 package.json                           |  2 +-
 pnpm-lock.yaml                         | 12 +++---
 src/components/quill-editor/modules.ts | 55 ++++++++++++++++++--------
 3 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 9de72812..aa6548e4 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
     "quill-blot-formatter": "^1.0.5",
-    "quill-image-uploader": "^1.3.0",
+    "quill-image-compress": "^1.2.30",
     "quill-magic-url": "^4.2.0",
     "quill-mention": "^3.4.1",
     "vue": "^3.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e6e916f..9c3c32e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,9 +26,9 @@ dependencies:
   quill-blot-formatter:
     specifier: ^1.0.5
     version: 1.0.5(quill@1.3.7)
-  quill-image-uploader:
-    specifier: ^1.3.0
-    version: 1.3.0(quill@1.3.7)
+  quill-image-compress:
+    specifier: ^1.2.30
+    version: 1.2.30
   quill-magic-url:
     specifier: ^4.2.0
     version: 4.2.0
@@ -1668,10 +1668,8 @@ packages:
       lodash.isequal: 4.5.0
     dev: false
 
-  /quill-image-uploader@1.3.0(quill@1.3.7):
-    resolution: {integrity: sha512-vO43GEn93rGThje/MlotkQE9OV5nOKBZ4oKhn71L/EjrM/J2P/8iDDVd9GEwlsGsbskeJqPLopsSQ4HlVVIn6A==}
-    peerDependencies:
-      quill: ^1.3.7
+  /quill-image-compress@1.2.30:
+    resolution: {integrity: sha512-CSn8bF/A7uT4gaV7C9HfW/CCGF7oRWHx7+VabjdLKZ8jllzELN2IxHafABUKRkzqpv/bl2W0v0fgsiFk592/fw==}
     dependencies:
       quill: 1.3.7
     dev: false
diff --git a/src/components/quill-editor/modules.ts b/src/components/quill-editor/modules.ts
index ec506685..e564bd25 100644
--- a/src/components/quill-editor/modules.ts
+++ b/src/components/quill-editor/modules.ts
@@ -1,12 +1,18 @@
+/**
+ * 这个文件是 quill 的各种 module，太大的 module 比如 markdown 和 emoji 就不用了
+ */
+
+// 引入编辑器
+import { QuillEditor } from '@vueup/vue-quill'
 // 引入 quill module: for resizing and realigning images and iframe video
 import BlotFormatter from 'quill-blot-formatter'
-// 引入 module: 上传图片
-import ImageUploader from 'quill-image-uploader'
 // 引入 module: URL、邮箱 自动识别
 import MagicUrl from 'quill-magic-url'
 // 引入 module: mention
 import Mention from 'quill-mention'
 import '@/styles/editor/editor.snow.scss'
+// 引入 module: 压缩图片、上传图片（太好用了 www）
+import ImageCompress from 'quill-image-compress'
 
 // 定义提及源数据的接口
 interface MentionItem {
@@ -29,20 +35,6 @@ export const modules = [
       },
     },
   },
-  // ImageUploader
-  {
-    name: 'imageUploader',
-    module: ImageUploader,
-    options: {
-      upload: (file: File) => {
-        return new Promise((resolve, reject) => {
-          const formData = new FormData()
-          formData.append('image', file)
-          // 在这里发送请求
-        })
-      },
-    },
-  },
   // MagicUrl
   {
     name: 'magicUrl',
@@ -90,6 +82,37 @@ export const modules = [
       },
     },
   },
+  // ImageCompress
+  {
+    name: 'imageCompress',
+    module: ImageCompress,
+    options: {
+      quality: 0.77,
+      maxWidth: 1007,
+      maxHeight: 1007,
+      imageType: 'image/webp',
+      insertIntoEditor: (
+        imageBase64URL: string,
+        imageBlob: Blob,
+        editor: typeof QuillEditor
+      ) => {
+        const formData = new FormData()
+        formData.append('file', imageBlob)
+
+        fetch('127.0.0.1:10008/upload', { method: 'POST', body: formData })
+          .then((response) => response.text())
+          .then((result) => {
+            const range = editor.getSelection()
+            editor.insertEmbed(range.index, 'image', `${result}`, 'user')
+          })
+          .catch((error) => {
+            console.error(error)
+          })
+      },
+      // 临时开启一下控制台调试
+      debug: true,
+    },
+  },
 ]
 
 // 模拟搜索用户的函数 TODO: