@keyblade/tinymce-editor-vue2 0.0.12-alpha.4 → 0.0.12-alpha.41

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 s, Slider as i, Dialog as n, Upload as r, Tag as u, Form as m, FormItem as l, ButtonGroup as g, InputNumber as c, Loading as b } from "element-ui";
+import { blobToFile as I, generateUUID as y, getFileExtension as U, getImagePixel as a } from "./util.js";
+const d = {}, x = Object.assign(o, {
+  install: (e, t) => {
+    Object.assign(d, t || {}), e.use(s), e.use(i), e.use(n), e.use(r), e.use(u), e.use(m), e.use(l), e.use(g), e.use(c), e.use(b), e.component("KbTinymceEditor", o);
   }
 });
 export {
-  b as TinymceEditor,
-  b as default,
-  x as getImagePixel,
-  d as globalProps,
-  y as oneTravelImageCheck,
-  E as oneTravelImageCompressor
+  x as TinymceEditor,
+  I as blobToFile,
+  x as default,
+  y as generateUUID,
+  U as getFileExtension,
+  a as getImagePixel,
+  d as globalProps
 };

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}.tinymce-editor-loading-dialog{z-index:4000!important}.tinymce-editor-loading-dialog .el-dialog{margin-top:calc(50vh - 107px);width:388px;min-width:auto!important;height:214px;background-image:linear-gradient(-72deg,#d8faff,#fff);box-shadow:0 2px 20px #00000012;border-radius:16px}.tinymce-editor-loading-dialog .el-dialog .el-dialog__header{display:none!important}.tinymce-editor-loading-dialog .el-dialog .el-dialog__body{height:100%}.tinymce-editor-loading-dialog .el-dialog .el-dialog__body .tinymce-editor-loading-dialog-content{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.tinymce-editor-loading-dialog .el-dialog .el-dialog__body .tinymce-editor-loading-dialog-content span{margin-top:15px;font-size:16px;color:#1d2129;line-height:24px;font-weight:500}.tinymce-editor-spinner{width:60px;height:60px;position:relative;text-align:center;-webkit-animation:sk-rotate 2s infinite linear;animation:sk-rotate 2s infinite linear}.tinymce-editor-spinner-dot1,.tinymce-editor-spinner-dot2,.tinymce-editor-spinner-dot3{width:24px;height:24px;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.tinymce-editor-spinner-dot1{left:calc(50% - 12px);background-color:#5dff8e}.tinymce-editor-spinner-dot2{top:auto;bottom:0;right:0;-webkit-animation-delay:-1s;animation-delay:-1s;background-color:#21f4c7}.tinymce-editor-spinner-dot3{top:auto;bottom:0;left:0;-webkit-animation-delay:-1s;animation-delay:-1s;background-color:#98ff56}@-webkit-keyframes sk-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes sk-rotate{to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes sk-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}

package/es/types.d.ts

@@ -0,0 +1,79 @@
+/** 图片选项 */
+export interface ImageUploadOptions {
+    /** 图片上传组件最大数量 */
+    maxCount?: number;
+    /** 图片上传组件下方文字 */
+    tipText?: string;
+    /** 图片最大值(单位M，主要用于错误提示) */
+    maxSize?: number;
+    /** 图片允许的后缀类型(小写，如: png、jpg) */
+    allowedType?: string[];
+    /** 图片最小宽度 */
+    minWidth?: number;
+    /** 图片最小高度 */
+    minHeight?: number;
+    /** 图片最大宽度 */
+    maxWidth?: number;
+    /** 图片最大高度 */
+    maxHeight?: number;
+    /** 图片上传请求处理 */
+    handleRequest?: (file: File, filename: string, options?: {
+        extParameters?: Record<string, any>;
+    }) => Promise<{
+        success: boolean;
+        url?: string;
+        errorMessage?: string;
+    }>;
+}
+/** 视频选项 */
+export interface VideoUploadOptions {
+    /** 是否启用 */
+    enable?: boolean;
+    /** 最大尺寸(M) */
+    maxSize?: number;
+    /** 允许的后缀类型(小写，如: mp4) */
+    allowedType?: string[];
+    /** 上传地址(启用必传) */
+    action?: string;
+    /** 请求头 */
+    headers?: (parameters: {
+        file: File | Blob;
+        extParameters?: Record<string, any>;
+    }) => Record<string, any>;
+    /** 额外请求体 */
+    data?: (parameters: {
+        file: File | Blob;
+        extParameters?: Record<string, any>;
+    }) => Record<string, any>;
+    /** 响应处理(启用必传) */
+    handlerResponse?: (response: any) => {
+        url?: string;
+        errorMessage?: string;
+    };
+}
+/** 音频选项 */
+export interface AudioUploadOptions {
+    /** 是否启用 */
+    enable?: boolean;
+    /** 最大尺寸(M) */
+    maxSize?: number;
+    /** 允许的后缀类型(小写，如: mp4) */
+    allowedType?: string[];
+    /** 上传地址(启用必传) */
+    action?: string;
+    /** 请求头 */
+    headers?: (parameters: {
+        file: File | Blob;
+        extParameters?: Record<string, any>;
+    }) => Record<string, any>;
+    /** 额外请求体 */
+    data?: (parameters: {
+        file: File | Blob;
+        extParameters?: Record<string, any>;
+    }) => Record<string, any>;
+    /** 响应处理(启用必传) */
+    handlerResponse?: (response: any) => {
+        url?: string;
+        errorMessage?: string;
+    };
+}

package/es/util.d.ts

@@ -1,34 +1,3 @@
-/**
- * 一码游图片检测
- */
-export declare function oneTravelImageCheck(data: File | Blob, options?: {
-    imageMaxSize?: number;
-    imageAllowedMineType?: string[];
-    imageMinWidth?: number;
-    imageMinHeight?: number;
-    imageMaxWidth?: number;
-    imageMaxHeight?: number;
-}): Promise<{
-    /** 是否成功 */
-    success: boolean;
-    /** 处理完成的文件（有可能不需要处理） */
-    file?: File | Blob;
-    /** 失败 */
-    error?: {
-        size?: boolean;
-        format?: boolean;
-        pixel?: boolean;
-        message?: string;
-    };
-}>;
-/**
- * 一码游图片压缩
- */
-export declare function oneTravelImageCompressor(data: File | Blob): Promise<{
-    file: File | Blob;
-    success: boolean;
-    errorMessage?: string;
-}>;
 /**
  * 获取图片像素
  * @param src url或 base64
@@ -37,4 +6,16 @@ export declare function getImagePixel(src: string): Promise<{
     width: number;
     height: number;
     image: HTMLImageElement;
-}>;
+} | undefined>;
+/**
+ * 获取文件扩展名
+ * @param filename 文件名
+ */
+export declare function getFileExtension(filename: string): string;
+/**
+ * blob 转 file
+ * @param data
+ * @param filename
+ */
+export declare function blobToFile(data: File | Blob, filename: string): File;
+export declare function generateUUID(): string;

package/es/util.js

@@ -1,75 +1,27 @@
-import f from "compressorjs";
-async function d(r, e) {
-  const {
-    imageMaxSize: i = 30,
-    imageAllowedMineType: t = ["image/jpg", "image/jpeg", "image/png", "image/bmp", "image/heif", "image/heic", "image/gif", "image/webp"],
-    imageMinWidth: s = 60,
-    imageMinHeight: n = 60,
-    imageMaxWidth: o = 6e3,
-    imageMaxHeight: a = 6e3
-  } = e || {}, c = r, l = await u(c);
-  if (c.size > i * 1024 * 1024)
-    return { success: !1, error: { size: !0 } };
-  if (!t.includes(c.type))
-    return { success: !1, error: { format: !0 } };
-  const m = await g(l);
-  return m.width < s && m.height < n || m.width > o && m.height > a ? { success: !1, error: { pixel: !0 } } : { success: !0, file: c };
-}
-async function y(r) {
-  var o;
-  let e = r;
-  const i = await u(e), t = await g(i), s = {};
-  ["image/heif", "image/heic", "image/webp"].includes(e.type) && (s.convertTypes = [e.type], s.convertSize = 0);
-  const n = 5 * 1024 * 1024;
-  if (e.size > n && (s.convertTypes = [e.type], s.convertSize = n, s.maxWidth = t.width * (n / e.size)), Object.keys(s).length > 0) {
-    const a = await h(p(i), s);
-    if (a.success)
-      e = a.file;
-    else
-      return { file: e, success: !1, errorMessage: (o = a.error) == null ? void 0 : o.message };
-  }
-  return { file: e, success: !0 };
-}
-function h(r, e) {
-  return new Promise((i) => {
-    new f(r, {
-      ...e,
-      success: async (t) => {
-        i({ success: !0, file: t });
-      },
-      error(t) {
-        i({ success: !1, error: t });
-      }
-    });
+function o(e) {
+  return new Promise((n) => {
+    const t = new Image();
+    t.onload = function() {
+      n({ width: t.width, height: t.height, image: t }), t.remove();
+    }, t.onerror = function(i) {
+      n(void 0), t.remove();
+    }, t.src = e;
   });
 }
-function g(r) {
-  return new Promise((e) => {
-    const i = new Image();
-    i.onload = function() {
-      e({ width: i.width, height: i.height, image: i });
-    }, i.src = r;
-  });
+function r(e) {
+  const n = e.split(".");
+  return n ? n[n.length - 1] : "";
 }
-function p(r) {
-  const e = r.split(","), i = e[0].match(/:(.*?);/)[1], t = atob(e[1]);
-  let s = t.length;
-  const n = new Uint8Array(s);
-  for (; s--; )
-    n[s] = t.charCodeAt(s);
-  return new Blob([n], { type: i });
+function c(e, n) {
+  return e.name ? e : new File([e], n, { type: e.type });
 }
-function u(r) {
-  return new Promise((e, i) => {
-    const t = new FileReader();
-    t.onloadend = () => {
-      const s = t.result;
-      e(s);
-    }, t.onerror = i, t.readAsDataURL(r);
-  });
+function g() {
+  const e = Date.now().toString(16), n = Math.random().toString(16).slice(2);
+  return `${e}-${n}`;
 }
 export {
-  g as getImagePixel,
-  d as oneTravelImageCheck,
-  y as oneTravelImageCompressor
+  c as blobToFile,
+  g as generateUUID,
+  r as getFileExtension,
+  o as getImagePixel
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/tinymce-editor-vue2",
   "description": "KeyBlade Tinymce Editor Vue2",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "0.0.12-alpha.04",
+  "version": "0.0.12-alpha.41",
   "private": false,
   "type": "module",
   "main": "es/index.js",
@@ -20,10 +20,10 @@
     "*.css"
   ],
   "dependencies": {
-    "compressorjs": "^1.2.1",
     "vue-global-config": "^0.2.6",
     "tinymce": "^7.1.0",
-    "element-ui": "^2.15.14"
+    "element-ui": "^2.15.14",
+    "@keyblade/one-travel": "^2.0.10"
   },
   "peerDependencies": {
     "vue": "^2.7.0",

package/src/index.ts

@@ -1,41 +1,25 @@
-import type { Editor, RawEditorOptions } from 'tinymce'
+import type { 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'
+import { AudioUploadOptions, ImageUploadOptions, VideoUploadOptions } from './types'
 
 interface TinymceEditorGlobalOptions {
-  /** 图片上传请求处理，需要返回图片地址 */
-  imageUploadHandle?: (file: File | Blob, filename: string, options?: {
-    extParameters?: Record<string, any>
-  }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
-  /** 接着默认配置进行处理 */
-  paste_preprocess?: (editor: Editor, args: {
-    content: string;
-    readonly internal: boolean;
-  }) => void;
-  /** 接着默认配置进行处理 */
-  paste_postprocess?: (editor: Editor, args: {
-    node: HTMLElement;
-    readonly internal: boolean;
-  }) => void;
-  tinymceOptions?: RawEditorOptions;
-  /** imgPond 选项 */
-  imgPondOptions?: Record<string, any>
+  /** 富文本编辑器选项 */
+  options?: RawEditorOptions;
+
+  /** 图片上传选项 */
+  imageUploadOptions?: ImageUploadOptions;
+
+  /** imgPond选项 */
+  imgPondOptions?: Record<string, any>;
+
   /** 音频上传选项 */
-  audioUploadOptions?: {
-    action: string;
-    handlerResponse: (response: any) => { url?: string; errorMessage?: string }
-    headers?: Record<string, any>;
-    data?: Record<string, any>;
-  },
+  audioUploadOptions?: AudioUploadOptions;
+
   /** 视频上传选项 */
-   videoUploadOptions?: {
-    action: string;
-    handlerResponse: (response: any) => { url?: string; errorMessage?: string }
-    headers?: Record<string, any>;
-    data?: Record<string, any>;
-  }
+  videoUploadOptions?: VideoUploadOptions;
 }
 
 // 全局属性
@@ -55,6 +39,7 @@ const TinymceEditor = Object.assign(_TinymceEditor, {
     app.use(Form)
     app.use(FormItem)
     app.use(ButtonGroup)
+    app.use(InputNumber)
     app.use(Loading)
 
     // 注册组件