docs: add image-upload-to-server demo

opentiny · Sep 9, 2024 · c15310c · c15310c
1 parent d583675
commit c15310c
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 4 deletions.
diff --git a/packages/docs/fluent-editor/demos/image-upload-to-server.vue b/packages/docs/fluent-editor/demos/image-upload-to-server.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['image'],
+]
+
+// 这里需要换成你自己的图片上传服务地址
+const IMG_API_URL = 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be'
+
+/**
+ * 上传图片到服务器
+ * @param image File 格式的图片
+ * @param callback 回调函数，用来处理服务器返回的图片 URL
+ * 除了 XMLHttpRequest，也可以使用 fetch / axios 等工具实现图片上传。
+ */
+function imageHandler(image, callback) {
+  const data = new FormData()
+  data.append('image', image)
+  const xhr = new XMLHttpRequest()
+  xhr.open('POST', IMG_API_URL, true)
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      // 这里需要换成实际的接口返回值，比如：JSON.parse(xhr.responseText)
+      const response = {
+        status: 200,
+        success: 'Upload success!',
+        data: {
+          link: 'https://res.hc-cdn.com/tiny-vue-web-doc/3.18.9.20240902190525/static/images/mountain.png',
+        },
+      }
+      if (response.status === 200 && response.success) {
+        callback(response.data.link)
+      }
+      else {
+        // 图片上传失败了，就转成 Base64 格式
+        var reader = new FileReader()
+        reader.onload = function (e) {
+          callback(e.target.result)
+        }
+        reader.readAsDataURL(image)
+      }
+    }
+  }
+  xhr.send(data)
+}
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor-image-upload-to-server', {
+      theme: 'snow',
+      modules: {
+        toolbar: TOOLBAR_CONFIG,
+      },
+      uploadOption: {
+        imageUpload: ({ file, callback }) => {
+          imageHandler(file, (imageUrl) => {
+            // 调用 callback，传入 imageUrl 即可实现图片渲染
+            callback({
+              code: 0,
+              message: 'Upload success!',
+              data: {
+                imageUrl,
+              },
+            })
+          })
+        },
+      },
+    })
+  })
+})
+
+</script>
+
+<template>
+  <div id="editor-image-upload-to-server" />
+</template>
diff --git a/packages/docs/fluent-editor/docs/image-upload.md b/packages/docs/fluent-editor/docs/image-upload.md
@@ -4,3 +4,8 @@
 
 :::demo src=demos/image-upload.vue
 :::
+
+## 上传到服务器
+
+:::demo src=demos/image-upload-to-server.vue
+:::
diff --git a/packages/fluent-editor/src/custom-clipboard.ts b/packages/fluent-editor/src/custom-clipboard.ts
@@ -117,7 +117,7 @@ class CustomClipboard extends Clipboard {
     const files = Array.from(e.clipboardData.files || [])
     const msExcelCheck = /<meta.*?Microsoft Excel\s[\d].*?>/
 
-    if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption?.imageUploadToServer && files.length > 0) {
+    if (html.search(msExcelCheck) === -1 && files.length > 0) {
       this.quill.uploader.upload(range, files)
     }
     else {

diff --git a/packages/fluent-editor/src/custom-uploader.ts b/packages/fluent-editor/src/custom-uploader.ts
@@ -113,10 +113,31 @@ class CustomUploader extends Uploader {
     }
   }
 
+  // 将图片插入编辑器
+  insertImageToEditor(range, { code, message, data }) {
+    if (code === 0) {
+      const { imageId, imageUrl } = data
+      // 粘贴截图或者从外源直接拷贝的单图时，需要将编辑器中已选中的内容删除
+      const oldContent = new Delta().retain(range.index).delete(range.length)
+      const currentContent = new Delta([
+        {
+          insert: { image: imageUrl },
+          attributes: { 'image-id': imageId },
+        },
+      ])
+      const newContent = oldContent.concat(currentContent)
+      this.quill.updateContents(newContent, Quill.sources.USER)
+      this.quill.setSelection(range.index + 1)
+    }
+    else {
+      console.error('error message:', message)
+    }
+  }
+
   // 处理上传图片
   handleUploadImage(range, { file, files }, hasRejectedImage) {
-    if (this.imageUploadToServer) {
-      const imageEnableMultiUpload = this.enableMultiUpload === true || this.enableMultiUpload['image']
+    if (this.quill.options.uploadOption?.imageUpload) {
+      const imageEnableMultiUpload = this.enableMultiUpload === true || this.enableMultiUpload?.['image']
 
       const result = {
         file,
@@ -137,7 +158,7 @@ class CustomUploader extends Uploader {
       if (imageEnableMultiUpload) {
         result['data'] = { files }
       }
-      this.imageUpload.emit(result)
+      this.quill.options.uploadOption?.imageUpload(result)
     }
     else {
       const promises = files.map((fileItem) => {