@keyblade/tinymce-editor-vue2 0.0.12-alpha.14 → 0.0.12-alpha.15

package/README.md

@@ -99,14 +99,48 @@ onMounted(() => {
 </script>
 ```
 
-### 3.使用工具类（单独使用图片上传组件的，可使用这两个工具类自行处理）
+### 3.使用工具类（单独使用图片上传组件的，可使用以下工具类自行处理）
 ```typescript
-import { oneTravelImageCheck, oneTravelImageCompressor } from '@keyblade/tinymce-editor-vue2'
+import { oneTravelImageCheck, oneTravelImageCompressor, interceptImgPondBeforeAddFile } from '@keyblade/tinymce-editor-vue2'
 
 // oneTravelImageCheck: 一码游图片检测工具
 // oneTravelImageCompressor: 一码游图片压缩工具
+// interceptImgPondBeforeAddFile 统一处理拦截ImgPond方法，内部包含heif格式转换
+```
+
+#### interceptImgPondBeforeAddFile
+如果项目中单独有使用ImgPond组件，需要对内部方法进行拦截，否则上传 heif 格式的图片不能正常显示，以下是示例，使用组合式 Api 语法，选项式 Api 请自行替换
+
+1.绑定 ref 对象
+```html
+<ImgPond
+  ref="audioImageImgPondRef"
+  v-model="uploadAudio.formData.cover"
+>
+</ImgPond>
 ```
 
+2.拦截
+```typescript
+const uploadImageImgPondRef = ref()
+watch(() => uploadImageImgPondRef.value, () => {
+  if (uploadImageImgPondRef.value) {
+    let loadingIns: ElLoadingComponent
+    interceptImgPondBeforeAddFile(uploadImageImgPondRef.value, {
+      onStart: () => {
+        loadingIns = Loading.service({text: '加载中...', fullscreen: true, customClass: 'tinymce-loading' })
+      },
+      onEnd: () => {
+        loadingIns?.close()
+      }
+    })
+  }
+}, { immediate: true })
+```
+
+
+### 3.使用工具类（单独使用图片上传组件的，可使用这两个工具类自行处理）
+
 ```typescript
 export async function oneTravelImageCheck(data: File | Blob, options?: {
   imageMaxSize?: number;

package/es/editor.vue.js

@@ -4,11 +4,11 @@ import i from "./_virtual/_plugin-vue2_normalizer.js";
 var d = function() {
   var l;
   var e = this, a = e._self._c, o = e._self._setupProxy;
-  return a("div", { staticClass: "tinymce-editor" }, [a("textarea", { ref: "insRef" }), e._v(" "), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-image-dialog", attrs: { visible: o.uploadImage.dialogVisible, title: "插入图片", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadImageClose } }, [a("el-form", { ref: "uploadImageFormRef", staticClass: "uploadImageForm", attrs: { model: o.uploadImage.formData } }, [a("el-form-item", { attrs: { prop: "images", rules: { required: !0, message: "必填项" } } }, [a(o.ImgPond, e._b({ attrs: { valueType: "array", accept: o.imgPondAccept, size: e.imageMaxSize, count: e.imageUploadMaxCount, upload: o.onImageUploadUpload }, model: { value: o.uploadImage.formData.images, callback: function(t) {
+  return a("div", { staticClass: "tinymce-editor" }, [a("textarea", { ref: "insRef" }), e._v(" "), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-image-dialog", attrs: { visible: o.uploadImage.dialogVisible, title: "插入图片", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadImageClose } }, [a("el-form", { ref: "uploadImageFormRef", staticClass: "uploadImageForm", attrs: { model: o.uploadImage.formData } }, [a("el-form-item", { attrs: { prop: "images", rules: { required: !0, message: "必填项" } } }, [a(o.ImgPond, e._b({ ref: "uploadImageImgPondRef", attrs: { valueType: "array", accept: o.imgPondAccept, size: e.imageMaxSize, count: e.imageUploadMaxCount, upload: o.onImageUploadUpload }, model: { value: o.uploadImage.formData.images, callback: function(t) {
     e.$set(o.uploadImage.formData, "images", t);
   }, expression: "uploadImage.formData.images" } }, "ImgPond", o.mergeImgPondOptions, !1))], 1), a("div", { staticClass: "tips" }, [a("span", { staticStyle: { "font-size": "15px", "font-weight": "bold" } }, [e._v("注意：")]), a("span", [e._v("1. 单次最多可同时选择" + e._s(e.imageUploadMaxCount) + "张图片")]), a("span", [e._v("2. 仅支持" + e._s(e.imageAllowedType.map((t) => t.toUpperCase()).join("、")) + "格式")]), a("span", [e._v("3. 单张图片大小不可超过" + e._s(e.imageMaxSize) + "M")]), a("span", [e._v("4. 像素不低于" + e._s(e.imageMinWidth) + "*" + e._s(e.imageMinHeight) + "且像素不高于" + e._s(e.imageMaxWidth) + "*" + e._s(e.imageMaxHeight))])])], 1), a("div", { attrs: { slot: "footer" }, slot: "footer" }, [a("el-button", { on: { click: o.onUploadImageClose } }, [e._v("取消")]), a("el-button", { attrs: { type: "primary" }, on: { click: o.onUploadImageConfirm } }, [e._v("确定")])], 1)], 1), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-audio-dialog", attrs: { visible: o.uploadAudio.dialogVisible, title: "插入音频", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadAudioClose } }, [a("el-form", { ref: "uploadAudioFormRef", staticClass: "uploadAudioForm", attrs: { model: o.uploadAudio.formData, "label-width": "auto" } }, [a("el-form-item", { attrs: { label: "名称", prop: "name", rules: { required: !0, message: "必填项" } } }, [a("el-input", { attrs: { maxlength: "14", "show-word-limit": "", placeholder: "请输入" }, model: { value: o.uploadAudio.formData.name, callback: function(t) {
     e.$set(o.uploadAudio.formData, "name", t);
-  }, expression: "uploadAudio.formData.name" } })], 1), a("el-form-item", { attrs: { label: "封面", prop: "cover", rules: { required: !0, message: "必填项" } } }, [a(o.ImgPond, e._b({ attrs: { valueType: "array", size: e.imageMaxSize, accept: o.imgPondAccept, count: 1, upload: o.onImageUploadUpload }, model: { value: o.uploadAudio.formData.cover, callback: function(t) {
+  }, expression: "uploadAudio.formData.name" } })], 1), a("el-form-item", { attrs: { label: "封面", prop: "cover", rules: { required: !0, message: "必填项" } } }, [a(o.ImgPond, e._b({ ref: "audioImageImgPondRef", attrs: { valueType: "array", size: e.imageMaxSize, accept: o.imgPondAccept, count: 1, upload: o.onImageUploadUpload }, model: { value: o.uploadAudio.formData.cover, callback: function(t) {
     e.$set(o.uploadAudio.formData, "cover", t);
   }, expression: "uploadAudio.formData.cover" } }, "ImgPond", o.mergeImgPondOptions, !1))], 1), a("el-form-item", { attrs: { label: "音频", prop: "file", rules: { required: !0, message: "必填项" } } }, [a("el-upload", { class: ["upload", { "upload-hide": o.uploadAudio.formData.file.length >= 1 }], attrs: { name: "file", "file-list": o.uploadAudio.formData.file, action: ((l = o.mergeAudioUploadOptions) == null ? void 0 : l.action) || "", data: o.getUploadAudioData(), accept: "audio/*", "list-type": "headTextContent", "before-upload": o.onUploadAudioBeforeUpload, headers: o.getUploadAudioHeaders(), "on-remove": o.onUploadAudioRemove, "on-success": o.onUploadAudioSuccess, "on-error": o.onUploadAudioError, limit: 1 } }, [a("el-button", { attrs: { size: "small", type: "primary" } }, [e._v("上传文件"), a("i", { staticClass: "el-icon-upload el-icon--right" })]), a("div", { staticClass: "el-upload__tip", attrs: { slot: "tip" }, slot: "tip" }, [e._v("支持音频格式：" + e._s(e.audioAllowedType.join("、")))])], 1)], 1)], 1), a("div", { attrs: { slot: "footer" }, slot: "footer" }, [a("el-button", { on: { click: o.onUploadAudioClose } }, [e._v("取消")]), a("el-button", { attrs: { type: "primary" }, on: { click: o.onUploadAudioConfirm } }, [e._v("确定")])], 1)], 1), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-video-dialog", attrs: { visible: o.uploadVideo.dialogVisible, title: "插入视频", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadVideoClose } }, [a("el-form", { ref: "uploadVideoFormRef", staticClass: "uploadVideoForm", attrs: { model: o.uploadVideo.formData, "label-width": "auto" } }, [a("el-form-item", { attrs: { label: "视频", prop: "file", rules: { required: !0, message: "必填项" } } }, [a("el-upload", { class: ["upload", { "upload-hide": o.uploadVideo.formData.file.length >= 1 }], attrs: { name: "file", "file-list": o.uploadVideo.formData.file, action: o.mergeVideoUploadOptions.action || "", data: o.getUploadVideoData(), accept: "video/*", "list-type": "headTextContent", "before-upload": o.onUploadVideoBeforeUpload, headers: o.getUploadVideoHeaders(), "on-remove": o.onUploadVideoRemove, "on-success": o.onUploadVideoSuccess, "on-error": o.onUploadVideoError, limit: 1 } }, [a("el-button", { attrs: { size: "small", type: "primary" } }, [e._v("上传文件"), a("i", { staticClass: "el-icon-upload el-icon--right" })]), a("div", { staticClass: "el-upload__tip", attrs: { slot: "tip" }, slot: "tip" }, [e._v("支持视频格式：" + e._s(e.videoAllowedType.join("、")))])], 1)], 1)], 1), a("div", { attrs: { slot: "footer" }, slot: "footer" }, [a("el-button", { on: { click: o.onUploadVideoClose } }, [e._v("取消")]), a("el-button", { attrs: { type: "primary" }, on: { click: o.onUploadVideoConfirm } }, [e._v("确定")])], 1)], 1)], 1);
 }, s = [], r = /* @__PURE__ */ i(

package/es/editor.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as ce, ref as m, computed as M, onMounted as ge, onUnmounted as fe, watch as F } from "vue";
-import { oneTravelImageCheck as N, oneTravelImageCompressor as q, getImagePixel as ve } from "./util.js";
-import he from "imgpond";
+import { defineComponent as he, ref as d, watch as k, computed as M, onMounted as Me, onUnmounted as xe } from "vue";
+import { interceptImgPondBeforeAddFile as G, oneTravelImageCheck as L, oneTravelImageCompressor as J, getImagePixel as ye } from "./util.js";
+import be from "imgpond";
 import { conclude as x } from "vue-global-config";
-import j from "tinymce";
-import Me from "./langs/zh_CN.js";
+import K from "tinymce";
+import _e from "./langs/zh_CN.js";
 import "tinymce/skins/ui/oxide/skin";
 import "tinymce/models/dom";
 import "tinymce/themes/silver";
@@ -33,15 +33,15 @@ import "tinymce/plugins/visualblocks";
 import "tinymce/plugins/visualchars";
 import "tinymce/plugins/wordcount";
 import { globalProps as y } from "./index.js";
-import { Loading as xe, Message as h } from "element-ui";
-const ia = /* @__PURE__ */ ce({
+import { Loading as W, Message as h } from "element-ui";
+const la = /* @__PURE__ */ he({
   __name: "editor",
   props: {
     value: { default: "" },
     modelValue: { default: "" },
     disabled: { type: Boolean },
     extParameters: null,
-    imageUploadMaxCount: { default: 2 },
+    imageUploadMaxCount: { default: 10 },
     imageUploadTip: { default: "上传" },
     imageMaxSize: { default: 30 },
     imageAllowedType: { default: () => ["jpg", "jpeg", "png", "bmp", "heif", "gif", "webp"] },
@@ -66,29 +66,57 @@ const ia = /* @__PURE__ */ ce({
     imgPondOptions: null
   },
   emits: ["input", "update:modelValue"],
-  setup(G, { emit: S }) {
-    const a = G;
-    j.addI18n("zh_CN", Me);
-    const k = m(), d = m(), U = m(!1), V = m(!1), g = m({
+  setup(Q, { emit: z }) {
+    const o = Q;
+    K.addI18n("zh_CN", _e);
+    const R = d(), u = d(), U = d(!1), C = d(!1), V = d();
+    k(() => V.value, () => {
+      if (V.value) {
+        let a;
+        G(V.value, {
+          onStart: () => {
+            a = W.service({ text: "加载中...", fullscreen: !0, customClass: "tinymce-loading" });
+          },
+          onEnd: () => {
+            a == null || a.close();
+          }
+        });
+      }
+    }, { immediate: !0 });
+    const P = d();
+    k(() => P.value, () => {
+      if (P.value) {
+        let a;
+        G(P.value, {
+          onStart: () => {
+            a = W.service({ text: "加载中", fullscreen: !0, customClass: "tinymce-loading" });
+          },
+          onEnd: () => {
+            a == null || a.close();
+          }
+        });
+      }
+    }, { immediate: !0 });
+    const g = d({
       dialogVisible: !1,
       formData: {
         images: []
       }
-    }), z = m(), L = () => {
+    }), B = d(), X = () => {
       g.value.dialogVisible = !1, g.value.formData = {
         images: []
       };
-    }, J = () => {
-      var i;
-      (i = z.value) == null || i.validate((l) => {
-        l && (g.value.formData.images.forEach((o) => {
+    }, Y = () => {
+      var a;
+      (a = B.value) == null || a.validate((l) => {
+        l && (g.value.formData.images.forEach((i) => {
           var e, t;
-          if ($.value.srcAt)
-            return (e = d.value) == null ? void 0 : e.insertContent(`<img src=${o == null ? void 0 : o[$.value.srcAt]} alt="" />`);
-          (t = d.value) == null || t.insertContent(`<img src=${o} alt="" />`);
+          if (H.value.srcAt)
+            return (e = u.value) == null ? void 0 : e.insertContent(`<img src=${i == null ? void 0 : i[H.value.srcAt]} alt="" />`);
+          (t = u.value) == null || t.insertContent(`<img src=${i} alt="" />`);
         }), g.value.dialogVisible = !1, g.value.formData.images = []);
       });
-    }, r = m({
+    }, r = d({
       dialogVisible: !1,
       formData: {
         // 名称
@@ -100,23 +128,23 @@ const ia = /* @__PURE__ */ ce({
       },
       // 用于临时保存上传前的参数 { file: File }
       additionalData: {}
-    }), H = m(), K = () => {
-      var i;
-      (i = H.value) == null || i.validate((l) => {
-        var o, e;
-        l && ((e = d.value) == null || e.insertContent(`<audio controls data-name="${r.value.formData.name}" data-poster="${r.value.formData.cover[0]}" src="${(o = r.value.formData.file[0]) == null ? void 0 : o.url}"></audio>`), r.value.dialogVisible = !1, r.value.formData = {
+    }), E = d(), Z = () => {
+      var a;
+      (a = E.value) == null || a.validate((l) => {
+        var i, e;
+        l && ((e = u.value) == null || e.insertContent(`<audio controls data-name="${r.value.formData.name}" data-poster="${r.value.formData.cover[0]}" src="${(i = r.value.formData.file[0]) == null ? void 0 : i.url}"></audio>`), r.value.dialogVisible = !1, r.value.formData = {
           name: "",
           cover: [],
           file: []
         }, r.value.additionalData = {});
       });
-    }, Q = () => {
+    }, ee = () => {
       r.value.dialogVisible = !1, r.value.formData = {
         name: "",
         cover: [],
         file: []
       }, r.value.additionalData = {};
-    }, s = m({
+    }, s = d({
       dialogVisible: !1,
       formData: {
         // 文件
@@ -124,92 +152,92 @@ const ia = /* @__PURE__ */ ce({
       },
       // 用于临时保存上传前的参数 { file: File }
       additionalData: {}
-    }), W = m(), X = () => {
-      var i;
-      (i = W.value) == null || i.validate((l) => {
-        var o, e;
-        l && ((e = d.value) == null || e.insertContent(`<video controls controlslist="nodownload" src="${(o = s.value.formData.file[0]) == null ? void 0 : o.url}"></video>`), s.value.dialogVisible = !1, s.value.formData = {
+    }), I = d(), ae = () => {
+      var a;
+      (a = I.value) == null || a.validate((l) => {
+        var i, e;
+        l && ((e = u.value) == null || e.insertContent(`<video controls controlslist="nodownload" src="${(i = s.value.formData.file[0]) == null ? void 0 : i.url}"></video>`), s.value.dialogVisible = !1, s.value.formData = {
           file: []
         }, s.value.additionalData = {});
       });
-    }, Y = () => {
+    }, oe = () => {
       s.value.dialogVisible = !1, s.value.formData = {
         file: []
       }, s.value.additionalData = {};
-    }, Z = (i, l) => new Promise(async (o, e) => {
+    }, ie = (a, l) => new Promise(async (i, e) => {
       var p, c;
-      const t = await N(i, {
-        imageMaxSize: a.imageMaxSize,
-        imageAllowedType: a.imageAllowedType,
-        imageAllowedMineType: a.imageAllowedMineType,
-        imageMinWidth: a.imageMinWidth,
-        imageMinHeight: a.imageMinHeight,
-        imageMaxWidth: a.imageMaxWidth,
-        imageMaxHeight: a.imageMaxHeight
+      const t = await L(a, {
+        imageMaxSize: o.imageMaxSize,
+        imageAllowedType: o.imageAllowedType,
+        imageAllowedMineType: o.imageAllowedMineType,
+        imageMinWidth: o.imageMinWidth,
+        imageMinHeight: o.imageMinHeight,
+        imageMaxWidth: o.imageMaxWidth,
+        imageMaxHeight: o.imageMaxHeight
       });
       if (!t.success) {
         e(), setTimeout(() => {
-          var w, A, T;
-          (w = t.error) != null && w.size ? l.onError(`请上传大小不超过${a.imageMaxSize}M的图片`) : (A = t.error) != null && A.format ? l.onError(`请上传格式为${a.imageAllowedType.map((P) => P.toUpperCase()).join("、")}的图片`) : (T = t.error) != null && T.pixel && l.onError(`请上传像素不低于${a.imageMinWidth}*${a.imageMinHeight}且像素不高于${a.imageMaxWidth}*${a.imageMaxHeight}的图片`);
+          var A, w, T;
+          (A = t.error) != null && A.size ? l.onError(`请上传大小不超过${o.imageMaxSize}M的图片`) : (w = t.error) != null && w.format ? l.onError(`请上传格式为${o.imageAllowedType.map(($) => $.toUpperCase()).join("、")}的图片`) : (T = t.error) != null && T.pixel && l.onError(`请上传像素不低于${o.imageMinWidth}*${o.imageMinHeight}且像素不高于${o.imageMaxWidth}*${o.imageMaxHeight}的图片`);
         });
         return;
       }
-      const n = await q(i);
+      const n = await J(a);
       if (!n.success) {
         e(), setTimeout(() => {
           l.onError(n.errorMessage);
         });
         return;
       }
-      let u = i.name;
-      n.hasConversion && (u = `${(p = u.split(".")) == null ? void 0 : p[0]}.jpeg`);
-      const v = await ((c = f.value) == null ? void 0 : c.call(f, n.file, u, { extParameters: a.extParameters }));
+      let m = a.name;
+      n.hasConversion && (m = `${(p = m.split(".")) == null ? void 0 : p[0]}.jpeg`);
+      const v = await ((c = f.value) == null ? void 0 : c.call(f, n.file, m, { extParameters: o.extParameters }));
       if (!v.success) {
         e(), setTimeout(() => {
           l.onError(v.errorMessage);
         });
         return;
       }
-      o(v.url);
-    }), ee = M(() => a.imageAllowedMineType.map((i) => `.${i.split("/")[1]}`).join(",") || "");
-    async function B(i) {
-      var o, e;
-      const l = i.getElementsByTagName("img");
+      i(v.url);
+    }), te = M(() => o.imageAllowedMineType.map((a) => `.${a.split("/")[1]}`).join(",") || "");
+    async function O(a) {
+      var i, e;
+      const l = a.getElementsByTagName("img");
       for (let t of l) {
         const n = t.src;
         if (n.startsWith("http://") || n.startsWith("https://")) {
-          const u = await ve(n);
-          if (u.width < a.imageMinWidth && u.height < a.imageMinHeight || u.width > a.imageMaxWidth && u.height > a.imageMaxHeight) {
-            (o = t == null ? void 0 : t.remove) == null || o.call(t);
+          const m = await ye(n);
+          if (m.width < o.imageMinWidth && m.height < o.imageMinHeight || m.width > o.imageMaxWidth && m.height > o.imageMaxHeight) {
+            (i = t == null ? void 0 : t.remove) == null || i.call(t);
             return;
           }
           const v = n.split("."), p = v[v.length - 1].toLowerCase();
-          if (!a.imageAllowedType.includes(p)) {
+          if (!o.imageAllowedType.includes(p)) {
             (e = t == null ? void 0 : t.remove) == null || e.call(t);
             return;
           }
         }
       }
     }
-    const b = M(() => x([a.videoUploadOptions, y.videoUploadOptions]) || {}), _ = M(() => x([a.audioUploadOptions, y.audioUploadOptions]) || {}), $ = M(() => x([a.imgPondOptions, y.imgPondOptions]) || {}), C = M(
-      () => x([a.paste_preprocess, y.paste_preprocess], {
+    const b = M(() => x([o.videoUploadOptions, y.videoUploadOptions]) || {}), _ = M(() => x([o.audioUploadOptions, y.audioUploadOptions]) || {}), H = M(() => x([o.imgPondOptions, y.imgPondOptions]) || {}), D = M(
+      () => x([o.paste_preprocess, y.paste_preprocess], {
         type: Function
       })
-    ), D = M(
-      () => x([a.paste_postprocess, y.paste_postprocess], {
+    ), S = M(
+      () => x([o.paste_postprocess, y.paste_postprocess], {
         type: Function
       })
     ), f = M(
-      () => x([a.imageUploadHandle, y.imageUploadHandle], {
+      () => x([o.imageUploadHandle, y.imageUploadHandle], {
         type: Function
       })
     );
-    ge(() => {
-      const i = {
+    Me(() => {
+      const a = {
         // 设置语言
         language: "zh_CN",
         // 实例
-        target: k.value,
+        target: R.value,
         // 隐藏品牌
         branding: !1,
         // 隐藏右上角升级按钮
@@ -285,99 +313,99 @@ const ia = /* @__PURE__ */ ce({
         paste_webkit_styles: "all",
         paste_data_images: !0,
         // 粘贴前处理
-        paste_preprocess(o, e) {
+        paste_preprocess(i, e) {
           var t;
-          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>"), (t = C.value) == null || t.call(C, 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>"), (t = D.value) == null || t.call(D, i, e);
         },
         // 粘贴后处理(处理异步操作)
-        paste_postprocess(o, e) {
+        paste_postprocess(i, e) {
           var n;
           const t = e.node;
-          B(t), (n = D.value) == null || n.call(D, o, e);
+          O(t), (n = S.value) == null || n.call(S, i, e);
         },
-        images_upload_handler(o) {
+        images_upload_handler(i) {
           return new Promise(async (e, t) => {
-            var T, P, R, E, O;
-            const n = xe.service({ text: "上传中" });
-            let u = o.blob();
-            const v = o.filename(), p = await N(u, {
-              imageMaxSize: a.imageMaxSize,
-              imageAllowedType: a.imageAllowedType,
-              imageAllowedMineType: a.imageAllowedMineType,
-              imageMinWidth: a.imageMinWidth,
-              imageMinHeight: a.imageMinHeight,
-              imageMaxWidth: a.imageMaxWidth,
-              imageMaxHeight: a.imageMaxHeight
+            var T, $, F, N, q;
+            const n = W.service({ text: "上传中" });
+            let m = i.blob();
+            const v = i.filename(), p = await L(m, {
+              imageMaxSize: o.imageMaxSize,
+              imageAllowedType: o.imageAllowedType,
+              imageAllowedMineType: o.imageAllowedMineType,
+              imageMinWidth: o.imageMinWidth,
+              imageMinHeight: o.imageMinHeight,
+              imageMaxWidth: o.imageMaxWidth,
+              imageMaxHeight: o.imageMaxHeight
             });
             if (!p.success) {
               if (n == null || n.close(), (T = p.error) != null && T.size)
-                return t({ message: `请上传大小不超过${a.imageMaxSize}M的图片`, remove: !0 });
-              if ((P = p.error) != null && P.format)
-                return t({ message: `请上传格式为${a.imageAllowedType.map((I) => I.toUpperCase()).join("、")}的图片`, remove: !0 });
-              if ((R = p.error) != null && R.pixel)
-                return t({ message: `请上传像素不低于${a.imageMinWidth}*${a.imageMinHeight}且像素不高于${a.imageMaxWidth}*${a.imageMaxHeight}的图片`, remove: !0 });
+                return t({ message: `请上传大小不超过${o.imageMaxSize}M的图片`, remove: !0 });
+              if (($ = p.error) != null && $.format)
+                return t({ message: `请上传格式为${o.imageAllowedType.map((j) => j.toUpperCase()).join("、")}的图片`, remove: !0 });
+              if ((F = p.error) != null && F.pixel)
+                return t({ message: `请上传像素不低于${o.imageMinWidth}*${o.imageMinHeight}且像素不高于${o.imageMaxWidth}*${o.imageMaxHeight}的图片`, remove: !0 });
             }
-            const c = await q(u);
+            const c = await J(m);
             if (!c.success)
               return n == null || n.close(), t({ message: c == null ? void 0 : c.errorMessage, remove: !0 });
             if (!f.value)
               return n == null || n.close(), t({ message: "缺少图片上传配置", remove: !0 });
-            let w = o.filename();
-            c.hasConversion && (w = `${(E = v.split(".")) == null ? void 0 : E[0]}.jpeg`);
-            const A = await ((O = f.value) == null ? void 0 : O.call(f, c.file, w, { extParameters: a.extParameters }));
-            if (!A.success)
-              return n == null || n.close(), t({ message: A.errorMessage, remove: !0 });
-            n == null || n.close(), e(A.url);
+            let A = i.filename();
+            c.hasConversion && (A = `${(N = v.split(".")) == null ? void 0 : N[0]}.jpeg`);
+            const w = await ((q = f.value) == null ? void 0 : q.call(f, c.file, A, { extParameters: o.extParameters }));
+            if (!w.success)
+              return n == null || n.close(), t({ message: w.errorMessage, remove: !0 });
+            n == null || n.close(), e(w.url);
           });
         },
-        setup(o) {
-          o.ui.registry.addMenuItem("localImage", {
+        setup(i) {
+          i.ui.registry.addMenuItem("localImage", {
             text: "图片",
             icon: "image",
             onAction: () => {
               g.value.dialogVisible = !0, setTimeout(() => {
                 var t;
                 const e = (t = document == null ? void 0 : document.querySelector) == null ? void 0 : t.call(document, ".tinymce-editor-upload-image-dialog .el-upload__text > div");
-                e && (e.innerHTML = a.imageUploadTip || "上传");
+                e && (e.innerHTML = o.imageUploadTip || "上传");
               });
             }
-          }), o.ui.registry.addButton("localImage", {
+          }), i.ui.registry.addButton("localImage", {
             icon: "image",
             tooltip: "图片",
             onAction: () => {
               g.value.dialogVisible = !0, setTimeout(() => {
                 var t;
                 const e = (t = document == null ? void 0 : document.querySelector) == null ? void 0 : t.call(document, ".tinymce-editor-upload-image-dialog .el-upload__text > div");
-                e && (e.innerHTML = a.imageUploadTip || "上传");
+                e && (e.innerHTML = o.imageUploadTip || "上传");
               });
             }
-          }), a.audioEnable && (o.ui.registry.addMenuItem("localAudio", {
+          }), o.audioEnable && (i.ui.registry.addMenuItem("localAudio", {
             text: "音频",
             icon: "arrow-right",
             onAction: () => {
               r.value.dialogVisible = !0, setTimeout(() => {
                 var t;
                 const e = (t = document == null ? void 0 : document.querySelector) == null ? void 0 : t.call(document, ".tinymce-editor-upload-audio-dialog .el-upload__text > div");
-                e && (e.innerHTML = a.imageUploadTip || "上传");
+                e && (e.innerHTML = o.imageUploadTip || "上传");
               });
             }
-          }), o.ui.registry.addButton("localAudio", {
+          }), i.ui.registry.addButton("localAudio", {
             icon: "arrow-right",
             tooltip: "音频",
             onAction: () => {
               r.value.dialogVisible = !0, setTimeout(() => {
                 var t;
                 const e = (t = document == null ? void 0 : document.querySelector) == null ? void 0 : t.call(document, ".tinymce-editor-upload-audio-dialog .el-upload__text > div");
-                e && (e.innerHTML = a.imageUploadTip || "上传");
+                e && (e.innerHTML = o.imageUploadTip || "上传");
               });
             }
-          })), a.videoEnable && (o.ui.registry.addMenuItem("localVideo", {
+          })), o.videoEnable && (i.ui.registry.addMenuItem("localVideo", {
             text: "视频",
             icon: "embed",
             onAction: () => {
               s.value.dialogVisible = !0;
             }
-          }), o.ui.registry.addButton("localVideo", {
+          }), i.ui.registry.addButton("localVideo", {
             icon: "embed",
             tooltip: "视频",
             onAction: () => {
@@ -387,99 +415,99 @@ const ia = /* @__PURE__ */ ce({
         }
       }, l = x(
         [
-          a.options,
+          o.options,
           y.tinymceOptions,
-          i
+          a
         ],
         {
-          mergeFunction: (o, e) => (...t) => {
-            o(...t), e(...t);
+          mergeFunction: (i, e) => (...t) => {
+            i(...t), e(...t);
           },
           type: Object
         }
       );
-      j.init(l).then(([o]) => {
+      K.init(l).then(([i]) => {
         var e;
-        o && (o.customProps = { ...a }, o.on("change input Redo Undo SetContent", () => {
-          if (V.value) {
-            V.value = !1;
+        i && (i.customProps = { ...o }, i.on("change input Redo Undo SetContent", () => {
+          if (C.value) {
+            C.value = !1;
             return;
           }
-          U.value = !0, S("input", o.getContent()), S("update:modelValue", o.getContent());
-        }), (e = a.initComplete) == null || e.call(a, { editorIns: o }), d.value = o);
+          U.value = !0, z("input", i.getContent()), z("update:modelValue", i.getContent());
+        }), (e = o.initComplete) == null || e.call(o, { editorIns: i }), u.value = i);
       });
     });
-    const ae = () => {
-      var i, l;
-      return ((l = (i = _.value) == null ? void 0 : i.data) == null ? void 0 : l.call(i, { ...r.value.additionalData || {}, extParameters: a.extParameters })) || {};
-    }, ie = () => {
-      var i, l;
-      return ((l = (i = _.value) == null ? void 0 : i.headers) == null ? void 0 : l.call(i, { ...r.value.additionalData || {}, extParameters: a.extParameters })) || {};
-    }, oe = (i, l, o) => {
+    const le = () => {
+      var a, l;
+      return ((l = (a = _.value) == null ? void 0 : a.data) == null ? void 0 : l.call(a, { ...r.value.additionalData || {}, extParameters: o.extParameters })) || {};
+    }, ne = () => {
+      var a, l;
+      return ((l = (a = _.value) == null ? void 0 : a.headers) == null ? void 0 : l.call(a, { ...r.value.additionalData || {}, extParameters: o.extParameters })) || {};
+    }, re = (a, l, i) => {
       var t, n;
-      const e = (n = (t = _ == null ? void 0 : _.value) == null ? void 0 : t.handlerResponse) == null ? void 0 : n.call(t, i);
-      e != null && e.url ? o[o.length - 1].url = e.url : e != null && e.errorMessage && (h.error(e.errorMessage), o.splice(o.length - 1, 1)), r.value.formData.file = o;
-    }, te = (i, l) => new Promise((o, e) => {
-      const t = i.name.split(".").filter(Boolean).pop() ? i.name.split(".").filter(Boolean).pop() : "";
-      if (!a.audioAllowedType.includes(t.toUpperCase())) {
-        h.info(`请上传格式为${a.audioAllowedType.join("、")}的音频`), e();
+      const e = (n = (t = _ == null ? void 0 : _.value) == null ? void 0 : t.handlerResponse) == null ? void 0 : n.call(t, a);
+      e != null && e.url ? i[i.length - 1].url = e.url : e != null && e.errorMessage && (h.error(e.errorMessage), i.splice(i.length - 1, 1)), r.value.formData.file = i;
+    }, se = (a, l) => new Promise((i, e) => {
+      const t = a.name.split(".").filter(Boolean).pop() ? a.name.split(".").filter(Boolean).pop() : "";
+      if (!o.audioAllowedType.includes(t.toUpperCase())) {
+        h.info(`请上传格式为${o.audioAllowedType.join("、")}的音频`), e();
         return;
       }
-      if (i.size > a.audioMaxSize * 1024 * 1024) {
-        h.info(`请上传${a.audioMaxSize}M内的音频`), e();
+      if (a.size > o.audioMaxSize * 1024 * 1024) {
+        h.info(`请上传${o.audioMaxSize}M内的音频`), e();
         return;
       }
-      r.value.additionalData = { file: i }, o(!0);
-    }), le = (i, l) => {
+      r.value.additionalData = { file: a }, i(!0);
+    }), de = (a, l) => {
       r.value.formData.file = l;
-    }, ne = (i, l, o) => {
-      h.error("上传发生错误，请重试!"), r.value.formData.file = o;
-    }, re = () => {
-      var i, l;
-      return ((l = (i = b.value) == null ? void 0 : i.data) == null ? void 0 : l.call(i, { ...s.value.additionalData || {}, extParameters: a.extParameters })) || {};
-    }, se = () => {
-      var i, l;
-      return ((l = (i = b.value) == null ? void 0 : i.headers) == null ? void 0 : l.call(i, { ...s.value.additionalData || {}, extParameters: a.extParameters })) || {};
-    }, de = (i, l, o) => {
+    }, ue = (a, l, i) => {
+      h.error("上传发生错误，请重试!"), r.value.formData.file = i;
+    }, me = () => {
+      var a, l;
+      return ((l = (a = b.value) == null ? void 0 : a.data) == null ? void 0 : l.call(a, { ...s.value.additionalData || {}, extParameters: o.extParameters })) || {};
+    }, pe = () => {
+      var a, l;
+      return ((l = (a = b.value) == null ? void 0 : a.headers) == null ? void 0 : l.call(a, { ...s.value.additionalData || {}, extParameters: o.extParameters })) || {};
+    }, ce = (a, l, i) => {
       var t, n;
-      const e = (n = (t = b == null ? void 0 : b.value) == null ? void 0 : t.handlerResponse) == null ? void 0 : n.call(t, i);
-      e != null && e.url ? o[o.length - 1].url = e.url : e != null && e.errorMessage && (h.error(e.errorMessage), o.splice(o.length - 1, 1)), s.value.formData.file = o;
-    }, ue = (i, l) => new Promise((o, e) => {
-      const t = i.name.split(".").filter(Boolean).pop() ? i.name.split(".").filter(Boolean).pop() : "";
-      if (!a.videoAllowedType.includes(t.toUpperCase())) {
-        h.info(`请上传格式为${a.videoAllowedType.join("、")}的视频`), e();
+      const e = (n = (t = b == null ? void 0 : b.value) == null ? void 0 : t.handlerResponse) == null ? void 0 : n.call(t, a);
+      e != null && e.url ? i[i.length - 1].url = e.url : e != null && e.errorMessage && (h.error(e.errorMessage), i.splice(i.length - 1, 1)), s.value.formData.file = i;
+    }, ge = (a, l) => new Promise((i, e) => {
+      const t = a.name.split(".").filter(Boolean).pop() ? a.name.split(".").filter(Boolean).pop() : "";
+      if (!o.videoAllowedType.includes(t.toUpperCase())) {
+        h.info(`请上传格式为${o.videoAllowedType.join("、")}的视频`), e();
         return;
       }
-      if (i.size > a.videoMaxSize * 1024 * 1024) {
-        h.info(`请上传${a.videoMaxSize}M内的视频`), e();
+      if (a.size > o.videoMaxSize * 1024 * 1024) {
+        h.info(`请上传${o.videoMaxSize}M内的视频`), e();
         return;
       }
-      s.value.additionalData = { file: i }, o(!0);
-    }), me = (i, l) => {
+      s.value.additionalData = { file: a }, i(!0);
+    }), fe = (a, l) => {
       s.value.formData.file = l;
-    }, pe = (i, l, o) => {
-      h.error("上传发生错误，请重试!"), s.value.formData.file = o;
+    }, ve = (a, l, i) => {
+      h.error("上传发生错误，请重试!"), s.value.formData.file = i;
     };
-    return fe(() => {
-      var i;
-      (i = d.value) == null || i.destroy();
-    }), F(() => [a.disabled, d.value], () => {
-      var i, l;
-      (l = (i = d.value) == null ? void 0 : i.mode) == null || l.set(a.disabled ? "readonly" : "design");
-    }, { immediate: !0 }), F(
-      () => [a.value, a.modelValue, d.value],
+    return xe(() => {
+      var a;
+      (a = u.value) == null || a.destroy();
+    }), k(() => [o.disabled, u.value], () => {
+      var a, l;
+      (l = (a = u.value) == null ? void 0 : a.mode) == null || l.set(o.disabled ? "readonly" : "design");
+    }, { immediate: !0 }), k(
+      () => [o.value, o.modelValue, u.value],
       () => {
-        var i;
+        var a;
         if (U.value) {
           U.value = !1;
           return;
         }
-        V.value = !0, (i = d.value) == null || i.setContent(a.value ? a.value : a.modelValue ? a.modelValue : "");
+        C.value = !0, (a = u.value) == null || a.setContent(o.value ? o.value : o.modelValue ? o.modelValue : "");
       },
       { immediate: !0 }
-    ), { __sfc: !0, insRef: k, editorRef: d, preventSettingContent: U, preventUpdatingModelValue: V, uploadImage: g, uploadImageFormRef: z, onUploadImageClose: L, onUploadImageConfirm: J, uploadAudio: r, uploadAudioFormRef: H, onUploadAudioConfirm: K, onUploadAudioClose: Q, uploadVideo: s, uploadVideoFormRef: W, onUploadVideoConfirm: X, onUploadVideoClose: Y, onImageUploadUpload: Z, props: a, emits: S, imgPondAccept: ee, processPastedImage: B, mergeVideoUploadOptions: b, mergeAudioUploadOptions: _, mergeImgPondOptions: $, paste_preprocess: C, paste_postprocess: D, imageUploadHandle: f, getUploadAudioData: ae, getUploadAudioHeaders: ie, onUploadAudioSuccess: oe, onUploadAudioBeforeUpload: te, onUploadAudioRemove: le, onUploadAudioError: ne, getUploadVideoData: re, getUploadVideoHeaders: se, onUploadVideoSuccess: de, onUploadVideoBeforeUpload: ue, onUploadVideoRemove: me, onUploadVideoError: pe, ImgPond: he };
+    ), { __sfc: !0, insRef: R, editorRef: u, preventSettingContent: U, preventUpdatingModelValue: C, uploadImageImgPondRef: V, audioImageImgPondRef: P, uploadImage: g, uploadImageFormRef: B, onUploadImageClose: X, onUploadImageConfirm: Y, uploadAudio: r, uploadAudioFormRef: E, onUploadAudioConfirm: Z, onUploadAudioClose: ee, uploadVideo: s, uploadVideoFormRef: I, onUploadVideoConfirm: ae, onUploadVideoClose: oe, onImageUploadUpload: ie, props: o, emits: z, imgPondAccept: te, processPastedImage: O, mergeVideoUploadOptions: b, mergeAudioUploadOptions: _, mergeImgPondOptions: H, paste_preprocess: D, paste_postprocess: S, imageUploadHandle: f, getUploadAudioData: le, getUploadAudioHeaders: ne, onUploadAudioSuccess: re, onUploadAudioBeforeUpload: se, onUploadAudioRemove: de, onUploadAudioError: ue, getUploadVideoData: me, getUploadVideoHeaders: pe, onUploadVideoSuccess: ce, onUploadVideoBeforeUpload: ge, onUploadVideoRemove: fe, onUploadVideoError: ve, ImgPond: be };
   }
 });
 export {
-  ia as default
+  la as default
 };

package/es/index.js

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

package/es/style.css

@@ -1 +1 @@
-.tox-tinymce-aux{z-index:10000!important}.tox-statusbar__branding{display:none!important}.tinymce-editor-dialog .el-dialog{min-width:600px}.tinymce-editor-upload-image-dialog .uploadImageForm{display:flex;align-content:center}.tinymce-editor-upload-image-dialog .uploadImageForm .tips{margin-left:20px;display:flex;flex-direction:column}.tinymce-editor-upload-image-dialog .uploadImageForm .tips>span{margin-bottom:16px}.tinymce-editor-dialog .upload-hide .el-upload,.tinymce-editor-dialog .upload-hide .el-upload__tip{display:none}
+.tox-tinymce-aux{z-index:10000!important}.tox-statusbar__branding{display:none!important}.tinymce-editor-dialog .el-dialog{min-width:600px}.tinymce-editor-upload-image-dialog .uploadImageForm{display:flex;align-content:center}.tinymce-editor-upload-image-dialog .uploadImageForm .tips{margin-left:20px;display:flex;flex-direction:column}.tinymce-editor-upload-image-dialog .uploadImageForm .tips>span{margin-bottom:16px}.tinymce-editor-dialog .upload-hide .el-upload,.tinymce-editor-dialog .upload-hide .el-upload__tip{display:none}.el-loading-mask.is-fullscreen.tinymce-loading{z-index:3000!important}

package/es/util.d.ts

@@ -42,3 +42,7 @@ export declare function getImagePixel(src: string): Promise<{
     height: number;
     image: HTMLImageElement;
 }>;
+export declare function interceptImgPondBeforeAddFile(imgPondIns: any, options?: {
+    onStart?: () => void;
+    onEnd?: () => void;
+}): Promise<void>;

package/es/util.js

@@ -1,90 +1,127 @@
-import { compressAccurately as h } from "image-conversion";
-import w from "compressorjs";
-async function x(r, s) {
+import { compressAccurately as b } from "image-conversion";
+import x from "compressorjs";
+import A from "image-resizor";
+async function S(c, e) {
   const {
-    imageMaxSize: t = 30,
-    imageAllowedType: i = ["jpg", "jpeg", "png", "bmp", "heif", "gif", "webp"],
-    imageAllowedMineType: e = ["image/jpg", "image/jpeg", "image/png", "image/bmp", "image/heif", "image/heic", "image/gif", "image/webp"],
-    imageMinWidth: a = 60,
-    imageMinHeight: c = 60,
-    imageMaxWidth: o = 6e3,
-    imageMaxHeight: g = 6e3
-  } = s || {}, n = r, p = await l(n);
-  if (n.size > t * 1024 * 1024)
-    return { success: !1, error: { size: !0 }, errorMessage: `请上传大小不超过${t}M的图片` };
-  if (!e.includes(n.type))
-    return { success: !1, error: { format: !0 }, errorMessage: `请上传格式为${i.map((f) => f.toUpperCase()).join("、")}的图片` };
-  const m = await u(p);
-  return m.width < a && m.height < c || m.width > o && m.height > g ? { success: !1, error: { pixel: !0 }, errorMessage: `请上传像素不低于${a}*${c}且像素不高于${o}*${g}的图片` } : { success: !0, file: n };
+    imageMaxSize: i = 30,
+    imageAllowedType: a = ["jpg", "jpeg", "png", "bmp", "heif", "gif", "webp"],
+    imageAllowedMineType: r = ["image/jpg", "image/jpeg", "image/png", "image/bmp", "image/heif", "image/heic", "image/gif", "image/webp"],
+    imageMinWidth: t = 60,
+    imageMinHeight: g = 60,
+    imageMaxWidth: s = 6e3,
+    imageMaxHeight: l = 6e3
+  } = e || {}, f = c, n = await y(f);
+  if (f.size > i * 1024 * 1024)
+    return { success: !1, error: { size: !0 }, errorMessage: `请上传大小不超过${i}M的图片` };
+  if (!r.includes(f.type))
+    return { success: !1, error: { format: !0 }, errorMessage: `请上传格式为${a.map((u) => u.toUpperCase()).join("、")}的图片` };
+  const m = await d(n);
+  return m.width < t && m.height < g || m.width > s && m.height > l ? { success: !1, error: { pixel: !0 }, errorMessage: `请上传像素不低于${t}*${g}且像素不高于${s}*${l}的图片` } : { success: !0, file: f };
 }
-async function z(r) {
-  var g;
-  let s = r;
-  const t = await l(s);
-  let i = !1;
-  const e = {};
-  let a = "image-conversion", c = s.type;
-  ["image/heif", "image/heic", "image/webp"].includes(s.type) && (a = "compressor", e.convertTypes = [s.type], e.convertSize = 0, e.quality = 1, c = "image/jpeg", i = !0);
-  const o = 5 * 1024 * 1024;
-  if (s.size > o)
-    if (i) {
-      const n = await u(t);
-      a = "compressor", e.convertTypes = [s.type], e.convertSize = o, e.maxWidth = n.width * (o / s.size), e.quality = 0.92;
+async function $(c) {
+  var l;
+  let e = c;
+  const i = await y(e);
+  let a = !1;
+  const r = {};
+  let t = "image-conversion", g = e.type;
+  ["image/heif", "image/heic", "image/webp"].includes(e.type) && (t = "compressor", r.convertTypes = [e.type], r.convertSize = 0, r.quality = 1, g = "image/jpeg", a = !0);
+  const s = 5 * 1024 * 1024;
+  if (e.size > s)
+    if (a) {
+      const f = await d(i);
+      t = "compressor", r.convertTypes = [e.type], r.convertSize = s, r.maxWidth = f.width * (s / e.size), r.quality = 0.92;
     } else
-      a = "image-conversion", e.type = c, e.size = 5 * 1024;
-  if (Object.keys(e).length > 0) {
-    const n = await d(y(t), e, a);
-    if (n.success)
-      s = n.file;
+      t = "image-conversion", r.type = g, r.size = 5 * 1024;
+  if (Object.keys(r).length > 0) {
+    const f = await M(j(i), r, t);
+    if (f.success)
+      e = f.file;
     else
-      return { file: s, success: !1, hasConversion: i, errorMessage: (g = n.error) == null ? void 0 : g.message };
+      return { file: e, success: !1, hasConversion: a, errorMessage: (l = f.error) == null ? void 0 : l.message };
   }
-  return { file: s, hasConversion: i, success: !0 };
+  return { file: e, hasConversion: a, success: !0 };
 }
-function d(r, s = {}, t) {
-  return new Promise((i) => {
-    t === "compressor" ? new w(r, {
-      ...s,
-      success: async (e) => {
-        i({ success: !0, file: e });
+function M(c, e = {}, i) {
+  return new Promise((a) => {
+    i === "compressor" ? new x(c, {
+      ...e,
+      success: async (r) => {
+        a({ success: !0, file: r });
       },
-      error(e) {
-        i({ success: !1, error: e });
+      error(r) {
+        a({ success: !1, error: r });
       }
-    }) : h(r, s).then((e) => {
-      i({ success: !0, file: e });
-    }).catch((e) => {
-      i({ success: !1, error: (e == null ? void 0 : e.message) || "" });
+    }) : b(c, e).then((r) => {
+      a({ success: !0, file: r });
+    }).catch((r) => {
+      a({ success: !1, error: (r == null ? void 0 : r.message) || "" });
     });
   });
 }
-function u(r) {
-  return new Promise((s) => {
-    const t = new Image();
-    t.onload = function() {
-      s({ width: t.width, height: t.height, image: t });
-    }, t.src = r;
+function d(c) {
+  return new Promise((e) => {
+    const i = new Image();
+    i.onload = function() {
+      e({ width: i.width, height: i.height, image: i });
+    }, i.src = c;
   });
 }
-function y(r) {
-  const s = r.split(","), t = s[0].match(/:(.*?);/)[1], i = atob(s[1]);
-  let e = i.length;
-  const a = new Uint8Array(e);
-  for (; e--; )
-    a[e] = i.charCodeAt(e);
-  return new Blob([a], { type: t });
+function j(c) {
+  const e = c.split(","), i = e[0].match(/:(.*?);/)[1], a = atob(e[1]);
+  let r = a.length;
+  const t = new Uint8Array(r);
+  for (; r--; )
+    t[r] = a.charCodeAt(r);
+  return new Blob([t], { type: i });
 }
-function l(r) {
-  return new Promise((s, t) => {
-    const i = new FileReader();
-    i.onloadend = () => {
-      const e = i.result;
-      s(e);
-    }, i.onerror = t, i.readAsDataURL(r);
+function y(c) {
+  return new Promise((e, i) => {
+    const a = new FileReader();
+    a.onloadend = () => {
+      const r = a.result;
+      e(r);
+    }, a.onerror = i, a.readAsDataURL(c);
   });
 }
+async function C(c, e) {
+  const i = c == null ? void 0 : c.beforeAddFile;
+  c.beforeAddFile = (a) => {
+    var r;
+    return e != null && e.onStart && ((r = e == null ? void 0 : e.onStart) == null || r.call(e)), new Promise(async (t) => {
+      var g;
+      if (a.file.type === "image/heic" || a.file.type === "image/heif") {
+        const s = a.file.name, l = s == null ? void 0 : s.split(".");
+        l.pop();
+        const f = l.join(",");
+        new A(a.file, {
+          outputType: "image/jpeg",
+          quality: 0.9,
+          maxWidth: 1 / 0,
+          maxHeight: 1 / 0
+        }).init().then(async (n) => {
+          var h;
+          const m = await n.toBlob();
+          if (!m)
+            return t(!1);
+          const u = new File([m], `${f}.jpeg`, { type: m == null ? void 0 : m.type });
+          a.file = u, a.fileList[a.fileList.length - 1].raw = u;
+          const w = await i(a);
+          t(w), e != null && e.onEnd && ((h = e == null ? void 0 : e.onEnd) == null || h.call(e));
+        }).catch(() => {
+          var n;
+          t(!1), e != null && e.onEnd && ((n = e == null ? void 0 : e.onEnd) == null || n.call(e));
+        });
+      } else {
+        const s = await i(a);
+        t(s), e != null && e.onEnd && ((g = e == null ? void 0 : e.onEnd) == null || g.call(e));
+      }
+    });
+  };
+}
 export {
-  u as getImagePixel,
-  x as oneTravelImageCheck,
-  z as oneTravelImageCompressor
+  d as getImagePixel,
+  C as interceptImgPondBeforeAddFile,
+  S as oneTravelImageCheck,
+  $ as oneTravelImageCompressor
 };

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.14",
+  "version": "0.0.12-alpha.15",
   "private": false,
   "type": "module",
   "main": "es/index.js",
@@ -20,6 +20,7 @@
     "*.css"
   ],
   "dependencies": {
+    "image-resizor": "^1.1.3",
     "compressorjs": "^1.2.1",
     "image-conversion": "^2.1.1",
     "vue-global-config": "^0.2.6",

package/src/index.ts

@@ -2,7 +2,7 @@ import type { Editor, RawEditorOptions } from 'tinymce'
 import _TinymceEditor from './editor.vue'
 
 // 导入 ElementUI
-import { Button, Slider, Dialog, Upload, Tag, Form, FormItem, ButtonGroup, Loading } from 'element-ui'
+import { Button, Slider, Dialog, Upload, Tag, Form, FormItem, ButtonGroup, Loading, InputNumber } from 'element-ui'
 
 interface TinymceEditorGlobalOptions {
   /** 图片上传请求处理，需要返回图片地址 */
@@ -55,6 +55,7 @@ const TinymceEditor = Object.assign(_TinymceEditor, {
     app.use(Form)
     app.use(FormItem)
     app.use(ButtonGroup)
+    app.use(InputNumber)
     app.use(Loading)
 
     // 注册组件