feat: quill plugin ImageCompress

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",

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

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: