@web-utils/component 2.8.0 → 2.8.1

package/tinymce-wrapper/index.mjs

@@ -1,28 +1,45 @@
-var m = Object.defineProperty, g = Object.defineProperties;
-var h = Object.getOwnPropertyDescriptors;
-var d = Object.getOwnPropertySymbols;
-var f = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
-var c = (e, t, o) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, l = (e, t) => {
-  for (var o in t || (t = {}))
-    f.call(t, o) && c(e, o, t[o]);
-  if (d)
-    for (var o of d(t))
-      y.call(t, o) && c(e, o, t[o]);
-  return e;
-}, s = (e, t) => g(e, h(t));
+var I = Object.defineProperty, v = Object.defineProperties;
+var k = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, A = Object.prototype.propertyIsEnumerable;
+var w = (t, e, a) => e in t ? I(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, m = (t, e) => {
+  for (var a in e || (e = {}))
+    C.call(e, a) && w(t, a, e[a]);
+  if (y)
+    for (var a of y(e))
+      A.call(e, a) && w(t, a, e[a]);
+  return t;
+}, f = (t, e) => v(t, k(e));
+var g = (t, e, a) => new Promise((i, n) => {
+  var r = (s) => {
+    try {
+      o(a.next(s));
+    } catch (c) {
+      n(c);
+    }
+  }, l = (s) => {
+    try {
+      o(a.throw(s));
+    } catch (c) {
+      n(c);
+    }
+  }, o = (s) => s.done ? i(s.value) : Promise.resolve(s.value).then(r, l);
+  o((a = a.apply(t, e)).next());
+});
 import "tinymce/skins/lightgray/skin.min.css";
-import w from "tinymce";
-import b from "@tinymce/tinymce-vue";
+import P from "tinymce";
+import R from "@tinymce/tinymce-vue";
 import "tinymce/themes/modern/theme";
 import "tinymce/plugins/contextmenu";
 import "tinymce/plugins/wordcount";
+import "tinymce/plugins/paste";
 import "tinymce/plugins/image";
 import "tinymce/plugins/fullscreen";
 import "tinymce/plugins/preview";
 import "tinymce/plugins/imagetools";
-import { guid as v } from "@web-utils/core";
-import { n as F } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-const k = {
+import { getFilePrefix as T, guid as S } from "@web-utils/core";
+import { n as U } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+const B = {
   Redo: "重做",
   Undo: "撤销",
   Cut: "剪切",
@@ -411,52 +428,189 @@ const k = {
   Spellcheck: "拼写检查",
   Caption: "标题",
   "Insert template": "插入模板"
-};
-var C = function() {
-  var e = this, t = e.$createElement, o = e._self._c || t;
-  return e.show ? o("div", {
+}, D = '方正小标宋="方正小标宋";仿宋GB2312="仿宋GB2312";微软雅黑="微软雅黑";宋体="宋体";黑体="黑体";仿宋="仿宋";楷体="楷体";隶书="隶书";幼圆="幼圆";Arial="Arial";', L = `
+* {
+    margin: 0;
+    padding: 0
+}
+
+body {
+    font-family: 微软雅黑, sans-serif;
+    padding: 10px;
+    font-size: 18px
+}
+
+.template-tag {
+    font-style: italic;
+    color: #1e90ff;
+    margin: 0 10px;
+    font-weight: bold;
+    cursor: help !important;
+    font-family: 黑体, serif;
+}
+
+.mce-content-body img {
+    max-width: 100%;
+}
+`;
+function _(t) {
+  let e;
+  const a = t.naturalHeight, i = document.createElement("canvas");
+  i.width = 1, i.height = a;
+  const n = i.getContext("2d");
+  n.drawImage(t, 0, 0);
+  try {
+    e = n.getImageData(0, 0, 1, a).data;
+  } catch (c) {
+    return console.log("Cannot check verticalSquash: CORS?"), 1;
+  }
+  let r = 0, l = a, o = a;
+  for (; o > r; )
+    e[(o - 1) * 4 + 3] === 0 ? l = o : r = o, o = l + r >> 1;
+  const s = o / a;
+  return s === 0 ? 1 : s;
+}
+function F(t) {
+  const e = atob(t.split(",")[1]), a = new ArrayBuffer(e.length), i = new Uint8Array(a);
+  for (let n = 0; n < e.length; n++)
+    i[n] = e.charCodeAt(n);
+  return a;
+}
+function H(t) {
+  const e = t.split(",")[0].split(":")[1].split(";")[0], a = F(t);
+  return new Blob([a], { type: e });
+}
+function x(t) {
+  const e = new DataView(t);
+  if (e.getUint16(0, !1) !== 65496)
+    return -2;
+  const a = e.byteLength;
+  let i = 2;
+  for (; i < a; ) {
+    const n = e.getUint16(i, !1);
+    if (i += 2, n === 65505) {
+      if (e.getUint32(i += 2, !1) !== 1165519206)
+        return -1;
+      const r = e.getUint16(i += 6, !1) === 18761;
+      i += e.getUint32(i + 4, r);
+      const l = e.getUint16(i, r);
+      i += 2;
+      for (let o = 0; o < l; o++)
+        if (e.getUint16(i + o * 12, r) === 274)
+          return e.getUint16(i + o * 12 + 8, r);
+    } else {
+      if ((n & 65280) !== 65280)
+        break;
+      i += e.getUint16(i, !1);
+    }
+  }
+  return -1;
+}
+function E(t, e, a) {
+  const i = t.width, n = t.height;
+  switch (a > 4 && (t.width = n, t.height = i), a) {
+    case 2:
+      e.translate(i, 0), e.scale(-1, 1);
+      break;
+    case 3:
+      e.translate(i, n), e.rotate(Math.PI);
+      break;
+    case 4:
+      e.translate(0, n), e.scale(1, -1);
+      break;
+    case 5:
+      e.rotate(0.5 * Math.PI), e.scale(1, -1);
+      break;
+    case 6:
+      e.rotate(0.5 * Math.PI), e.translate(0, -n);
+      break;
+    case 7:
+      e.rotate(0.5 * Math.PI), e.translate(i, -n), e.scale(-1, 1);
+      break;
+    case 8:
+      e.rotate(-0.5 * Math.PI), e.translate(-i, 0);
+      break;
+  }
+}
+function $(t) {
+  return t.split(",")[0].split(":")[1].split(";")[0];
+}
+function M(t) {
+  return `.${$(t).replace("image/", "")}`;
+}
+function z(t, e) {
+  return g(this, null, function* () {
+    return new Promise((a, i) => {
+      const n = new Image();
+      n.onload = function() {
+        const r = _(n), l = x(F(n.src)), o = document.createElement("canvas"), s = o.getContext("2d"), c = e.compress.width, h = e.compress.height;
+        let d = n.width, p = n.height;
+        d < p && p > h ? (d = parseInt(`${h * n.width / n.height}`), p = h) : d >= p && d > c && (p = parseInt(`${c * n.height / n.width}`), d = c), o.width = d, o.height = p, l > 0 && E(o, s, l), s.drawImage(n, 0, 0, d, p / r);
+        const u = o.toDataURL("image/jpeg", e.compress.quality);
+        /;base64,null/.test(u) || /;base64,$/.test(u) ? (e.onError(new Error(`Compress fail, dataURL is ${u}.`)), i(Error("图片压缩失败"))) : a(G(u, `${T(e.fileName)}.jpg`));
+      }, n.src = t;
+    });
+  });
+}
+function q(t, e) {
+  return g(this, null, function* () {
+    const a = yield N(t);
+    return z(a, m({ fileName: t.name }, e));
+  });
+}
+function N(t) {
+  return new Promise((e, a) => {
+    const i = new FileReader();
+    i.onload = function(n) {
+      e(n.target.result);
+    }, i.onerror = function(n) {
+      a(n);
+    }, i.readAsDataURL(t);
+  });
+}
+function G(t = "", e) {
+  const a = H(t);
+  return a.name = e || `image${M(t)}`, a;
+}
+var j = function() {
+  var t = this, e = t.$createElement, a = t._self._c || e;
+  return t.show ? a("div", {
     class: ["tinymce-editor", {
-      "none-resize": !e.resize
+      "none-resize": !t.resize
     }]
-  }, [o("Editor", {
+  }, [a("Editor", {
     ref: "editor",
     attrs: {
-      disabled: e.inputDisabled,
+      disabled: t.inputDisabled,
       "model-events": "change input undo redo SetContent",
-      init: e.init
+      init: t.init
     },
     model: {
-      value: e.val,
-      callback: function(a) {
-        e.val = a;
+      value: t.val,
+      callback: function(i) {
+        t.val = i;
       },
       expression: "val"
     }
-  }), o("ElUpload", {
+  }), a("ElUpload", {
     ref: "uploader",
     staticStyle: {
       display: "none"
     },
     attrs: {
-      action: e.action,
-      headers: e.headers,
-      "before-upload": e.beforeUploadFile,
-      "on-success": e.onFileUploadSuccess,
+      action: t.action,
+      "http-request": t.uploadImageFile,
       "show-file-list": !1,
-      data: {
-        unid: e.guid(),
-        type: e.fileLabel
-      },
       "auto-upload": "",
       accept: ".jpg,.jpeg,.png,.gif,.bmp"
     }
-  }, [o("span")])], 1) : e._e();
-}, I = [];
-w.addI18n("zh_CN", k);
-const S = {
+  }, [a("span")])], 1) : t._e();
+}, O = [];
+P.addI18n("zh_CN", B);
+const V = {
   name: "TinymceWrapper",
   components: {
-    Editor: b
+    Editor: R
   },
   inject: {
     elForm: {
@@ -472,6 +626,9 @@ const S = {
       default: ""
     },
     resize: Boolean,
+    api: Function,
+    getHeader: Function,
+    getUploadUrl: Function,
     disabled: {
       type: Boolean,
       default: !1
@@ -495,47 +652,47 @@ const S = {
       type: String,
       default: "编辑"
     },
-    queryParams: Object,
-    getHeader: Function,
-    getUploadUrl: Function,
-    imageUrl: String
+    queryParams: Object
   },
   data() {
-    const t = ["fullscreen", "image", "wordcount"].join(","), o = this.buttons || [];
-    let a = this.toolbar || " | ";
-    return a = `bold italic underline | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect | removeformat |  | ${a}`, o && (a += ` ${o.map((r) => r.name).join(" ")}`), a += " | fullscreen", {
+    const e = ["fullscreen", "image", "wordcount", "paste"].join(","), a = this.buttons || [];
+    let i = this.toolbar || " | ";
+    return i = `undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect | removeformat |  | ${i}`, a && (i += ` ${a.map((r) => r.name).join(" ")}`), i += " | fullscreen", {
       val: "",
       show: !0,
       init: {
         setup: (r) => {
-          r.settings.dialog_title = this.dialogTitle, r.settings.show_types = this.showTypes, r.on("PreInit", (i) => {
-            i.target.dom.doc.body.style.fontFamily = "微软雅黑";
-          }), r.on("Blur", (i) => {
-            this.$emit("on-blur", i);
-          }), r.on("DialogShow", (i) => {
-            this.$emit("dialog-show", i);
-          }), r.on("DialogHide", (i) => {
-            this.$emit("dialog-hide", i);
-          }), o.forEach((i) => {
-            i.icon = ` ${i.icon}`;
-            const { onclick: p } = i;
-            r.addButton(i.name, s(l({}, i), {
-              onclick: () => p(r)
+          r.settings.dialog_title = this.dialogTitle, r.settings.show_types = this.showTypes, r.on("paste", (o) => {
+            const s = o.clipboardData || o.dataTransfer;
+            return !(this.processItems(o, s.items) || this.processItems(o, s.files));
+          }), r.on("PreInit", (o) => {
+            o.target.dom.doc.body.style.fontFamily = "微软雅黑";
+          }), r.on("Blur", (o) => {
+            this.$emit("on-blur", o);
+          }), r.on("DialogShow", (o) => {
+            this.$emit("dialog-show", o);
+          }), r.on("DialogHide", (o) => {
+            this.$emit("dialog-hide", o);
+          }), a.forEach((o) => {
+            o.icon = ` ${o.icon}`;
+            const { onclick: s } = o;
+            r.addButton(o.name, f(m({}, o), {
+              onclick: () => s(r)
             }));
           });
-          const n = {
+          const l = {
             icon: " el-icon-picture",
             name: "uploadImage",
             title: "上传图片",
             onclick: this.upload
           };
-          r.addButton(n.name, s(l({}, n), {
-            onclick: () => n.onclick(r)
+          r.addButton(l.name, f(m({}, l), {
+            onclick: () => l.onclick(r)
           }));
         },
-        toolbar: a,
+        toolbar: i,
         placeholder: "在这里输入文字",
-        content_style: "*{margin:0;padding:0} body{font-family: 微软雅黑, sans-serif;padding:10px; font-size: 18px} .template-tag {font-style: italic;color: #1e90ff;margin: 0 10px;font-weight: bold;cursor: help !important;font-family: 黑体,serif;}",
+        content_style: L,
         fontname: "宋体",
         fontFamily: "宋体",
         branding: !1,
@@ -545,8 +702,9 @@ const S = {
         menubar: !1,
         height: "100%",
         elementpath: !1,
-        plugins: `${t},${this.plugins}`,
-        font_formats: '微软雅黑="微软雅黑";宋体="宋体";黑体="黑体";仿宋="仿宋";楷体="楷体";隶书="隶书";幼圆="幼圆";Arial="Arial";'
+        plugins: `${e},${this.plugins}`,
+        font_formats: D,
+        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
       }
     };
   },
@@ -558,26 +716,26 @@ const S = {
       return this.prop ? this.prop : this.elFormItem ? this.elFormItem.prop : "";
     },
     action() {
-      var e;
-      return (e = this.getUploadUrl) == null ? void 0 : e.call(this);
+      var t;
+      return (t = this.getUploadUrl) == null ? void 0 : t.call(this);
     },
     headers() {
-      var e;
-      return (e = this.getHeader) == null ? void 0 : e.call(this);
+      var t;
+      return (t = this.getHeader) == null ? void 0 : t.call(this);
     }
   },
   watch: {
     value: {
       immediate: !0,
-      handler(e) {
-        this.val = e;
+      handler(t) {
+        this.val = t;
       }
     },
-    dialogTitle(e) {
-      this.getEditor() && (this.getEditor().settings.dialog_title = e);
+    dialogTitle(t) {
+      this.getEditor() && (this.getEditor().settings.dialog_title = t);
     },
-    val(e) {
-      this.elForm && this.elFormItem && this.elForm.clearValidate([this.elFormItem.prop]), this.$emit("input", e);
+    val(t) {
+      this.elForm && this.elFormItem && this.elForm.clearValidate([this.elFormItem.prop]), this.$emit("input", t);
     }
   },
   deactivated() {
@@ -587,42 +745,77 @@ const S = {
     this.show = !0;
   },
   methods: {
+    uploadImageFile(n) {
+      return g(this, arguments, function* ({ file: t, onError: e, onProgress: a, onSuccess: i }) {
+        var r, l;
+        try {
+          this.loading = this.$loading({ text: "压缩中...", background: "rgba(0,0,0,0.2)" });
+          const o = yield q(t, {
+            compress: {
+              width: 1920,
+              height: 1600,
+              quality: 0.8
+            }
+          });
+          this.loading.text = "上传中...";
+          const s = yield this.api((r = this.getUploadUrl) == null ? void 0 : r.call(this), o, {
+            data: { unid: S(), type: this.fileLabel },
+            onprogress(c) {
+              a == null || a(c);
+            }
+          });
+          this.insertImage(s.data.filePath), i == null || i(s, t), this.$refs.uploader.clearFiles();
+        } catch (o) {
+          e == null || e(o);
+        }
+        (l = this.loading) == null || l.close();
+      });
+    },
+    processItems(t, e) {
+      let a = !1;
+      for (let i = 0; i < e.length; i++) {
+        const n = e[i];
+        if (/^image\/(jpeg|png|gif|bmp)$/.test(n.type)) {
+          const r = n.getAsFile ? n.getAsFile() : n;
+          this.uploadImageFile({ file: r }), t.preventDefault(), a = !0;
+        }
+      }
+      return a;
+    },
     getEditor() {
       return this.$refs.editor.editor;
     },
-    guid: v,
     focus() {
       this.getEditor().focus();
     },
     upload() {
       this.$refs.uploader.$refs["upload-inner"].handleClick();
     },
-    beforeUploadFile() {
+    insertImage(t) {
+      this.getEditor().insertContent(`<img alt="图片" src="${this.replaceImageUrl(t)}"/>`);
     },
-    onFileUploadSuccess(e) {
-      this.getEditor().insertContent(
-        `<img alt="图片" src="${e.data.filePath.replace("/var/local/data/merge", this.imageUrl || "")}"/>`
-      );
+    replaceImageUrl(t) {
+      return t.replace("/var/local/data/merge", "");
     }
   }
-}, u = {};
-var A = /* @__PURE__ */ F(
-  S,
-  C,
-  I,
+}, b = {};
+var W = /* @__PURE__ */ U(
+  V,
+  j,
+  O,
   !1,
-  P,
+  Y,
   null,
   null,
   null
 );
-function P(e) {
-  for (let t in u)
-    this[t] = u[t];
+function Y(t) {
+  for (let e in b)
+    this[e] = b[e];
 }
-const G = /* @__PURE__ */ function() {
-  return A.exports;
+const ce = /* @__PURE__ */ function() {
+  return W.exports;
 }();
 export {
-  G as default
+  ce as default
 };