@web-utils/component 2.0.14 → 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 d from "tinymce";
-import c 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 as u } from "@web-utils/core";
-import { n as p } from "../../chunks/5d4282fb.js";
-const m = {
+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,9 +428,152 @@ const m = {
   Spellcheck: "拼写检查",
   Caption: "标题",
   "Insert template": "插入模板"
-};
-var g = function() {
-  var e = this, a = e.$createElement, i = e._self._c || a;
+}, 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": !e.resize
@@ -415,8 +587,8 @@ var g = function() {
     },
     model: {
       value: e.val,
-      callback: function(r) {
-        e.val = r;
+      callback: function(a) {
+        e.val = a;
       },
       expression: "val"
     }
@@ -427,24 +599,18 @@ var g = function() {
     },
     attrs: {
       action: e.action,
-      headers: e.headers,
-      "before-upload": e.beforeUploadFile,
-      "on-success": e.onFileUploadSuccess,
+      "http-request": e.uploadImageFile,
       "show-file-list": !1,
-      data: {
-        unid: e.guid(),
-        type: e.fileLabel
-      },
       "auto-upload": "",
       accept: ".jpg,.jpeg,.png,.gif,.bmp"
     }
   }, [i("span")])], 1) : e._e();
-}, h = [];
-d.addI18n("zh_CN", m);
-const f = {
+}, W = [];
+D.addI18n("zh_CN", $);
+const V = {
   name: "TinymceWrapper",
   components: {
-    Editor: c
+    Editor: P
   },
   inject: {
     elForm: {
@@ -460,6 +626,9 @@ const f = {
       default: ""
     },
     resize: Boolean,
+    api: Function,
+    getHeader: Function,
+    getUploadUrl: Function,
     disabled: {
       type: Boolean,
       default: !1
@@ -483,49 +652,47 @@ const f = {
       type: String,
       default: "编辑"
     },
-    queryParams: Object,
-    getHeader: Function,
-    getUploadUrl: Function,
-    imageUrl: String
+    queryParams: Object
   },
   data() {
-    const a = ["fullscreen", "image", "wordcount"].join(","), i = this.buttons || [];
-    let r = this.toolbar || " | ";
-    return r = `bold italic underline | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect | removeformat |  | ${r}`, i && (r += ` ${i.map((o) => o.name).join(" ")}`), r += " | fullscreen", {
+    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: !0,
       init: {
-        setup: (o) => {
-          o.settings.dialog_title = this.dialogTitle, o.settings.show_types = this.showTypes, o.on("PreInit", (t) => {
-            t.target.dom.doc.body.style.fontFamily = "微软雅黑";
-          }), o.on("Blur", (t) => {
-            this.$emit("on-blur", t);
-          }), o.on("DialogShow", (t) => {
-            this.$emit("dialog-show", t);
-          }), o.on("DialogHide", (t) => {
-            this.$emit("dialog-hide", t);
-          }), i.forEach((t) => {
-            t.icon = ` ${t.icon}`;
-            const { onclick: s } = t;
-            o.addButton(t.name, {
-              ...t,
-              onclick: () => s(o)
-            });
+        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)
+            }));
           });
-          const n = {
+          const l = {
             icon: " el-icon-picture",
             name: "uploadImage",
             title: "上传图片",
             onclick: this.upload
           };
-          o.addButton(n.name, {
-            ...n,
-            onclick: () => n.onclick(o)
-          });
+          n.addButton(l.name, f(m({}, l), {
+            onclick: () => l.onclick(n)
+          }));
         },
-        toolbar: r,
+        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: !1,
@@ -535,8 +702,9 @@ const f = {
         menubar: !1,
         height: "100%",
         elementpath: !1,
-        plugins: `${a},${this.plugins}`,
-        font_formats: '微软雅黑="微软雅黑";宋体="宋体";黑体="黑体";仿宋="仿宋";楷体="楷体";隶书="隶书";幼圆="幼圆";Arial="Arial";'
+        plugins: `${t},${this.plugins}`,
+        font_formats: R,
+        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
       }
     };
   },
@@ -577,42 +745,249 @@ const f = {
     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: u,
     focus() {
       this.getEditor().focus();
     },
     upload() {
       this.$refs.uploader.$refs["upload-inner"].handleClick();
     },
-    beforeUploadFile() {
+    insertImage(e) {
+      this.getEditor().insertContent(`<img alt="图片" src="${this.replaceImageUrl(e)}"/>`);
+    },
+    replaceImageUrl(e) {
+      return e.replace("/var/local/data/merge", "");
+    }
+  }
+}, b = {};
+var Y = /* @__PURE__ */ F(
+  V,
+  G,
+  W,
+  !1,
+  X,
+  null,
+  null,
+  null
+);
+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);
+      });
     },
-    onFileUploadSuccess(e) {
-      this.getEditor().insertContent(
-        `<img alt="图片" src="${e.data.filePath.replace("/var/local/data/merge", this.imageUrl || "")}"/>`
-      );
+    insertContent(e) {
+      this.getEditor().insertContent(e);
     }
   }
-}, l = {};
-var y = /* @__PURE__ */ p(
-  f,
-  g,
-  h,
+}, v = {};
+var ee = /* @__PURE__ */ F(
+  Q,
+  J,
+  K,
   !1,
-  w,
+  te,
   null,
   null,
   null
 );
-function w(e) {
-  for (let a in l)
-    this[a] = l[a];
+function te(e) {
+  for (let t in v)
+    this[t] = v[t];
 }
-const D = /* @__PURE__ */ function() {
-  return y.exports;
+const fe = /* @__PURE__ */ function() {
+  return ee.exports;
 }();
 export {
-  D as default
+  fe as default
 };

package/tinymce-editor/style.css

@@ -0,0 +1 @@
+.tinymce-editor{height:100%}.tinymce-editor.none-resize .mce-resizehandle{display:none}.tinymce-editor .mce-tinymce{flex:1;height:calc(100% - 4px)}.tinymce-editor .mce-tinymce .mce-menubtn.mce-fixed-width span{width:60px}.tinymce-editor .mce-tinymce>.mce-container-body{flex-direction:column;height:100%;display:flex}.tinymce-editor .mce-tinymce>.mce-container-body>.mce-edit-area{flex:1}.tinymce-editor .fa-icon{font:14px/1 FontAwesome!important}.tinymce-editor .el-icon{font-family:element-icons,serif!important}.tinymce-editor .mce-label{display:none}.template-tag{color:#1e90ff;margin:0 10px;font-family:黑体,serif;font-style:italic;font-weight:700;cursor:help!important}.editor-shadow{text-align:left;word-break:normal;word-spacing:0;overflow-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #dcdfe6;border-radius:4px;width:100%;height:100%;padding:10px;font-family:微软雅黑,serif;font-size:16px;line-height:normal;position:relative;overflow:auto}.editor-shadow img{max-width:100%!important}.show-placeholder{position:relative}.show-placeholder:after{color:#a9a9a9;content:attr(placeholder);pointer-events:none;position:absolute;top:10px;left:11px}