@keyblade/tinymce-editor-vue2 0.0.10 → 0.0.12-alpha.10

package/es/index.js

@@ -1,12 +1,17 @@
 import './style.css';
 import o from "./editor.vue.js";
-const n = {}, c = Object.assign(o, {
-  install: (t, i) => {
-    Object.assign(n, i || {}), t.component("KbTinymceEditor", o);
+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);
   }
 });
 export {
-  c as TinymceEditor,
-  c as default,
-  n as globalProps
+  b as TinymceEditor,
+  b as default,
+  x as getImagePixel,
+  d as globalProps,
+  y as oneTravelImageCheck,
+  E as oneTravelImageCompressor
 };

package/es/style.css

@@ -1 +1 @@
-.tox-tinymce-aux{z-index:10000!important}.tox-statusbar__branding{display:none!important}
+.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}

package/es/util.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 一码游图片检测
+ */
+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;
+    hasConversion: boolean;
+    success: boolean;
+    errorMessage?: string;
+}>;
+/**
+ * 获取图片像素
+ * @param src url或 base64
+ */
+export declare function getImagePixel(src: string): Promise<{
+    width: number;
+    height: number;
+    image: HTMLImageElement;
+}>;

package/es/util.js

@@ -0,0 +1,77 @@
+import f from "compressorjs";
+async function d(n, e) {
+  const {
+    imageMaxSize: i = 30,
+    imageAllowedMineType: s = ["image/jpg", "image/jpeg", "image/png", "image/bmp", "image/heif", "image/heic", "image/gif", "image/webp"],
+    imageMinWidth: t = 60,
+    imageMinHeight: r = 60,
+    imageMaxWidth: o = 6e3,
+    imageMaxHeight: c = 6e3
+  } = e || {}, a = n, l = await u(a);
+  if (a.size > i * 1024 * 1024)
+    return { success: !1, error: { size: !0 } };
+  if (!s.includes(a.type))
+    return { success: !1, error: { format: !0 } };
+  const m = await g(l);
+  return m.width < t && m.height < r || m.width > o && m.height > c ? { success: !1, error: { pixel: !0 } } : { success: !0, file: a };
+}
+async function y(n) {
+  var c;
+  let e = n;
+  const i = await u(e), s = await g(i);
+  let t = !1;
+  const r = {};
+  ["image/heif", "image/heic", "image/webp"].includes(e.type) && (r.convertTypes = [e.type], r.convertSize = 0, t = !0);
+  const o = 5 * 1024 * 1024;
+  if (e.size > o && (r.convertTypes = [e.type], r.convertSize = o, r.maxWidth = s.width * (o / e.size), t = !0), Object.keys(r).length > 0) {
+    const a = await h(p(i), r);
+    if (a.success)
+      e = a.file;
+    else
+      return { file: e, success: !1, hasConversion: t, errorMessage: (c = a.error) == null ? void 0 : c.message };
+  }
+  return { file: e, hasConversion: t, success: !0 };
+}
+function h(n, e) {
+  return new Promise((i) => {
+    new f(n, {
+      ...e,
+      success: async (s) => {
+        i({ success: !0, file: s });
+      },
+      error(s) {
+        i({ success: !1, error: s });
+      }
+    });
+  });
+}
+function g(n) {
+  return new Promise((e) => {
+    const i = new Image();
+    i.onload = function() {
+      e({ width: i.width, height: i.height, image: i });
+    }, i.src = n;
+  });
+}
+function p(n) {
+  const e = n.split(","), i = e[0].match(/:(.*?);/)[1], s = atob(e[1]);
+  let t = s.length;
+  const r = new Uint8Array(t);
+  for (; t--; )
+    r[t] = s.charCodeAt(t);
+  return new Blob([r], { type: i });
+}
+function u(n) {
+  return new Promise((e, i) => {
+    const s = new FileReader();
+    s.onloadend = () => {
+      const t = s.result;
+      e(t);
+    }, s.onerror = i, s.readAsDataURL(n);
+  });
+}
+export {
+  g as getImagePixel,
+  d as oneTravelImageCheck,
+  y 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.10",
+  "version": "0.0.12-alpha.10",
   "private": false,
   "type": "module",
   "main": "es/index.js",
@@ -22,10 +22,13 @@
   "dependencies": {
     "compressorjs": "^1.2.1",
     "vue-global-config": "^0.2.6",
-    "tinymce": "^7.1.0"
+    "tinymce": "^7.1.0",
+    "element-ui": "^2.15.14"
   },
   "peerDependencies": {
-    "vue": "^2.7.0"
+    "vue": "^2.7.0",
+    "pic-viewer": "^0.5.1",
+    "imgpond": "^0.6.2"
   },
   "scripts": {
     "build": "vite build",

package/src/index.ts

@@ -1,18 +1,10 @@
 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'
+
 interface TinymceEditorGlobalOptions {
-  // 消息方法实例
-  message?: {
-    // 加载中
-    loading?: (message?: string) => { close: () => void }
-    // 成功
-    success?: (message?: string) => void
-    // 错误提示
-    error?: (message?: string) => void
-    // 销毁
-    destroy?: () => void
-  }
   /** 图片上传请求处理，需要返回图片地址 */
   imageUploadHandle?: (file: File | Blob, filename: string, options?: {
     extParameters?: Record<string, any>
@@ -27,7 +19,23 @@ interface TinymceEditorGlobalOptions {
     node: HTMLElement;
     readonly internal: boolean;
   }) => void;
-  tinymceOptions?: RawEditorOptions
+  tinymceOptions?: RawEditorOptions;
+  /** imgPond 选项 */
+  imgPondOptions?: Record<string, any>
+  /** 音频上传选项 */
+  audioUploadOptions?: {
+    action: string;
+    handlerResponse: (response: any) => { url?: string; errorMessage?: 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>;
+  },
+  /** 视频上传选项 */
+   videoUploadOptions?: {
+    action: string;
+    handlerResponse: (response: any) => { url?: string; errorMessage?: 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>;
+  }
 }
 
 // 全局属性
@@ -37,6 +45,18 @@ const TinymceEditor = Object.assign(_TinymceEditor, {
   install: (app: any, options?: TinymceEditorGlobalOptions) => {
     // 合并
     Object.assign(globalProps, (options || {}))
+
+    // 注入element-ui
+    app.use(Button)
+    app.use(Slider)
+    app.use(Dialog)
+    app.use(Upload)
+    app.use(Tag)
+    app.use(Form)
+    app.use(FormItem)
+    app.use(ButtonGroup)
+    app.use(Loading)
+
     // 注册组件
     app.component('KbTinymceEditor', _TinymceEditor)
   }
@@ -45,5 +65,8 @@ const TinymceEditor = Object.assign(_TinymceEditor, {
 export { TinymceEditor, globalProps, type TinymceEditorGlobalOptions }
 export default TinymceEditor
 
+// 导出工具类
+export * from './util'
+
 // components.d.ts
 export type {} from './components'