@web-utils/component 2.0.13 → 2.2.0

package/{dist/components/tinymce-wrapper/index.js → tinymce-editor/index.mjs}

@@ -1,16 +1,45 @@
+var k = Object.defineProperty, C = Object.defineProperties;
+var B = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var w = (e, t, i) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, m = (e, t) => {
+  for (var i in t || (t = {}))
+    T.call(t, i) && w(e, i, t[i]);
+  if (y)
+    for (var i of y(t))
+      _.call(t, i) && w(e, i, t[i]);
+  return e;
+}, f = (e, t) => C(e, B(t));
+var p = (e, t, i) => new Promise((a, o) => {
+  var n = (s) => {
+    try {
+      r(i.next(s));
+    } catch (d) {
+      o(d);
+    }
+  }, l = (s) => {
+    try {
+      r(i.throw(s));
+    } catch (d) {
+      o(d);
+    }
+  }, r = (s) => s.done ? a(s.value) : Promise.resolve(s.value).then(n, l);
+  r((i = i.apply(e, t)).next());
+});
 import "tinymce/skins/lightgray/skin.min.css";
-import tinymce from "tinymce";
-import Editor from "@tinymce/tinymce-vue";
+import D from "tinymce";
+import P 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 } from "@web-utils/core";
-import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
-const zhCN = {
+import { getFilePrefix as S, guid as A } from "@web-utils/core";
+import { n as F } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+const $ = {
   Redo: "重做",
   Undo: "撤销",
   Cut: "剪切",
@@ -399,56 +428,189 @@ const zhCN = {
   Spellcheck: "拼写检查",
   Caption: "标题",
   "Insert template": "插入模板"
-};
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.show ? _c("div", {
+}, R = '方正小标宋="方正小标宋";仿宋GB2312="仿宋GB2312";微软雅黑="微软雅黑";宋体="宋体";黑体="黑体";仿宋="仿宋";楷体="楷体";隶书="隶书";幼圆="幼圆";Arial="Arial";', E = `
+* {
+    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 U(e) {
+  let t;
+  const i = e.naturalHeight, a = document.createElement("canvas");
+  a.width = 1, a.height = i;
+  const o = a.getContext("2d");
+  o.drawImage(e, 0, 0);
+  try {
+    t = o.getImageData(0, 0, 1, i).data;
+  } catch (d) {
+    return console.log("Cannot check verticalSquash: CORS?"), 1;
+  }
+  let n = 0, l = i, r = i;
+  for (; r > n; )
+    t[(r - 1) * 4 + 3] === 0 ? l = r : n = r, r = l + n >> 1;
+  const s = r / i;
+  return s === 0 ? 1 : s;
+}
+function I(e) {
+  const t = atob(e.split(",")[1]), i = new ArrayBuffer(t.length), a = new Uint8Array(i);
+  for (let o = 0; o < t.length; o++)
+    a[o] = t.charCodeAt(o);
+  return i;
+}
+function L(e) {
+  const t = e.split(",")[0].split(":")[1].split(";")[0], i = I(e);
+  return new Blob([i], { type: t });
+}
+function x(e) {
+  const t = new DataView(e);
+  if (t.getUint16(0, !1) !== 65496)
+    return -2;
+  const i = t.byteLength;
+  let a = 2;
+  for (; a < i; ) {
+    const o = t.getUint16(a, !1);
+    if (a += 2, o === 65505) {
+      if (t.getUint32(a += 2, !1) !== 1165519206)
+        return -1;
+      const n = t.getUint16(a += 6, !1) === 18761;
+      a += t.getUint32(a + 4, n);
+      const l = t.getUint16(a, n);
+      a += 2;
+      for (let r = 0; r < l; r++)
+        if (t.getUint16(a + r * 12, n) === 274)
+          return t.getUint16(a + r * 12 + 8, n);
+    } else {
+      if ((o & 65280) !== 65280)
+        break;
+      a += t.getUint16(a, !1);
+    }
+  }
+  return -1;
+}
+function H(e, t, i) {
+  const a = e.width, o = e.height;
+  switch (i > 4 && (e.width = o, e.height = a), i) {
+    case 2:
+      t.translate(a, 0), t.scale(-1, 1);
+      break;
+    case 3:
+      t.translate(a, o), t.rotate(Math.PI);
+      break;
+    case 4:
+      t.translate(0, o), t.scale(1, -1);
+      break;
+    case 5:
+      t.rotate(0.5 * Math.PI), t.scale(1, -1);
+      break;
+    case 6:
+      t.rotate(0.5 * Math.PI), t.translate(0, -o);
+      break;
+    case 7:
+      t.rotate(0.5 * Math.PI), t.translate(a, -o), t.scale(-1, 1);
+      break;
+    case 8:
+      t.rotate(-0.5 * Math.PI), t.translate(-a, 0);
+      break;
+  }
+}
+function M(e) {
+  return e.split(",")[0].split(":")[1].split(";")[0];
+}
+function q(e) {
+  return `.${M(e).replace("image/", "")}`;
+}
+function O(e, t) {
+  return p(this, null, function* () {
+    return new Promise((i, a) => {
+      const o = new Image();
+      o.onload = function() {
+        const n = U(o), l = x(I(o.src)), r = document.createElement("canvas"), s = r.getContext("2d"), d = t.compress.width, g = t.compress.height;
+        let c = o.width, u = o.height;
+        c < u && u > g ? (c = parseInt(`${g * o.width / o.height}`), u = g) : c >= u && c > d && (u = parseInt(`${d * o.height / o.width}`), c = d), r.width = c, r.height = u, l > 0 && H(r, s, l), s.drawImage(o, 0, 0, c, u / n);
+        const h = r.toDataURL("image/jpeg", t.compress.quality);
+        /;base64,null/.test(h) || /;base64,$/.test(h) ? (t.onError(new Error(`Compress fail, dataURL is ${h}.`)), a(Error("图片压缩失败"))) : i(j(h, `${S(t.fileName)}.jpg`));
+      }, o.src = e;
+    });
+  });
+}
+function z(e, t) {
+  return p(this, null, function* () {
+    const i = yield N(e);
+    return O(i, m({ fileName: e.name }, t));
+  });
+}
+function N(e) {
+  return new Promise((t, i) => {
+    const a = new FileReader();
+    a.onload = function(o) {
+      t(o.target.result);
+    }, a.onerror = function(o) {
+      i(o);
+    }, a.readAsDataURL(e);
+  });
+}
+function j(e = "", t) {
+  const i = L(e);
+  return i.name = t || `image${q(e)}`, i;
+}
+var G = function() {
+  var e = this, t = e.$createElement, i = e._self._c || t;
+  return e.show ? i("div", {
     class: ["tinymce-editor", {
-      "none-resize": !_vm.resize
+      "none-resize": !e.resize
     }]
-  }, [_c("Editor", {
+  }, [i("Editor", {
     ref: "editor",
     attrs: {
-      "disabled": _vm.inputDisabled,
+      disabled: e.inputDisabled,
       "model-events": "change input undo redo SetContent",
-      "init": _vm.init
+      init: e.init
     },
     model: {
-      value: _vm.val,
-      callback: function($$v) {
-        _vm.val = $$v;
+      value: e.val,
+      callback: function(a) {
+        e.val = a;
       },
       expression: "val"
     }
-  }), _c("ElUpload", {
+  }), i("ElUpload", {
     ref: "uploader",
     staticStyle: {
-      "display": "none"
+      display: "none"
     },
     attrs: {
-      "action": _vm.action,
-      "headers": _vm.headers,
-      "before-upload": _vm.beforeUploadFile,
-      "on-success": _vm.onFileUploadSuccess,
-      "show-file-list": false,
-      "data": {
-        unid: _vm.guid(),
-        type: _vm.fileLabel
-      },
+      action: e.action,
+      "http-request": e.uploadImageFile,
+      "show-file-list": !1,
       "auto-upload": "",
-      "accept": ".jpg,.jpeg,.png,.gif,.bmp"
+      accept: ".jpg,.jpeg,.png,.gif,.bmp"
     }
-  }, [_c("span")])], 1) : _vm._e();
-};
-var staticRenderFns = [];
-const TinymceWrapper_vue_vue_type_style_index_0_lang = "";
-tinymce.addI18n("zh_CN", zhCN);
-const __vue2_script = {
+  }, [i("span")])], 1) : e._e();
+}, W = [];
+D.addI18n("zh_CN", $);
+const V = {
   name: "TinymceWrapper",
   components: {
-    Editor
+    Editor: P
   },
   inject: {
     elForm: {
@@ -464,13 +626,16 @@ const __vue2_script = {
       default: ""
     },
     resize: Boolean,
+    api: Function,
+    getHeader: Function,
+    getUploadUrl: Function,
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     showTypes: {
       type: Boolean,
-      default: true
+      default: !0
     },
     plugins: {
       type: [String, Array],
@@ -487,74 +652,59 @@ const __vue2_script = {
       type: String,
       default: "编辑"
     },
-    queryParams: Object,
-    getHeader: Function,
-    getUploadUrl: Function,
-    imageUrl: String
+    queryParams: Object
   },
   data() {
-    const plugins = ["fullscreen", "image", "wordcount"];
-    const defaultPlugins = plugins.join(",");
-    const buttons = this.buttons || [];
-    let toolbar = this.toolbar || " | ";
-    const defaultToolbar = "bold italic underline | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect | removeformat | ";
-    toolbar = `${defaultToolbar} | ${toolbar}`;
-    if (buttons) {
-      toolbar += ` ${buttons.map((value) => value.name).join(" ")}`;
-    }
-    toolbar += " | fullscreen";
-    return {
+    const t = ["fullscreen", "image", "wordcount", "paste"].join(","), i = this.buttons || [];
+    let a = this.toolbar || " | ";
+    return a = `undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect | removeformat |  | ${a}`, i && (a += ` ${i.map((n) => n.name).join(" ")}`), a += " | fullscreen", {
       val: "",
-      show: true,
+      show: !0,
       init: {
-        setup: (editor) => {
-          editor.settings.dialog_title = this.dialogTitle;
-          editor.settings.show_types = this.showTypes;
-          editor.on("PreInit", (event) => {
-            event.target.dom.doc.body.style.fontFamily = "微软雅黑";
-          });
-          editor.on("Blur", (event) => {
-            this.$emit("on-blur", event);
-          });
-          editor.on("DialogShow", (event) => {
-            this.$emit("dialog-show", event);
-          });
-          editor.on("DialogHide", (event) => {
-            this.$emit("dialog-hide", event);
+        setup: (n) => {
+          n.settings.dialog_title = this.dialogTitle, n.settings.show_types = this.showTypes, n.on("paste", (r) => {
+            const s = r.clipboardData || r.dataTransfer;
+            return !(this.processItems(r, s.items) || this.processItems(r, s.files));
+          }), n.on("PreInit", (r) => {
+            r.target.dom.doc.body.style.fontFamily = "微软雅黑";
+          }), n.on("Blur", (r) => {
+            this.$emit("on-blur", r);
+          }), n.on("DialogShow", (r) => {
+            this.$emit("dialog-show", r);
+          }), n.on("DialogHide", (r) => {
+            this.$emit("dialog-hide", r);
+          }), i.forEach((r) => {
+            r.icon = ` ${r.icon}`;
+            const { onclick: s } = r;
+            n.addButton(r.name, f(m({}, r), {
+              onclick: () => s(n)
+            }));
           });
-          buttons.forEach((btn) => {
-            btn.icon = ` ${btn.icon}`;
-            const { onclick } = btn;
-            editor.addButton(btn.name, {
-              ...btn,
-              onclick: () => onclick(editor)
-            });
-          });
-          const uploadButton = {
+          const l = {
             icon: " el-icon-picture",
             name: "uploadImage",
             title: "上传图片",
             onclick: this.upload
           };
-          editor.addButton(uploadButton.name, {
-            ...uploadButton,
-            onclick: () => uploadButton.onclick(editor)
-          });
+          n.addButton(l.name, f(m({}, l), {
+            onclick: () => l.onclick(n)
+          }));
         },
-        toolbar,
+        toolbar: a,
         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: E,
         fontname: "宋体",
         fontFamily: "宋体",
-        branding: false,
+        branding: !1,
         query_params: this.queryParams,
-        skin: false,
+        skin: !1,
         dialog_title: "",
-        menubar: false,
+        menubar: !1,
         height: "100%",
-        elementpath: false,
-        plugins: `${defaultPlugins},${this.plugins}`,
-        font_formats: '微软雅黑="微软雅黑";宋体="宋体";黑体="黑体";仿宋="仿宋";楷体="楷体";隶书="隶书";幼圆="幼圆";Arial="Arial";'
+        elementpath: !1,
+        plugins: `${t},${this.plugins}`,
+        font_formats: R,
+        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
       }
     };
   },
@@ -563,85 +713,281 @@ const __vue2_script = {
       return this.disabled || (this.elForm || {}).disabled;
     },
     fileLabel() {
-      if (this.prop) {
-        return this.prop;
-      } else if (this.elFormItem) {
-        return this.elFormItem.prop;
-      } else {
-        return "";
-      }
+      return this.prop ? this.prop : this.elFormItem ? this.elFormItem.prop : "";
     },
     action() {
-      var _a;
-      return (_a = this.getUploadUrl) == null ? void 0 : _a.call(this);
+      var e;
+      return (e = this.getUploadUrl) == null ? void 0 : e.call(this);
     },
     headers() {
-      var _a;
-      return (_a = this.getHeader) == null ? void 0 : _a.call(this);
+      var e;
+      return (e = this.getHeader) == null ? void 0 : e.call(this);
     }
   },
   watch: {
     value: {
-      immediate: true,
-      handler(newVal) {
-        this.val = newVal;
+      immediate: !0,
+      handler(e) {
+        this.val = e;
       }
     },
-    dialogTitle(newVal) {
-      if (this.getEditor()) {
-        this.getEditor().settings.dialog_title = newVal;
-      }
+    dialogTitle(e) {
+      this.getEditor() && (this.getEditor().settings.dialog_title = e);
     },
-    val(newVal) {
-      this.elForm && this.elFormItem && this.elForm.clearValidate([this.elFormItem.prop]);
-      this.$emit("input", newVal);
+    val(e) {
+      this.elForm && this.elFormItem && this.elForm.clearValidate([this.elFormItem.prop]), this.$emit("input", e);
     }
   },
   deactivated() {
-    this.show = false;
+    this.show = !1;
   },
   activated() {
-    this.show = true;
+    this.show = !0;
   },
   methods: {
+    uploadImageFile(o) {
+      return p(this, arguments, function* ({ file: e, onError: t, onProgress: i, onSuccess: a }) {
+        var n, l;
+        try {
+          this.loading = this.$loading({ text: "压缩中...", background: "rgba(0,0,0,0.2)" });
+          const r = yield z(e, {
+            compress: {
+              width: 1920,
+              height: 1600,
+              quality: 0.8
+            }
+          });
+          this.loading.text = "上传中...";
+          const s = yield this.api((n = this.getUploadUrl) == null ? void 0 : n.call(this), r, {
+            data: { unid: A(), type: this.fileLabel },
+            onprogress(d) {
+              i == null || i(d);
+            }
+          });
+          this.insertImage(s.data.filePath), a == null || a(s, e), this.$refs.uploader.clearFiles();
+        } catch (r) {
+          t == null || t(r);
+        }
+        (l = this.loading) == null || l.close();
+      });
+    },
+    processItems(e, t) {
+      let i = !1;
+      for (let a = 0; a < t.length; a++) {
+        const o = t[a];
+        if (/^image\/(jpeg|png|gif|bmp)$/.test(o.type)) {
+          const n = o.getAsFile ? o.getAsFile() : o;
+          this.uploadImageFile({ file: n }), e.preventDefault(), i = !0;
+        }
+      }
+      return i;
+    },
     getEditor() {
       return this.$refs.editor.editor;
     },
-    guid,
     focus() {
       this.getEditor().focus();
     },
     upload() {
       this.$refs.uploader.$refs["upload-inner"].handleClick();
     },
-    beforeUploadFile() {
+    insertImage(e) {
+      this.getEditor().insertContent(`<img alt="图片" src="${this.replaceImageUrl(e)}"/>`);
     },
-    onFileUploadSuccess(res) {
-      this.getEditor().insertContent(
-        `<img alt="图片" src="${res.data.filePath.replace("/var/local/data/merge", this.imageUrl || "")}"/>`
-      );
+    replaceImageUrl(e) {
+      return e.replace("/var/local/data/merge", "");
     }
   }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
+}, b = {};
+var Y = /* @__PURE__ */ F(
+  V,
+  G,
+  W,
+  !1,
+  X,
   null,
   null,
   null
 );
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
+function X(e) {
+  for (let t in b)
+    this[t] = b[t];
+}
+const Z = /* @__PURE__ */ function() {
+  return Y.exports;
+}();
+var J = function() {
+  var e = this, t = e.$createElement, i = e._self._c || t;
+  return i("div", {
+    staticStyle: {
+      "margin-bottom": "10px"
+    },
+    style: {
+      height: e.height
+    }
+  }, [e.lazy ? [e.focus && !e.inputDisabled ? i("TinymceWrapper", e._b({
+    ref: "editor",
+    attrs: {
+      "query-params": e.queryParams,
+      disabled: e.inputDisabled,
+      "show-types": e.showTypes,
+      value: e.value
+    },
+    on: {
+      "on-blur": e.onEditorBlur,
+      "dialog-show": function(a) {
+        e.hideOnBlur = !1;
+      },
+      "dialog-hide": function(a) {
+        e.hideOnBlur = !0;
+      },
+      input: function(a) {
+        return e.$emit("input", a);
+      }
+    }
+  }, "TinymceWrapper", e.$attrs, !1)) : i("div", {
+    staticClass: "editor-shadow",
+    class: [{
+      "show-placeholder": e.isEmpty
+    }],
+    style: {
+      cursor: e.inputDisabled ? "not-allowed" : "text"
+    },
+    attrs: {
+      placeholder: e.inputDisabled ? "" : e.placeholder
+    },
+    domProps: {
+      innerHTML: e._s(e.value)
+    },
+    on: {
+      click: e.onEditorShadowClick
+    }
+  })] : [e.inputDisabled ? i("div", {
+    staticClass: "editor-shadow",
+    class: [{
+      "show-placeholder": e.isEmpty
+    }],
+    style: {
+      cursor: e.inputDisabled ? "not-allowed" : "text"
+    },
+    attrs: {
+      placeholder: e.inputDisabled ? "" : e.placeholder
+    },
+    domProps: {
+      innerHTML: e._s(e.value)
+    }
+  }) : i("TinymceWrapper", e._b({
+    ref: "editor",
+    attrs: {
+      "query-params": e.queryParams,
+      disabled: e.inputDisabled,
+      value: e.value
+    },
+    on: {
+      "on-blur": e.onEditorBlur,
+      "dialog-show": function(a) {
+        e.hideOnBlur = !1;
+      },
+      "dialog-hide": function(a) {
+        e.hideOnBlur = !0;
+      },
+      input: function(a) {
+        return e.$emit("input", a);
+      }
+    }
+  }, "TinymceWrapper", e.$attrs, !1))]], 2);
+}, K = [];
+const Q = {
+  name: "TinymceEditor",
+  components: { TinymceWrapper: Z },
+  inject: {
+    elForm: {
+      default: ""
+    },
+    elFormItem: {
+      default: ""
+    }
+  },
+  props: {
+    disabled: Boolean,
+    lazy: {
+      type: Boolean,
+      default: !0
+    },
+    showTypes: {
+      type: Boolean,
+      default: !0
+    },
+    height: {
+      type: String,
+      default: "300px"
+    },
+    value: String,
+    placeholder: {
+      type: String,
+      default: "请输入..."
+    },
+    queryParams: Object
+  },
+  data() {
+    return {
+      hideOnBlur: !0,
+      focus: !1
+    };
+  },
+  computed: {
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    isEmpty() {
+      return !this.value;
+    }
+  },
+  watch: {
+    hideOnBlur(e) {
+      e && this.onEditorShadowClick();
+    }
+  },
+  methods: {
+    onEditorBlur() {
+      this.inputDisabled || this.hideOnBlur && (this.focus = !1);
+    },
+    getEditor() {
+      return this.$refs.editor.$refs.editor.editor;
+    },
+    onEditorShadowClick() {
+      return p(this, null, function* () {
+        if (this.inputDisabled)
+          return;
+        this.focus = !0, yield this.$nextTick();
+        const e = this.getEditor();
+        e.focus();
+        const t = e.getBody();
+        e.selection.setCursorLocation(t, t.childNodes.length);
+      });
+    },
+    insertContent(e) {
+      this.getEditor().insertContent(e);
+    }
   }
+}, v = {};
+var ee = /* @__PURE__ */ F(
+  Q,
+  J,
+  K,
+  !1,
+  te,
+  null,
+  null,
+  null
+);
+function te(e) {
+  for (let t in v)
+    this[t] = v[t];
 }
-const TinymceWrapper = /* @__PURE__ */ function() {
-  return __component__.exports;
+const fe = /* @__PURE__ */ function() {
+  return ee.exports;
 }();
 export {
-  TinymceWrapper as default
+  fe as default
 };