@keyblade/tinymce-editor-vue2 0.0.12-alpha.4 → 0.0.12-alpha.6

package/README.md

@@ -1,9 +1,17 @@
 # tinymce 富文本编辑器
-封装 tinymce 编辑器，该库不包含任何组件库, 对于图片上传、视频上传等功能，可使用自定义插件实现。
+tinymce编辑器
+
+## 零、前提
+必须将vue 版本升级至2.7+
+
+- 升级指南：https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html
+
+一般来说只需要升级 vue、及 @vue/cli-xxx 版本即可
 
 ## 一、安装
 ```shell
 yarn add @keyblade/tinymce-editor-vue2
+# 下面两个第三方依赖注意版本，必须匹配，否则css样式有问题
 yarn add pic-viewer@0.5.1 (如项目中有，怎不需要再次安装)
 yarn add imgpond@0.6.2 (如项目中有，怎不需要再次安装)
 ```
@@ -25,14 +33,42 @@ Vue.use(PicViewer, {})
 Vue.use(ImgPond, {})
 
 Vue.use(TinymceEditor, {
-  // 配置图片上传
-  imageUploadHandle: (file, filename, { extParameters }) => {
+  imageUploadHandle: (file, filename) => {
+    // const form = new FormData()
+    // form.append('file', file, filename)
+    // postRequest('/api/man/uploadFile/uploadSingleFile', form).then((res) => {
+    //   debugger
+    // })
     return new Promise((resolve) => {
-      resolve({
-        success: true,
-        url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
-      })
+      setTimeout(() => {
+        resolve({
+          success: true,
+          url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
+        })
+      }, 1000)
     })
+  },
+  // 音频
+  audioUploadOptions: {
+    action: 'https://qt.gcongo.com.cn/msg/file/upload',
+    headers: {
+      Appkey: 'dsy_2AeyG8N0CqEC',
+      Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJOelF4WW1jeU5qUmtabU5tTlRWaU9UUTZaREV6WkdOa1l6TXpZemt5WmpSbE16RXhNVEkyTVRJek9VeGJSRUpSTWpBPTlZNjNYN1dVRzNPQiIsImlzcyI6ImRlMjdkNDAzNzNiZjY3NGJkYTUyN2E5Yzg4NjliZTI1Iiwic3ViIjoiQVBQIiwiYXVkIjoiZHN5X1FPTXF2R0haU1MyZCIsImlhdCI6MTcxNjE5NDc4MSwiZXhwIjoxNzE2Nzk5NTgxfQ.krM-HWCvR-PLa6dcup6RGthxpST1pFrHN9cngyK89lU'
+    },
+    handlerResponse: (response) => {
+      return { url: response.data, errorMessage: response.msg }
+    }
+  },
+  // 视频
+  videoUploadOptions: {
+    action: 'https://qt.gcongo.com.cn/msg/file/upload',
+    headers: {
+      Appkey: 'dsy_2AeyG8N0CqEC',
+      Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJOelF4WW1jeU5qUmtabU5tTlRWaU9UUTZaREV6WkdOa1l6TXpZemt5WmpSbE16RXhNVEkyTVRJek9VeGJSRUpSTWpBPTlZNjNYN1dVRzNPQiIsImlzcyI6ImRlMjdkNDAzNzNiZjY3NGJkYTUyN2E5Yzg4NjliZTI1Iiwic3ViIjoiQVBQIiwiYXVkIjoiZHN5X1FPTXF2R0haU1MyZCIsImlhdCI6MTcxNjE5NDc4MSwiZXhwIjoxNzE2Nzk5NTgxfQ.krM-HWCvR-PLa6dcup6RGthxpST1pFrHN9cngyK89lU'
+    },
+    handlerResponse: (response) => {
+      return { url: response.data, errorMessage: response.msg }
+    }
   }
 })
 ```
@@ -40,14 +76,13 @@ Vue.use(TinymceEditor, {
 ### 2.使用组件
 ```text
 <template>
-  <TinymceEditor
+  <KbTinymceEditor
     v-model="text"
   />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import TinymceEditor from '@keyblade/tinymce-editor-vue2'
 
 const text = ref<string>('')
 
@@ -57,21 +92,18 @@ onMounted(() => {
 </script>
 ```
 
+### 3.使用工具类（单独使用图片上传组件的，可使用这两个工具类自行处理）
+```typescript
+import { oneTravelImageCheck, oneTravelImageCompressor } from '@keyblade/tinymce-editor-vue2'
+
+// oneTravelImageCheck: 一码游图片检测工具
+// oneTravelImageCompressor: 一码游图片压缩工具
+```
+
 ## 三、Api
 ### 1.全局属性
 ```typescript
 interface TinymceEditorGlobalOptions {
-  // 消息方法实例
-  message?: {
-    // 加载中
-    loading?: (message?: string) => { close: () => void }
-    // 成功
-    success?: (message?: string) => void
-    // 错误提示
-    error?: (message?: string) => void
-    // 销毁
-    destroy?: () => void
-  }
   /** 图片上传请求处理，需要返回图片地址 */
   imageUploadHandle?: (file: File | Blob, filename: string, options?: {
     extParameters?: Record<string, any>
@@ -86,8 +118,23 @@ interface TinymceEditorGlobalOptions {
     node: HTMLElement;
     readonly internal: boolean;
   }) => void;
-  /** tinyMCE编辑器配置 */
-  tinymceOptions?: RawEditorOptions
+  tinymceOptions?: RawEditorOptions;
+  /** imgPond 选项 */
+  imgPondOptions?: Record<string, any>
+  /** 音频上传选项 */
+  audioUploadOptions?: {
+    action: string;
+    handlerResponse: (response: any) => { url?: string; errorMessage?: string }
+    headers?: Record<string, any>;
+    data?: Record<string, any>;
+  },
+  /** 视频上传选项 */
+  videoUploadOptions?: {
+    action: string;
+    handlerResponse: (response: any) => { url?: string; errorMessage?: string }
+    headers?: Record<string, any>;
+    data?: Record<string, any>;
+  }
 }
 ```
 
@@ -97,9 +144,15 @@ interface ComponentProps {
   /** vue2 v-model */
   value?: string
   /** vue3 v-model */
-  modelValue?: string
+  modelValue?: string;
   /** 是否禁止编辑 */
   disabled?: boolean;
+  /** 额外参数 */
+  extParameters?: Record<string, any>,
+  /** 图片上传组件最大数量 */
+  imageUploadMaxCount?: number;
+  /** 图片上传提示 */
+  imageUploadTip?: string;
   /** 图片最大值(单位M，主要用于错误提示) */
   imageMaxSize?: number;
   /** 图片允许的类型 */
@@ -114,8 +167,36 @@ interface ComponentProps {
   imageMaxWidth?: number;
   /** 图片最大高度 */
   imageMaxHeight?: number;
+  /** 是否开启音频 */
+  audioEnable?: boolean
+  /** 音频最大尺寸(M) */
+  audioMaxSize?: number;
+  /** 音频结尾格式 */
+  audioAllowedType?: string[];
+  /** 音频上传选项 */
+  audioUploadOptions?: {
+    action: string;
+    handlerResponse: (response: any) => { url?: string; errorMessage?: string }
+    headers?: Record<string, any>;
+    data?: Record<string, any>;
+  },
+  /** 是否开启视频 */
+  videoEnable?: boolean
+  /** 视频最大尺寸(M) */
+  videoMaxSize?: number;
+  /** 视频结尾格式 */
+  videoAllowedType?: string[];
+  /** 视频上传选项 */
+  videoUploadOptions?: {
+    action: string;
+    handlerResponse: (response: any) => { url?: string; errorMessage?: string }
+    headers?: Record<string, any>;
+    data?: Record<string, any>;
+  }
   /** 图片上传请求处理，需要返回图片地址 */
-  imageUploadHandle?: (file: File | Blob, filename: string) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
+  imageUploadHandle?: (file: File | Blob, filename: string, options?: {
+    extParameters?: Record<string, any>
+  }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
   /** 接着默认配置进行处理 */
   paste_preprocess?: (editor: Editor, args: {
     content: string;
@@ -128,7 +209,10 @@ interface ComponentProps {
   }) => void;
   /** 初始化完成 */
   initComplete?: (params: { editorIns: Editor }) => void,
-  /** tinyMCE选项 */
+  /** 富文本编辑器选项 */
   options?: Partial<RawEditorOptions>
+  /** imgPond 选项 */
+  imgPondOptions?: Record<string, any>
 }
-```
+```
+

package/es/editor.vue.d.ts

@@ -27,6 +27,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMaxWidth?: number | undefined;
     /** 图片最大高度 */
     imageMaxHeight?: number | undefined;
+    /** 是否开启音频 */
+    audioEnable?: boolean | undefined;
     /** 音频最大尺寸(M) */
     audioMaxSize?: number | undefined;
     /** 音频结尾格式 */
@@ -41,6 +43,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
         headers?: Record<string, any> | undefined;
         data?: Record<string, any> | undefined;
     } | undefined;
+    /** 是否开启视频 */
+    videoEnable?: boolean | undefined;
     /** 视频最大尺寸(M) */
     videoMaxSize?: number | undefined;
     /** 视频结尾格式 */
@@ -93,6 +97,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMinHeight: number;
     imageMaxWidth: number;
     imageMaxHeight: number;
+    audioEnable: boolean;
+    videoEnable: boolean;
     audioMaxSize: number;
     videoMaxSize: number;
     audioAllowedType: () => string[];
@@ -128,6 +134,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMaxWidth?: number | undefined;
     /** 图片最大高度 */
     imageMaxHeight?: number | undefined;
+    /** 是否开启音频 */
+    audioEnable?: boolean | undefined;
     /** 音频最大尺寸(M) */
     audioMaxSize?: number | undefined;
     /** 音频结尾格式 */
@@ -142,6 +150,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
         headers?: Record<string, any> | undefined;
         data?: Record<string, any> | undefined;
     } | undefined;
+    /** 是否开启视频 */
+    videoEnable?: boolean | undefined;
     /** 视频最大尺寸(M) */
     videoMaxSize?: number | undefined;
     /** 视频结尾格式 */
@@ -194,6 +204,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMinHeight: number;
     imageMaxWidth: number;
     imageMaxHeight: number;
+    audioEnable: boolean;
+    videoEnable: boolean;
     audioMaxSize: number;
     videoMaxSize: number;
     audioAllowedType: () => string[];
@@ -211,8 +223,10 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageUploadMaxCount: number;
     imageUploadTip: string;
     imageAllowedType: string[];
+    audioEnable: boolean;
     audioMaxSize: number;
     audioAllowedType: string[];
+    videoEnable: boolean;
     videoMaxSize: number;
     videoAllowedType: string[];
     options: Partial<RawEditorOptions>;

package/es/editor.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as ne, ref as u, computed as y, onMounted as re, onUnmounted as se, watch as O } from "vue";
-import { oneTravelImageCheck as B, oneTravelImageCompressor as E, getImagePixel as me } from "./util.js";
+import { defineComponent as ne, ref as u, computed as y, onMounted as re, onUnmounted as se, watch as E } from "vue";
+import { oneTravelImageCheck as B, oneTravelImageCompressor as O, getImagePixel as me } from "./util.js";
 import de from "imgpond";
 import { conclude as M } from "vue-global-config";
 import I from "tinymce";
@@ -50,9 +50,11 @@ const Qe = /* @__PURE__ */ ne({
     imageMinHeight: { default: 60 },
     imageMaxWidth: { default: 6e3 },
     imageMaxHeight: { default: 6e3 },
+    audioEnable: { type: Boolean, default: !0 },
     audioMaxSize: { default: 200 },
     audioAllowedType: { default: () => ["MP3", "M4A", "WAV", "AAC"] },
     audioUploadOptions: null,
+    videoEnable: { type: Boolean, default: !0 },
     videoMaxSize: { default: 300 },
     videoAllowedType: { default: () => ["MP4", "3GP"] },
     videoUploadOptions: null,
@@ -145,7 +147,7 @@ const Qe = /* @__PURE__ */ ne({
         });
         return;
       }
-      const l = await E(t);
+      const l = await O(t);
       if (!l.success) {
         e(), setTimeout(() => {
           n.onError(l.errorMessage);
@@ -304,7 +306,7 @@ const Qe = /* @__PURE__ */ ne({
               if ((H = p.error) != null && H.pixel)
                 return i({ message: `请上传像素不低于${a.imageMinWidth}*${a.imageMinHeight}且像素不高于${a.imageMaxWidth}*${a.imageMaxHeight}的图片`, remove: !0 });
             }
-            const g = await E(s);
+            const g = await O(s);
             if (!g.success)
               return l == null || l.close(), i({ message: g == null ? void 0 : g.errorMessage, remove: !0 });
             if (!c.value)
@@ -326,7 +328,7 @@ const Qe = /* @__PURE__ */ ne({
                 e && (e.innerHTML = a.imageUploadTip || "上传");
               });
             }
-          }), o.ui.registry.addMenuItem("localAudio", {
+          }), a.audioEnable && o.ui.registry.addMenuItem("localAudio", {
             text: "音频",
             icon: "arrow-right",
             onAction: () => {
@@ -336,7 +338,7 @@ const Qe = /* @__PURE__ */ ne({
                 e && (e.innerHTML = a.imageUploadTip || "上传");
               });
             }
-          }), o.ui.registry.addMenuItem("localVideo", {
+          }), a.videoEnable && o.ui.registry.addMenuItem("localVideo", {
             text: "视频",
             icon: "embed",
             onAction: () => {
@@ -410,10 +412,10 @@ const Qe = /* @__PURE__ */ ne({
     return se(() => {
       var t;
       (t = m.value) == null || t.destroy();
-    }), O(() => [a.disabled, m.value], () => {
+    }), E(() => [a.disabled, m.value], () => {
       var t, n;
       (n = (t = m.value) == null ? void 0 : t.mode) == null || n.set(a.disabled ? "readonly" : "design");
-    }, { immediate: !0 }), O(
+    }, { immediate: !0 }), E(
       () => [a.value, a.modelValue, m.value],
       () => {
         var t;

package/es/index.d.ts

@@ -95,6 +95,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    audioEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     audioMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -114,6 +118,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             data?: Record<string, any> | undefined;
         }>;
     };
+    videoEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     videoMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -217,6 +225,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    audioEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     audioMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -236,6 +248,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             data?: Record<string, any> | undefined;
         }>;
     };
+    videoEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     videoMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -303,8 +319,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
     imageUploadMaxCount: number;
     imageUploadTip: string;
     imageAllowedType: string[];
+    audioEnable: boolean;
     audioMaxSize: number;
     audioAllowedType: string[];
+    videoEnable: boolean;
     videoMaxSize: number;
     videoAllowedType: string[];
     options: Partial<RawEditorOptions>;
@@ -359,6 +377,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    audioEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     audioMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -378,6 +400,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             data?: Record<string, any> | undefined;
         }>;
     };
+    videoEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     videoMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -481,6 +507,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    audioEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     audioMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -500,6 +530,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             data?: Record<string, any> | undefined;
         }>;
     };
+    videoEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     videoMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -603,6 +637,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    audioEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     audioMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -622,6 +660,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             data?: Record<string, any> | undefined;
         }>;
     };
+    videoEnable: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
     videoMaxSize: {
         type: import('vue').PropType<number>;
         default: number;
@@ -689,8 +731,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
     imageUploadMaxCount: number;
     imageUploadTip: string;
     imageAllowedType: string[];
+    audioEnable: boolean;
     audioMaxSize: number;
     audioAllowedType: string[];
+    videoEnable: boolean;
     videoMaxSize: number;
     videoAllowedType: string[];
     options: Partial<RawEditorOptions>;
@@ -746,6 +790,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             type: import('vue').PropType<string[]>;
             default: () => string[];
         };
+        audioEnable: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         audioMaxSize: {
             type: import('vue').PropType<number>;
             default: number;
@@ -765,6 +813,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
                 data?: Record<string, any> | undefined;
             }>;
         };
+        videoEnable: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         videoMaxSize: {
             type: import('vue').PropType<number>;
             default: number;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/tinymce-editor-vue2",
   "description": "KeyBlade Tinymce Editor Vue2",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "0.0.12-alpha.04",
+  "version": "0.0.12-alpha.06",
   "private": false,
   "type": "module",
   "main": "es/index.js",