@keyblade/tinymce-editor-vue2 0.0.1 → 0.0.3

package/README.md

@@ -5,3 +5,130 @@
 yarn add @keyblade/tinymce-editor-vue2
 ```
 
+## 二、使用
+### 1.注入组件并设置全局属性
+```typescript
+import TinymceEditor from '@keyblade/tinymce-editor-vue2'
+Vue.use(TinymceEditor, {
+  message: {
+    // 注入 loading 方法
+    loading: () => {
+      const ins = Loading.service({ text: '加载中' })
+      return {
+        close: () => {
+          ins.close()
+        }
+      }
+    }
+  },
+  // 配置图片上传
+  imageUploadHandle: (file, filename) => {
+    return new Promise((resolve) => {
+      resolve({
+        success: true,
+        url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
+      })
+    })
+  }
+})
+```
+
+### 2.使用组件
+```text
+<template>
+  <TinymceEditor
+    ref="editorRef"
+    v-model="text"
+    :initComplete="initComplete"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import TinymceEditor from '@keyblade/tinymce-editor-vue2'
+
+const text = ref<string>('')
+const editorRef = ref()
+
+// 组件加载完成
+const initComplete = () => {
+  console.log(editorRef.value.insRef)
+  console.log(editorRef.value.editorRef)
+}
+
+onMounted(() => {
+  console.log('onMounted')
+})
+</script>
+```
+
+## 三、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) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
+  /** 接着默认配置进行处理 */
+  paste_preprocess?: (editor: Editor, args: {
+    content: string;
+    readonly internal: boolean;
+  }) => void;
+  /** 接着默认配置进行处理 */
+  paste_postprocess?: (editor: Editor, args: {
+    node: HTMLElement;
+    readonly internal: boolean;
+  }) => void;
+  tinymceOptions?: RawEditorOptions
+}
+```
+
+### 2.全局属性
+```typescript
+interface ComponentProps {
+  /** vue2 v-model */
+  value?: string
+  /** vue3 v-model */
+  modelValue?: string
+  /** 图片最大值(单位M，主要用于错误提示) */
+  imageMaxSize?: number;
+  /** 图片允许的类型 */
+  imageAllowedType?: string[];
+  /** 图片允许的类型 */
+  imageAllowedMineType?: string[];
+  /** 图片最小宽度 */
+  imageMinWidth?: number;
+  /** 图片最小高度 */
+  imageMinHeight?: number;
+  /** 图片最大宽度 */
+  imageMaxWidth?: number;
+  /** 图片最大高度 */
+  imageMaxHeight?: number;
+  /** 图片上传请求处理，需要返回图片地址 */
+  imageUploadHandle?: (file: File | Blob, filename: string) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
+  /** 接着默认配置进行处理 */
+  paste_preprocess?: (editor: Editor, args: {
+    content: string;
+    readonly internal: boolean;
+  }) => void;
+  /** 接着默认配置进行处理 */
+  paste_postprocess?: (editor: Editor, args: {
+    node: HTMLElement;
+    readonly internal: boolean;
+  }) => void;
+  /** 初始化完成 */
+  initComplete?: () => void,
+  /** 富文本编辑器选项 */
+  options?: Partial<RawEditorOptions>
+}
+```

package/es/editor.vue.d.ts

@@ -9,6 +9,8 @@ declare const _default: import('vue-demi').DefineComponent<__VLS_WithDefaults<__
     imageMaxSize?: number | undefined;
     /** 图片允许的类型 */
     imageAllowedType?: string[] | undefined;
+    /** 图片允许的类型 */
+    imageAllowedMineType?: string[] | undefined;
     /** 图片最小宽度 */
     imageMinWidth?: number | undefined;
     /** 图片最小高度 */
@@ -42,6 +44,7 @@ declare const _default: import('vue-demi').DefineComponent<__VLS_WithDefaults<__
     modelValue: string;
     imageMaxSize: number;
     imageAllowedType: () => string[];
+    imageAllowedMineType: () => string[];
     imageMinWidth: number;
     imageMinHeight: number;
     imageMaxWidth: number;
@@ -62,6 +65,8 @@ declare const _default: import('vue-demi').DefineComponent<__VLS_WithDefaults<__
     imageMaxSize?: number | undefined;
     /** 图片允许的类型 */
     imageAllowedType?: string[] | undefined;
+    /** 图片允许的类型 */
+    imageAllowedMineType?: string[] | undefined;
     /** 图片最小宽度 */
     imageMinWidth?: number | undefined;
     /** 图片最小高度 */
@@ -95,6 +100,7 @@ declare const _default: import('vue-demi').DefineComponent<__VLS_WithDefaults<__
     modelValue: string;
     imageMaxSize: number;
     imageAllowedType: () => string[];
+    imageAllowedMineType: () => string[];
     imageMinWidth: number;
     imageMinHeight: number;
     imageMaxWidth: number;
@@ -105,6 +111,7 @@ declare const _default: import('vue-demi').DefineComponent<__VLS_WithDefaults<__
     modelValue: string;
     imageMaxSize: number;
     imageAllowedType: string[];
+    imageAllowedMineType: string[];
     imageMinWidth: number;
     imageMinHeight: number;
     imageMaxWidth: number;

package/es/editor.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as O } from "vue";
-import { ref as w, computed as S, onMounted as N, onUnmounted as L, watch as q } from "vue-demi";
-import E from "compressorjs";
-import { conclude as x } from "vue-global-config";
-import G from "tinymce";
-import { addI18n as j } from "./langs/zh_CN.js";
+import { defineComponent as F } from "vue";
+import { ref as y, computed as W, onMounted as N, onUnmounted as j, watch as L } from "vue-demi";
+import q from "compressorjs";
+import { conclude as _ } from "vue-global-config";
+import E from "tinymce";
+import { addI18n as G } from "./langs/zh_CN.js";
 import "tinymce/skins/ui/oxide/skin";
 import "tinymce/models/dom";
 import "tinymce/themes/silver";
@@ -32,14 +32,15 @@ import "tinymce/plugins/table";
 import "tinymce/plugins/visualblocks";
 import "tinymce/plugins/visualchars";
 import "tinymce/plugins/wordcount";
-import { globalProps as m } from "./index.js";
-const He = /* @__PURE__ */ O({
+import { globalProps as d } from "./index.js";
+const ze = /* @__PURE__ */ F({
   __name: "editor",
   props: {
     value: { default: "" },
     modelValue: { default: "" },
     imageMaxSize: { default: 30 },
     imageAllowedType: { default: () => ["jpg", "jpeg", "png", "bmp", "heif", "gif", "webp"] },
+    imageAllowedMineType: { default: () => ["image/jpg", "image/jpeg", "image/png", "image/bmp", "image/heif", "image/heic", "image/gif", "image/webp"] },
     imageMinWidth: { default: 60 },
     imageMinHeight: { default: 60 },
     imageMaxWidth: { default: 6e3 },
@@ -51,50 +52,50 @@ const He = /* @__PURE__ */ O({
     options: { default: () => ({}) }
   },
   emits: ["input", "update:modelValue"],
-  setup(V, { expose: B, emit: _ }) {
-    const a = V;
-    j();
-    const y = w(), l = w(), p = w(!1), u = w(!1);
-    async function H(n) {
+  setup(O, { expose: R, emit: b }) {
+    const a = O;
+    G();
+    const M = y(), m = y(), g = y(!1), f = y(!1);
+    async function A(n) {
       var o, e;
-      const r = n.getElementsByTagName("img");
-      for (let i of r) {
+      const s = n.getElementsByTagName("img");
+      for (let i of s) {
         const t = i.src;
         if (t.startsWith("http://") || t.startsWith("https://")) {
-          const s = await b(t);
-          if (s.width < a.imageMinWidth && s.height < a.imageMinHeight || s.width > a.imageMaxWidth && s.height > a.imageMaxHeight) {
+          const r = await C(t);
+          if (r.width < a.imageMinWidth && r.height < a.imageMinHeight || r.width > a.imageMaxWidth && r.height > a.imageMaxHeight) {
             (o = i == null ? void 0 : i.remove) == null || o.call(i);
             return;
           }
-          const f = t.split("."), M = f[f.length - 1].toLowerCase();
-          if (!a.imageAllowedType.includes(M)) {
+          const w = t.split("."), S = w[w.length - 1].toLowerCase();
+          if (!a.imageAllowedType.includes(S)) {
             (e = i == null ? void 0 : i.remove) == null || e.call(i);
             return;
           }
         }
       }
     }
-    const W = (n) => {
-      const r = n.split(","), o = r[0].match(/:(.*?);/)[1], e = atob(r[1]);
+    const H = (n) => {
+      const s = n.split(","), o = s[0].match(/:(.*?);/)[1], e = atob(s[1]);
       let i = e.length;
       const t = new Uint8Array(i);
       for (; i--; )
         t[i] = e.charCodeAt(i);
       return new Blob([t], { type: o });
     };
-    function b(n) {
-      return new Promise((r) => {
+    function C(n) {
+      return new Promise((s) => {
         const o = new Image();
         o.onload = function() {
-          r({ width: o.width, height: o.height, image: o });
+          s({ width: o.width, height: o.height, image: o });
         }, o.src = n;
       });
     }
-    function A(n, r) {
+    function T(n, s) {
       return new Promise((o) => {
-        new E(n, {
-          ...r,
-          success(e) {
+        new q(n, {
+          ...s,
+          success: async (e) => {
             o({ success: !0, file: e });
           },
           error(e) {
@@ -103,16 +104,16 @@ const He = /* @__PURE__ */ O({
         });
       });
     }
-    const d = S(
-      () => x([a.paste_preprocess, m.paste_preprocess], {
+    const h = W(
+      () => _([a.paste_preprocess, d.paste_preprocess], {
         type: Function
       })
-    ), g = S(
-      () => x([a.paste_postprocess, m.paste_postprocess], {
+    ), v = W(
+      () => _([a.paste_postprocess, d.paste_postprocess], {
         type: Function
       })
-    ), c = S(
-      () => x([a.imageUploadHandle, m.imageUploadHandle], {
+    ), c = W(
+      () => _([a.imageUploadHandle, d.imageUploadHandle], {
         type: Function
       })
     );
@@ -124,7 +125,7 @@ const He = /* @__PURE__ */ O({
         language: "zh_CN",
         /** 需要配置到外部 */
         // 实例
-        target: y.value,
+        target: M.value,
         // 隐藏品牌
         branding: !1,
         // 隐藏右上角升级按钮
@@ -189,48 +190,49 @@ const He = /* @__PURE__ */ O({
         // 粘贴前处理
         paste_preprocess(o, e) {
           var i;
-          e.content = e.content.replace(/<video[^>]*(?:\/>|>[\s\S]*?<\/video>)/g, ""), e.content = e.content.replace(/<audio[^>]*(?:\/>|>[\s\S]*?<\/audio>)/g, ""), e.content = e.content.replace(/<nav/g, "<div").replace(/<\/nav>/g, "</div>"), e.content = e.content.replace(/<header/g, "<div").replace(/<\/header>/g, "</div>"), e.content = e.content.replace(/<footer/g, "<div").replace(/<\/footer>/g, "</div>"), e.content = e.content.replace(/<aside/g, "<div").replace(/<\/aside>/g, "</div>"), e.content = e.content.replace(/<section/g, "<div").replace(/<\/section>/g, "</div>"), e.content = e.content.replace(/<main/g, "<div").replace(/<\/main>/g, "</div>"), e.content = e.content.replace(/<article/g, "<div").replace(/<\/article>/g, "</div>"), e.content = e.content.replace(/<details/g, "<div").replace(/<\/details>/g, "</div>"), (i = d.value) == null || i.call(d, o, e);
+          e.content = e.content.replace(/<video[^>]*(?:\/>|>[\s\S]*?<\/video>)/g, ""), e.content = e.content.replace(/<audio[^>]*(?:\/>|>[\s\S]*?<\/audio>)/g, ""), e.content = e.content.replace(/<nav/g, "<div").replace(/<\/nav>/g, "</div>"), e.content = e.content.replace(/<header/g, "<div").replace(/<\/header>/g, "</div>"), e.content = e.content.replace(/<footer/g, "<div").replace(/<\/footer>/g, "</div>"), e.content = e.content.replace(/<aside/g, "<div").replace(/<\/aside>/g, "</div>"), e.content = e.content.replace(/<section/g, "<div").replace(/<\/section>/g, "</div>"), e.content = e.content.replace(/<main/g, "<div").replace(/<\/main>/g, "</div>"), e.content = e.content.replace(/<article/g, "<div").replace(/<\/article>/g, "</div>"), e.content = e.content.replace(/<details/g, "<div").replace(/<\/details>/g, "</div>"), (i = h.value) == null || i.call(h, o, e);
         },
         // 粘贴后处理(处理异步操作)
         paste_postprocess(o, e) {
           var t;
           const i = e.node;
-          H(i), (t = g.value) == null || t.call(g, o, e);
+          A(i), (t = v.value) == null || t.call(v, o, e);
         },
         images_upload_handler(o) {
           return new Promise(async (e, i) => {
-            var v, P, U;
-            const t = (P = (v = m.message) == null ? void 0 : v.loading) == null ? void 0 : P.call(v);
-            let s = o.blob();
-            const f = o.base64(), M = o.filename(), z = s.name.split("."), R = z[z.length - 1].toLowerCase();
-            if (s.size > a.imageMaxSize * 1024 * 1024)
+            var x, V, B;
+            const t = (V = (x = d.message) == null ? void 0 : x.loading) == null ? void 0 : V.call(x);
+            let r = o.blob();
+            const w = o.base64(), S = o.filename(), P = r.name.split("."), $ = P[P.length - 1].toLowerCase();
+            if (r.size > a.imageMaxSize * 1024 * 1024)
               return t == null || t.close(), i({ message: `请上传大小不超过${a.imageMaxSize}M的图片`, remove: !0 });
-            if (!a.imageAllowedType.includes(R))
-              return t == null || t.close(), i({ message: `请上传格式为${a.imageAllowedType.map((F) => F.toUpperCase()).join("、")}的图片`, remove: !0 });
-            const T = "data:" + s.type + ";base64," + f, h = await b(T);
-            if (h.width < a.imageMinWidth && h.height < a.imageMinHeight || h.width > a.imageMaxWidth && h.height > a.imageMaxHeight)
+            if (!a.imageAllowedMineType.includes(r.type))
+              return t == null || t.close(), i({ message: `请上传格式为${a.imageAllowedType.map((u) => u.toUpperCase()).join("、")}的图片`, remove: !0 });
+            const U = "data:" + r.type + ";base64," + w, p = await C(U);
+            if (p.width < a.imageMinWidth && p.height < a.imageMinHeight || p.width > a.imageMaxWidth && p.height > a.imageMaxHeight)
               return t == null || t.close(), i({ message: `请上传像素不低于${a.imageMinWidth}*${a.imageMinHeight}且像素不高于${a.imageMaxWidth}*${a.imageMaxHeight}的图片`, remove: !0 });
-            const $ = {
-              // 满足这两种条件会自动转换为JPEG格式
-              convertTypes: ["image/heif", "image/heic", "image/webp"],
-              convertSize: 5e6
-            }, C = await A(W(T), $);
-            if (C.success)
-              s = C.file;
-            else
-              return t == null || t.close(), i({ message: C.error, remove: !0 });
+            const l = {};
+            ["image/heif", "image/heic", "image/webp"].includes($) && (l.convertTypes = [r.type], l.convertSize = 0);
+            const k = 5 * 1024 * 1024;
+            if (r.size > k && (l.convertTypes = [r.type], l.convertSize = k, l.maxWidth = p.width * (k / r.size)), Object.keys(l).length > 0) {
+              const u = await T(H(U), l);
+              if (u.success)
+                r = u.file;
+              else
+                return t == null || t.close(), i({ message: u.error, remove: !0 });
+            }
             if (!c.value)
               return t == null || t.close(), i({ message: "缺少图片上传配置", remove: !0 });
-            const k = await ((U = c.value) == null ? void 0 : U.call(c, s, M));
-            if (!k.success)
-              return t == null || t.close(), i({ message: k.errorMessage, remove: !0 });
-            t == null || t.close(), e(k.url);
+            const z = await ((B = c.value) == null ? void 0 : B.call(c, r, S));
+            if (!z.success)
+              return t == null || t.close(), i({ message: z.errorMessage, remove: !0 });
+            t == null || t.close(), e(z.url);
           });
         }
-      }, r = x(
+      }, s = _(
         [
           a.options,
-          m.tinymceOptions,
+          d.tinymceOptions,
           n
         ],
         {
@@ -240,36 +242,36 @@ const He = /* @__PURE__ */ O({
           type: Object
         }
       );
-      G.init(r).then(([o]) => {
+      E.init(s).then(([o]) => {
         var e;
         o.on("change input Redo Undo SetContent", () => {
-          if (u.value) {
-            u.value = !1;
+          if (f.value) {
+            f.value = !1;
             return;
           }
-          p.value = !0, _("input", o.getContent()), _("update:modelValue", o.getContent());
-        }), l.value = o, (e = a.initComplete) == null || e.call(a);
+          g.value = !0, b("input", o.getContent()), b("update:modelValue", o.getContent());
+        }), m.value = o, (e = a.initComplete) == null || e.call(a);
       });
-    }), L(() => {
+    }), j(() => {
       var n;
-      (n = l.value) == null || n.destroy();
-    }), q(
-      () => [a.value, a.modelValue, l.value],
+      (n = m.value) == null || n.destroy();
+    }), L(
+      () => [a.value, a.modelValue, m.value],
       () => {
         var n;
-        if (p.value) {
-          p.value = !1;
+        if (g.value) {
+          g.value = !1;
           return;
         }
-        u.value = !0, (n = l.value) == null || n.setContent(a.value ?? a.modelValue ?? "");
+        f.value = !0, (n = m.value) == null || n.setContent(a.value ?? a.modelValue ?? "");
       },
       { immediate: !0 }
-    ), B({
-      insRef: y,
-      editorRef: l
-    }), { __sfc: !0, insRef: y, editorRef: l, preventSettingContent: p, preventUpdatingModelValue: u, props: a, emits: _, processPastedImage: H, dataURLtoBlob: W, getImagePixel: b, compressorImage: A, paste_preprocess: d, paste_postprocess: g, imageUploadHandle: c };
+    ), R({
+      insRef: M,
+      editorRef: m
+    }), { __sfc: !0, insRef: M, editorRef: m, preventSettingContent: g, preventUpdatingModelValue: f, props: a, emits: b, processPastedImage: A, dataURLtoBlob: H, getImagePixel: C, compressorImage: T, paste_preprocess: h, paste_postprocess: v, imageUploadHandle: c };
   }
 });
 export {
-  He as default
+  ze as default
 };

package/es/index.d.ts

@@ -45,6 +45,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    imageAllowedMineType: {
+        type: import('vue').PropType<string[]>;
+        default: () => string[];
+    };
     imageMinWidth: {
         type: import('vue').PropType<number>;
         default: number;
@@ -104,6 +108,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    imageAllowedMineType: {
+        type: import('vue').PropType<string[]>;
+        default: () => string[];
+    };
     imageMinWidth: {
         type: import('vue').PropType<number>;
         default: number;
@@ -154,6 +162,7 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
     modelValue: string;
     imageMaxSize: number;
     imageAllowedType: string[];
+    imageAllowedMineType: string[];
     imageMinWidth: number;
     imageMinHeight: number;
     imageMaxWidth: number;
@@ -176,6 +185,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    imageAllowedMineType: {
+        type: import('vue').PropType<string[]>;
+        default: () => string[];
+    };
     imageMinWidth: {
         type: import('vue').PropType<number>;
         default: number;
@@ -238,6 +251,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    imageAllowedMineType: {
+        type: import('vue').PropType<string[]>;
+        default: () => string[];
+    };
     imageMinWidth: {
         type: import('vue').PropType<number>;
         default: number;
@@ -297,6 +314,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<string[]>;
         default: () => string[];
     };
+    imageAllowedMineType: {
+        type: import('vue').PropType<string[]>;
+        default: () => string[];
+    };
     imageMinWidth: {
         type: import('vue').PropType<number>;
         default: number;
@@ -350,6 +371,7 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
     modelValue: string;
     imageMaxSize: number;
     imageAllowedType: string[];
+    imageAllowedMineType: string[];
     imageMinWidth: number;
     imageMinHeight: number;
     imageMaxWidth: number;
@@ -373,6 +395,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             type: import('vue').PropType<string[]>;
             default: () => string[];
         };
+        imageAllowedMineType: {
+            type: import('vue').PropType<string[]>;
+            default: () => string[];
+        };
         imageMinWidth: {
             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.1",
+  "version": "0.0.3",
   "private": false,
   "type": "module",
   "main": "es/index.js",