refactor: 使用Editor组件替换WxEditor

Author: dhb52

src/components/Editor/src/Editor.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   editorId: propTypes.string.def('wangeEditor-1'),
   height: propTypes.oneOfType([Number, String]).def('500px'),
   editorConfig: {
-    type: Object as PropType<IEditorConfig>,
+    type: Object as PropType<Partial<IEditorConfig>>,
     default: () => undefined
   },
   readonly: propTypes.bool.def(false),
@@ -147,6 +147,7 @@ const editorConfig = computed((): IEditorConfig => {
     props.editorConfig || {}
   )
 })
+
 const editorStyle = computed(() => {
   return {
     height: isNumber(props.height) ? `${props.height}px` : props.height

src/views/mp/components/wx-editor/WxEditor.vue

@@ -0,0 +1,72 @@
+import { IEditorConfig } from '@wangeditor/editor'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+const message = useMessage()
+
+type InsertFnType = (url: string, alt: string, href: string) => void
+
+export const createEditorConfig = (
+  server: string,
+  accountId: number | undefined
+): Partial<IEditorConfig> => {
+  return {
+    MENU_CONF: {
+      ['uploadImage']: {
+        server,
+        // 单个文件的最大体积限制，默认为 2M
+        maxFileSize: 5 * 1024 * 1024,
+        // 最多可上传几个文件，默认为 100
+        maxNumberOfFiles: 10,
+        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+        allowedFileTypes: ['image/*'],
+
+        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+        meta: { accountId: accountId },
+        // 将 meta 拼接到 url 参数中，默认 false
+        metaWithUrl: true,
+
+        // 自定义增加 http  header
+        headers: {
+          Accept: '*',
+          Authorization: 'Bearer ' + getAccessToken(),
+          'tenant-id': getTenantId()
+        },
+
+        // 跨域是否传递 cookie ，默认为 false
+        withCredentials: true,
+
+        // 超时时间，默认为 10 秒
+        timeout: 5 * 1000, // 5 秒
+
+        // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
+        fieldName: 'file',
+
+        // 上传之前触发
+        onBeforeUpload(file: File) {
+          console.log(file)
+          return file
+        },
+        // 上传进度的回调函数
+        onProgress(progress: number) {
+          // progress 是 0-100 的数字
+          console.log('progress', progress)
+        },
+        onSuccess(file: File, res: any) {
+          console.log('onSuccess', file, res)
+        },
+        onFailed(file: File, res: any) {
+          message.alertError(res.message)
+          console.log('onFailed', file, res)
+        },
+        onError(file: File, err: any, res: any) {
+          message.alertError(err.message)
+          console.error('onError', file, err, res)
+        },
+        // 自定义插入图片
+        customInsert(res: any, insertFn: InsertFnType) {
+          insertFn(res.data, 'image', res.data)
+        }
+      }
+    }
+  }
+}