@keyblade/tinymce-editor-vue2 0.0.12-alpha.25 → 0.0.12-alpha.27

package/README.md

@@ -33,7 +33,7 @@ Vue.use(ImgPond, {})
 Vue.use(TinymceEditor, {
   // 图片
   imageUploadOptions: {
-    handleRequest: (file: File | Blob, filename: string, parameters: { extParameters: Record<string, any> }) => {
+    handleRequest: (file: File, filename: string, parameters: { extParameters: Record<string, any> }) => {
       return new Promise((resolve) => {
         setTimeout(() => {
           resolve({
@@ -170,7 +170,7 @@ export interface ImageUploadOptions {
   /** 图片最大高度 */
   maxHeight?: number;
   /** 图片上传请求处理 */
-  handleRequest?: (file: File | Blob, filename: string, options?: {
+  handleRequest?: (file: File, filename: string, options?: {
     extParameters?: Record<string, any>
   }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
 }

package/es/editor.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent as ge, ref as h, computed as _, watch as S, onMounted as he, onUnmounted as xe } from "vue";
-import { oneTravelImgPondBeforeAddFile as J, oneTravelImageCheckAndTransform as be, oneTravelImageCompressor as K } from "@keyblade/one-travel";
-import { getFileExtension as Q, getImagePixel as ye } from "./util.js";
-import we from "imgpond";
+import { defineComponent as he, ref as h, computed as _, watch as S, onMounted as xe, onUnmounted as be } from "vue";
+import { oneTravelImgPondBeforeAddFile as J, oneTravelImageCheckAndTransform as ye, oneTravelImageCompressor as K } from "@keyblade/one-travel";
+import { blobToFile as Q, getFileExtension as X, getImagePixel as we } from "./util.js";
+import _e from "imgpond";
 import { conclude as C } from "vue-global-config";
-import X from "tinymce";
-import _e from "./langs/zh_CN.js";
+import Y from "tinymce";
+import Ce from "./langs/zh_CN.js";
 import "tinymce/skins/ui/oxide/skin";
 import "tinymce/models/dom";
 import "tinymce/themes/silver";
@@ -33,9 +33,9 @@ import "tinymce/plugins/table";
 import "tinymce/plugins/visualblocks";
 import "tinymce/plugins/visualchars";
 import "tinymce/plugins/wordcount";
-import { globalProps as A } from "./index.js";
-import { Loading as k, Message as b } from "element-ui";
-const ra = /* @__PURE__ */ ge({
+import { globalProps as T } from "./index.js";
+import { Loading as U, Message as b } from "element-ui";
+const sa = /* @__PURE__ */ he({
   __name: "editor",
   props: {
     value: { default: "" },
@@ -49,9 +49,9 @@ const ra = /* @__PURE__ */ ge({
     initComplete: null
   },
   emits: ["input"],
-  setup(Y, { emit: z }) {
-    const m = Y;
-    X.addI18n("zh_CN", _e);
+  setup(Z, { emit: z }) {
+    const m = Z;
+    Y.addI18n("zh_CN", Ce);
     const V = {
       maxCount: 10,
       tipText: "上传",
@@ -70,7 +70,7 @@ const ra = /* @__PURE__ */ ge({
       enable: !0,
       maxSize: 200,
       allowedType: ["mp3", "m4a", "wav", "aac"]
-    }, R = h(), x = h(), P = h(!1), T = h(!1), c = _(() => C([m.imageUploadOptions, A.imageUploadOptions, V]) || {}), d = _(() => C([m.videoUploadOptions, A.videoUploadOptions, B]) || {}), f = _(() => C([m.audioUploadOptions, A.audioUploadOptions, H]) || {}), U = _(() => C([m.imgPondOptions, A.imgPondOptions]) || {}), Z = _(() => {
+    }, R = h(), x = h(), A = h(!1), P = h(!1), c = _(() => C([m.imageUploadOptions, T.imageUploadOptions, V]) || {}), d = _(() => C([m.videoUploadOptions, T.videoUploadOptions, B]) || {}), f = _(() => C([m.audioUploadOptions, T.audioUploadOptions, H]) || {}), k = _(() => C([m.imgPondOptions, T.imgPondOptions]) || {}), ee = _(() => {
       var e, o;
       return ((o = (e = c == null ? void 0 : c.value) == null ? void 0 : e.allowedType) == null ? void 0 : o.map((i) => `.${i}`).join(",")) || "";
     }), D = h();
@@ -79,7 +79,7 @@ const ra = /* @__PURE__ */ ge({
         let e;
         J(D.value, {
           onStart: () => {
-            e = k.service({ text: "加载中...", fullscreen: !0, customClass: "tinymce-loading" });
+            e = U.service({ text: "加载中...", fullscreen: !0, customClass: "tinymce-loading", background: "rgba(0, 0, 0, 0.8)" });
           },
           onSuccess: () => {
             e == null || e.close();
@@ -96,7 +96,7 @@ const ra = /* @__PURE__ */ ge({
         let e;
         J(M.value, {
           onStart: () => {
-            e = k.service({ text: "加载中", fullscreen: !0, customClass: "tinymce-loading" });
+            e = U.service({ text: "加载中", fullscreen: !0, customClass: "tinymce-loading", background: "rgba(0, 0, 0, 0.8)" });
           },
           onSuccess: () => {
             e == null || e.close();
@@ -116,13 +116,13 @@ const ra = /* @__PURE__ */ ge({
       w.value.dialogVisible = !1, w.value.formData = {
         images: []
       };
-    }, ee = () => {
+    }, ae = () => {
       var e;
       (e = W.value) == null || e.validate((o) => {
         o && (w.value.formData.images.forEach((i) => {
           var t;
           let a = i;
-          U.value.srcAt && (a = (i == null ? void 0 : i[U.value.srcAt]) || ""), (t = x.value) == null || t.insertContent(`<img src=${a} alt="" />`);
+          k.value.srcAt && (a = (i == null ? void 0 : i[k.value.srcAt]) || ""), (t = x.value) == null || t.insertContent(`<img src=${a} alt="" />`);
         }), j());
       });
     }, v = h({
@@ -143,7 +143,7 @@ const ra = /* @__PURE__ */ ge({
         cover: [],
         file: []
       }, v.value.additionalData = {};
-    }, ae = () => {
+    }, te = () => {
       var e;
       (e = $.value) == null || e.validate((o) => {
         var i, a;
@@ -161,13 +161,13 @@ const ra = /* @__PURE__ */ ge({
       g.value.dialogVisible = !1, g.value.formData = {
         file: []
       }, g.value.additionalData = {};
-    }, te = () => {
+    }, oe = () => {
       var e;
       (e = I.value) == null || e.validate((o) => {
         var i, a;
         o && ((a = x.value) == null || a.insertContent(`<video controls controlslist="nodownload" src="${(i = g.value.formData.file[0]) == null ? void 0 : i.url}"></video>`), q());
       });
-    }, oe = (e, o) => new Promise(async (i, a) => {
+    }, ie = (e, o) => new Promise(async (i, a) => {
       var r, l;
       const t = await K(e);
       if (!t.success) {
@@ -176,7 +176,7 @@ const ra = /* @__PURE__ */ ge({
         });
         return;
       }
-      const n = await ((l = (r = c.value).handleRequest) == null ? void 0 : l.call(r, t.file, e.name, { extParameters: m.extParameters }));
+      const n = await ((l = (r = c.value).handleRequest) == null ? void 0 : l.call(r, Q(t.file, e.name), e.name, { extParameters: m.extParameters }));
       if (!n || !(n != null && n.success)) {
         a(), setTimeout(() => {
           o.onError(n == null ? void 0 : n.errorMessage);
@@ -193,12 +193,12 @@ const ra = /* @__PURE__ */ ge({
         if (s.startsWith("data:image"))
           (i = l == null ? void 0 : l.remove) == null || i.call(l);
         else if (s.startsWith("http://") || s.startsWith("https://")) {
-          const u = await ye(s);
+          const u = await we(s);
           if (u && (u.width < (c.value.minWidth || 0) && u.height < (c.value.minHeight || 0) || u.width > (c.value.maxWidth || 0) && u.height > (c.value.maxHeight || 0))) {
             (a = l == null ? void 0 : l.remove) == null || a.call(l);
             return;
           }
-          const p = Q(s);
+          const p = X(s);
           if (!((n = (t = c.value) == null ? void 0 : t.allowedType) != null && n.includes(p.toLowerCase()))) {
             (r = l == null ? void 0 : l.remove) == null || r.call(l);
             return;
@@ -206,7 +206,7 @@ const ra = /* @__PURE__ */ ge({
         }
       }
     }
-    he(() => {
+    xe(() => {
       var i;
       const e = {
         // 设置语言
@@ -301,11 +301,11 @@ const ra = /* @__PURE__ */ ge({
             var N, O, L;
             if (!((N = c.value) != null && N.handleRequest))
               return n({ message: "缺少图片上传配置", remove: !0 });
-            const r = k.service({ text: "上传中" });
+            const r = U.service({ text: "上传中....", background: "rgba(0, 0, 0, 0.8)" });
             let l = a.blob(), s = l.name ? l.name : a.filename();
             if (!(l != null && l.name) && !(l != null && l.lastModified) && l.type === "image/png")
               return r == null || r.close(), n({ message: "不允许粘贴", remove: !0 });
-            const u = await be(l, s, {
+            const u = await ye(l, s, {
               imageMaxSize: c.value.maxSize,
               imageAllowedType: c.value.allowedType,
               // imageAllowedMineType: mergeImageUploadOptions.value.allowedMineType,
@@ -324,7 +324,7 @@ const ra = /* @__PURE__ */ ge({
             const p = await K(l);
             if (!p.success)
               return r == null || r.close(), n({ message: p == null ? void 0 : p.errorMessage, remove: !0 });
-            const y = await ((L = (O = c.value).handleRequest) == null ? void 0 : L.call(O, p.file, s, { extParameters: m.extParameters }));
+            const y = await ((L = (O = c.value).handleRequest) == null ? void 0 : L.call(O, Q(p.file, s), s, { extParameters: m.extParameters }));
             if (!y || !y.success)
               return r == null || r.close(), n({ message: y.errorMessage, remove: !0 });
             r == null || r.close(), t(y.url);
@@ -383,7 +383,7 @@ const ra = /* @__PURE__ */ ge({
       }, o = C(
         [
           m.options,
-          A.options,
+          T.options,
           e
         ],
         {
@@ -393,40 +393,40 @@ const ra = /* @__PURE__ */ ge({
           type: Object
         }
       );
-      X.init(o).then(([a]) => {
+      Y.init(o).then(([a]) => {
         var t;
         a && (a.customProps = { ...m }, a.on("change input Redo Undo SetContent", () => {
-          if (T.value) {
-            T.value = !1;
+          if (P.value) {
+            P.value = !1;
             return;
           }
-          P.value = !0, z("input", a.getContent());
+          A.value = !0, z("input", a.getContent());
         }), a.on("paste", (n) => {
           var l, s;
           const r = ((l = n.clipboardData) == null ? void 0 : l.files) || [];
           for (let u of r) {
-            const p = Q(u.name) || "";
+            const p = X(u.name) || "";
             (s = c.value.allowedType) != null && s.includes(p.toLowerCase()) || n.preventDefault();
           }
         }), (t = m.initComplete) == null || t.call(m, { editorIns: a }), x.value = a);
       });
-    }), xe(() => {
+    }), be(() => {
       var e;
       (e = x.value) == null || e.destroy();
     });
-    const ie = () => {
+    const le = () => {
       var o, i;
       const e = { ...v.value.additionalData || {} };
       return ((i = (o = f.value) == null ? void 0 : o.data) == null ? void 0 : i.call(o, { file: e, extParameters: m.extParameters })) || {};
-    }, le = () => {
+    }, ne = () => {
       var o, i;
       const e = { ...v.value.additionalData || {} };
       return ((i = (o = f.value) == null ? void 0 : o.headers) == null ? void 0 : i.call(o, { file: e, extParameters: m.extParameters })) || {};
-    }, ne = (e, o, i) => {
+    }, re = (e, o, i) => {
       var t, n;
       const a = (n = (t = f == null ? void 0 : f.value) == null ? void 0 : t.handlerResponse) == null ? void 0 : n.call(t, e);
       a != null && a.url ? i[i.length - 1].url = a.url : a != null && a.errorMessage && (b.error(a.errorMessage), i.splice(i.length - 1, 1)), v.value.formData.file = i;
-    }, re = (e, o) => new Promise((i, a) => {
+    }, se = (e, o) => new Promise((i, a) => {
       var n, r, l, s, u, p;
       const t = e.name.split(".").filter(Boolean).pop() ? e.name.split(".").filter(Boolean).pop() : "";
       if (!((r = (n = f.value) == null ? void 0 : n.allowedType) != null && r.includes(t.toLowerCase()))) {
@@ -438,23 +438,23 @@ const ra = /* @__PURE__ */ ge({
         return;
       }
       v.value.additionalData = { file: e }, i(!0);
-    }), se = (e, o) => {
+    }), ue = (e, o) => {
       v.value.formData.file = o;
-    }, ue = (e, o, i) => {
+    }, ce = (e, o, i) => {
       b.error("上传发生错误，请重试!"), v.value.formData.file = i;
-    }, ce = () => {
+    }, me = () => {
       var o, i;
       const e = { ...g.value.additionalData || {} };
       return ((i = (o = d.value) == null ? void 0 : o.data) == null ? void 0 : i.call(o, { file: e, extParameters: m.extParameters })) || {};
-    }, me = () => {
+    }, de = () => {
       var o, i;
       const e = { ...g.value.additionalData || {} };
       return ((i = (o = d.value) == null ? void 0 : o.headers) == null ? void 0 : i.call(o, { file: e, extParameters: m.extParameters })) || {};
-    }, de = (e, o, i) => {
+    }, pe = (e, o, i) => {
       var t, n;
       const a = (n = (t = d == null ? void 0 : d.value) == null ? void 0 : t.handlerResponse) == null ? void 0 : n.call(t, e);
       a != null && a.url ? i[i.length - 1].url = a.url : a != null && a.errorMessage && (b.error(a.errorMessage), i.splice(i.length - 1, 1)), g.value.formData.file = i;
-    }, pe = (e, o) => new Promise((i, a) => {
+    }, ve = (e, o) => new Promise((i, a) => {
       var n, r, l, s, u, p;
       const t = e.name.split(".").filter(Boolean).pop() ? e.name.split(".").filter(Boolean).pop() : "";
       if (!((r = (n = d == null ? void 0 : d.value) == null ? void 0 : n.allowedType) != null && r.includes(t.toLowerCase()))) {
@@ -466,9 +466,9 @@ const ra = /* @__PURE__ */ ge({
         return;
       }
       g.value.additionalData = { file: e }, i(!0);
-    }), ve = (e, o) => {
+    }), fe = (e, o) => {
       g.value.formData.file = o;
-    }, fe = (e, o, i) => {
+    }, ge = (e, o, i) => {
       b.error("上传发生错误，请重试!"), g.value.formData.file = i;
     };
     return S(() => [m.disabled, x.value], () => {
@@ -478,16 +478,16 @@ const ra = /* @__PURE__ */ ge({
       () => [m.value, x.value],
       () => {
         var e;
-        if (P.value) {
-          P.value = !1;
+        if (A.value) {
+          A.value = !1;
           return;
         }
-        T.value = !0, (e = x.value) == null || e.setContent(m.value ? m.value : "");
+        P.value = !0, (e = x.value) == null || e.setContent(m.value ? m.value : "");
       },
       { immediate: !0 }
-    ), { __sfc: !0, defaultImageUploadOptions: V, defaultVideoUploadOptions: B, defaultAudioUploadOptions: H, props: m, emits: z, insRef: R, editorRef: x, preventSettingContent: P, preventUpdatingModelValue: T, mergeImageUploadOptions: c, mergeVideoUploadOptions: d, mergeAudioUploadOptions: f, mergeImgPondOptions: U, imgPondAccept: Z, uploadImageImgPondRef: D, audioImageImgPondRef: M, uploadImage: w, uploadImageFormRef: W, onUploadImageClose: j, onUploadImageConfirm: ee, uploadAudio: v, uploadAudioFormRef: $, onUploadAudioClose: E, onUploadAudioConfirm: ae, uploadVideo: g, uploadVideoFormRef: I, onUploadVideoClose: q, onUploadVideoConfirm: te, onImageUploadUpload: oe, processPastedImage: F, getUploadAudioData: ie, getUploadAudioHeaders: le, onUploadAudioSuccess: ne, onUploadAudioBeforeUpload: re, onUploadAudioRemove: se, onUploadAudioError: ue, getUploadVideoData: ce, getUploadVideoHeaders: me, onUploadVideoSuccess: de, onUploadVideoBeforeUpload: pe, onUploadVideoRemove: ve, onUploadVideoError: fe, ImgPond: we };
+    ), { __sfc: !0, defaultImageUploadOptions: V, defaultVideoUploadOptions: B, defaultAudioUploadOptions: H, props: m, emits: z, insRef: R, editorRef: x, preventSettingContent: A, preventUpdatingModelValue: P, mergeImageUploadOptions: c, mergeVideoUploadOptions: d, mergeAudioUploadOptions: f, mergeImgPondOptions: k, imgPondAccept: ee, uploadImageImgPondRef: D, audioImageImgPondRef: M, uploadImage: w, uploadImageFormRef: W, onUploadImageClose: j, onUploadImageConfirm: ae, uploadAudio: v, uploadAudioFormRef: $, onUploadAudioClose: E, onUploadAudioConfirm: te, uploadVideo: g, uploadVideoFormRef: I, onUploadVideoClose: q, onUploadVideoConfirm: oe, onImageUploadUpload: ie, processPastedImage: F, getUploadAudioData: le, getUploadAudioHeaders: ne, onUploadAudioSuccess: re, onUploadAudioBeforeUpload: se, onUploadAudioRemove: ue, onUploadAudioError: ce, getUploadVideoData: me, getUploadVideoHeaders: de, onUploadVideoSuccess: pe, onUploadVideoBeforeUpload: ve, onUploadVideoRemove: fe, onUploadVideoError: ge, ImgPond: _e };
   }
 });
 export {
-  ra as default
+  sa as default
 };

package/es/index.js

@@ -1,16 +1,17 @@
 import './style.css';
 import o from "./editor.vue.js";
-import { Button as s, Slider as i, Dialog as n, Upload as r, Tag as u, Form as m, FormItem as l, ButtonGroup as g, InputNumber as c, Loading as d } from "element-ui";
-import { getFileExtension as F, getImagePixel as I } from "./util.js";
-const b = {}, E = Object.assign(o, {
+import { Button as s, Slider as i, Dialog as n, Upload as r, Tag as u, Form as m, FormItem as l, ButtonGroup as g, InputNumber as c, Loading as b } from "element-ui";
+import { blobToFile as y, getFileExtension as I, getImagePixel as j } from "./util.js";
+const d = {}, x = Object.assign(o, {
   install: (e, t) => {
-    Object.assign(b, t || {}), e.use(s), e.use(i), e.use(n), e.use(r), e.use(u), e.use(m), e.use(l), e.use(g), e.use(c), e.use(d), e.component("KbTinymceEditor", o);
+    Object.assign(d, t || {}), e.use(s), e.use(i), e.use(n), e.use(r), e.use(u), e.use(m), e.use(l), e.use(g), e.use(c), e.use(b), e.component("KbTinymceEditor", o);
   }
 });
 export {
-  E as TinymceEditor,
-  E as default,
-  F as getFileExtension,
-  I as getImagePixel,
-  b as globalProps
+  x as TinymceEditor,
+  y as blobToFile,
+  x as default,
+  I as getFileExtension,
+  j as getImagePixel,
+  d as globalProps
 };

package/es/types.d.ts

@@ -17,7 +17,7 @@ export interface ImageUploadOptions {
     /** 图片最大高度 */
     maxHeight?: number;
     /** 图片上传请求处理 */
-    handleRequest?: (file: File | Blob, filename: string, options?: {
+    handleRequest?: (file: File, filename: string, options?: {
         extParameters?: Record<string, any>;
     }) => Promise<{
         success: boolean;

package/es/util.d.ts

@@ -12,3 +12,9 @@ export declare function getImagePixel(src: string): Promise<{
  * @param filename 文件名
  */
 export declare function getFileExtension(filename: string): string;
+/**
+ * blob 转 file
+ * @param data
+ * @param filename
+ */
+export declare function blobToFile(data: File | Blob, filename: string): File;

package/es/util.js

@@ -1,18 +1,22 @@
-function o(e) {
+function r(e) {
   return new Promise((n) => {
-    const t = new Image();
-    t.onload = function() {
-      n({ width: t.width, height: t.height, image: t });
-    }, t.onerror = function(i) {
+    const i = new Image();
+    i.onload = function() {
+      n({ width: i.width, height: i.height, image: i });
+    }, i.onerror = function(t) {
       n(void 0);
-    }, t.src = e;
+    }, i.src = e;
   });
 }
-function r(e) {
+function o(e) {
   const n = e.split(".");
   return n ? n[n.length - 1] : "";
 }
+function u(e, n) {
+  return e.name ? e : new File([e], n, { type: e.type });
+}
 export {
-  r as getFileExtension,
-  o as getImagePixel
+  u as blobToFile,
+  o as getFileExtension,
+  r as getImagePixel
 };

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.25",
+  "version": "0.0.12-alpha.27",
   "private": false,
   "type": "module",
   "main": "es/index.js",