@keyblade/tinymce-editor-vue2 1.0.4 → 1.2.0

package/README.md

@@ -6,21 +6,13 @@
 
 升级指南：https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html
 
-## 版本区分
-- 0.x.x - 图片使用第三方 imgpond 组件
-- 1.x.x - 图片使用自己封装的 ProVue2ImageUpload 组件
-
 ## 一、安装
 ```shell
 yarn add @keyblade/tinymce-editor-vue2
 # 下面两个是编辑器需要的第三方依赖，如原项目中有，可以不用安装，但要注意版本，必须匹配，否则css样式有问题。
 
-# 0.x.x版本 需要安装如下:
-yarn add pic-viewer@0.5.1
-yarn add imgpond@0.6.2
-
-# 1.x.x版本 需要安装如下:
-yarn add @keyblade/pro-components-vue2@1.12.6
+# 需要安装如下:
+yarn add @keyblade/pro-components-vue2@1.13.1
 ```
 
 ## 二、使用
@@ -28,28 +20,13 @@ yarn add @keyblade/pro-components-vue2@1.12.6
 ```typescript
 import TinymceEditor from '@keyblade/tinymce-editor-vue2'
 
-// 0.x.x版本
-// 如原项目中，则不需要
-import PicViewer from 'pic-viewer'
-import 'pic-viewer/dist/style.css'
-
-// 如原项目中，则不需要(0.x.x版本)
-import ImgPond from 'imgpond'
-import 'imgpond/dist/style.css'
-
-Vue.use(PicViewer, {})
-Vue.use(ImgPond, {})
-
-// 1.x.x版本
 import { ProVue2ImageUpload } from '@keyblade/pro-components-vue2'
 import '@keyblade/pro-components-vue2/es/style.css'
 Vue.use(ProVue2ImageUpload)
 
-
 Vue.use(TinymceEditor, {
   // 图片
   imageUploadOptions: {
-    /** 1.x.x版本新增 */
     action: '/api/man/uploadFile/uploadSingleFile',
     handlerResponse: (response: any) => {
       return new Promise((resolve) => {
@@ -67,7 +44,6 @@ Vue.use(TinymceEditor, {
     data: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
       return {}
     },
-    /** 1.x.x版本新增 */
     
     handleRequest: (file: File, filename: string, parameters: { extParameters: Record<string, any> }) => {
       return new Promise((resolve) => {
@@ -156,9 +132,6 @@ interface TinymceEditorGlobalOptions {
   /** 图片上传选项 */
   imageUploadOptions?: ImageUploadOptions;
   
-  /** imgPond 选项（1.x.x版本废弃） */
-  imgPondOptions?: Record<string, any>;
-
   /** 音频上传选项 */
   audioUploadOptions?: AudioUploadOptions;
 
@@ -183,9 +156,6 @@ interface ComponentOptions {
   /** 图片上传选项 */
   imageUploadOptions?: ImageUploadOptions;
   
-  /** imgPond选项（1.x.x版本废弃） */
-  imgPondOptions?: Record<string, any>;
-
   /** 音频上传组件选项 */
   audioUploadOptions?: AudioUploadOptions;
 
@@ -199,7 +169,6 @@ interface ComponentOptions {
 
 ### 3.图片上传配置
 ```typescript
-// 1.x.x版本
 export interface ImageUploadOptions {
   /** 上传的文件字段名 - 默认: file */
   name?: string;
@@ -239,34 +208,6 @@ export interface ImageUploadOptions {
     extParameters?: Record<string, any>
   }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
 }
-
-// 0.x.x版本
-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}>;
-  /** 图片URL上传请求处理（前端跨域，交给后端处理） */
-  handleRequestByUrl?: (url: string, options?: {
-    extParameters?: Record<string, any>
-  }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
-}
 ```
 
 ### 4.视频上传配置

package/es/editor.vue.d.ts

@@ -52,10 +52,10 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     extParameters: () => {};
     options: () => {};
 }>>>, {
-    options: Partial<RawEditorOptions>;
     value: string;
     disabled: boolean;
     extParameters: Record<string, any>;
+    options: Partial<RawEditorOptions>;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/es/editor.vue2.js

@@ -29,8 +29,7 @@ var L = (u, n, i) => new Promise((O, T) => {
 });
 var G = (u, n, i) => (n = u[ce("asyncIterator")]) ? n.call(u) : (u = u[ce("iterator")](), n = {}, i = (O, T) => (T = u[O]) && (n[O] = (P) => new Promise((V, c, g) => (P = T.call(u, P), g = P.done, Promise.resolve(P.value).then((I) => V({ value: I, done: g }), c)))), i("next"), i("return"), n);
 import { defineComponent as Ee, ref as A, computed as X, onMounted as Re, onUnmounted as qe, watch as de } from "vue";
-import { oneTravelImageCheckAndTransform as Fe, oneTravelImageCompressor as We } from "@keyblade/one-travel";
-import { blobToFile as Ne, getImagePixel as Le, getFileExtension as Ge } from "./util.js";
+import { oneTravelImageCheckAndTransform as Fe, oneTravelImageCompressor as We, blobToFile as Ne, getImagePixel as Le, getFileExtension as Ge } from "@keyblade/one-travel";
 import "./style.less.js";
 import { conclude as F } from "vue-global-config";
 import pe from "tinymce";
@@ -68,7 +67,7 @@ import "tinymce/plugins/wordcount";
 import { globalProps as W } from "./index.js";
 import { Message as b } from "element-ui";
 import { defaultImageUploadOptions as S, EImageUploadInnerBeforeUploadStep as Je } from "@keyblade/pro-components-vue2";
-const $a = /* @__PURE__ */ Ee({
+const Ha = /* @__PURE__ */ Ee({
   __name: "editor",
   props: {
     value: { default: "" },
@@ -223,8 +222,8 @@ const $a = /* @__PURE__ */ Ee({
         for (const k of [...Te, ...ze])
           k == null || k.remove();
         try {
-          for (var ie = G([...se]), Ke, qa, Fa; Ke = !(qa = yield ie.next()).done; Ke = !1) {
-            const k = qa.value;
+          for (var ie = G([...se]), Ke, Ra, qa; Ke = !(Ra = yield ie.next()).done; Ke = !1) {
+            const k = Ra.value;
             if (k.removeAttribute("crossorigin"), k.src.startsWith("http"))
               if ((l = p.value) != null && l.handleRequestByUrl) {
                 const x = yield (m = p.value) == null ? void 0 : m.handleRequestByUrl(k.src, { extParameters: i.extParameters });
@@ -236,14 +235,14 @@ const $a = /* @__PURE__ */ Ee({
             else
               k.remove(), b.error("不支持Word中批量复制图片或视频，请改为单个复制，或者从工具栏中手动插入上传");
           }
-        } catch (qa) {
-          Fa = [qa];
+        } catch (Ra) {
+          qa = [Ra];
         } finally {
           try {
-            Ke && (qa = ie.return) && (yield qa.call(ie));
+            Ke && (Ra = ie.return) && (yield Ra.call(ie));
           } finally {
-            if (Fa)
-              throw Fa[0];
+            if (qa)
+              throw qa[0];
           }
         }
         $.value.show = !1;
@@ -264,22 +263,22 @@ const $a = /* @__PURE__ */ Ee({
           text: "图片上传中，请稍等"
         };
         try {
-          for (var Wa = G(r), Na, La, Ga; Na = !(La = yield Wa.next()).done; Na = !1) {
-            const z = La.value;
+          for (var Fa = G(r), Wa, Na, La; Wa = !(Na = yield Fa.next()).done; Wa = !1) {
+            const z = Na.value;
             const q = yield ae(z);
             if (q) {
               const H = `<img src="${q}" alt="" />`;
               e.insertContent(H);
             }
           }
-        } catch (La) {
-          Ga = [La];
+        } catch (Na) {
+          La = [Na];
         } finally {
           try {
-            Na && (La = Wa.return) && (yield La.call(Wa));
+            Wa && (Na = Fa.return) && (yield Na.call(Fa));
           } finally {
-            if (Ga)
-              throw Ga[0];
+            if (La)
+              throw La[0];
           }
         }
         $.value.show = !1;
@@ -545,5 +544,5 @@ const $a = /* @__PURE__ */ Ee({
   }
 });
 export {
-  $a as default
+  Ha as default
 };

package/es/index.d.ts

@@ -13,10 +13,6 @@ interface TinymceEditorGlobalOptions {
 }
 declare const globalProps: TinymceEditorGlobalOptions;
 declare const TinymceEditor: import('vue/types/v3-component-public-instance').ComponentPublicInstanceConstructor<import('vue/types/v3-component-public-instance').Vue3Instance<{}, Readonly<import('vue').ExtractPropTypes<{
-    options: {
-        type: import('vue').PropType<Partial<RawEditorOptions>>;
-        default: () => {};
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
@@ -29,6 +25,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
+    options: {
+        type: import('vue').PropType<Partial<RawEditorOptions>>;
+        default: () => {};
+    };
     imageUploadOptions: {
         type: import('vue').PropType<ImageUploadOptions>;
     };
@@ -44,10 +44,6 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
 }>>, Readonly<import('vue').ExtractPropTypes<{
-    options: {
-        type: import('vue').PropType<Partial<RawEditorOptions>>;
-        default: () => {};
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
@@ -60,6 +56,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
+    options: {
+        type: import('vue').PropType<Partial<RawEditorOptions>>;
+        default: () => {};
+    };
     imageUploadOptions: {
         type: import('vue').PropType<ImageUploadOptions>;
     };
@@ -77,15 +77,11 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
 }>>, {
     input: (value: string) => void;
 }, {
-    options: Partial<RawEditorOptions>;
     value: string;
     disabled: boolean;
     extParameters: Record<string, any>;
+    options: Partial<RawEditorOptions>;
 }, true, import('vue/types/v3-component-options').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import('vue').ExtractPropTypes<{
-    options: {
-        type: import('vue').PropType<Partial<RawEditorOptions>>;
-        default: () => {};
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
@@ -98,6 +94,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
+    options: {
+        type: import('vue').PropType<Partial<RawEditorOptions>>;
+        default: () => {};
+    };
     imageUploadOptions: {
         type: import('vue').PropType<ImageUploadOptions>;
     };
@@ -113,10 +113,6 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
 }>>> & import('vue').ShallowUnwrapRef<{}> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
-    options: {
-        type: import('vue').PropType<Partial<RawEditorOptions>>;
-        default: () => {};
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
@@ -129,6 +125,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
+    options: {
+        type: import('vue').PropType<Partial<RawEditorOptions>>;
+        default: () => {};
+    };
     imageUploadOptions: {
         type: import('vue').PropType<ImageUploadOptions>;
     };
@@ -144,10 +144,6 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
 }>>> & import('vue/types/v3-component-options').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-    options: {
-        type: import('vue').PropType<Partial<RawEditorOptions>>;
-        default: () => {};
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
@@ -160,6 +156,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
+    options: {
+        type: import('vue').PropType<Partial<RawEditorOptions>>;
+        default: () => {};
+    };
     imageUploadOptions: {
         type: import('vue').PropType<ImageUploadOptions>;
     };
@@ -177,16 +177,12 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
 }>>, {}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
     input: (value: string) => void;
 }, string, {
-    options: Partial<RawEditorOptions>;
     value: string;
     disabled: boolean;
     extParameters: Record<string, any>;
+    options: Partial<RawEditorOptions>;
 }> & {
     props: {
-        options: {
-            type: import('vue').PropType<Partial<RawEditorOptions>>;
-            default: () => {};
-        };
         value: {
             type: import('vue').PropType<string>;
             default: string;
@@ -199,6 +195,10 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             type: import('vue').PropType<Record<string, any>>;
             default: () => {};
         };
+        options: {
+            type: import('vue').PropType<Partial<RawEditorOptions>>;
+            default: () => {};
+        };
         imageUploadOptions: {
             type: import('vue').PropType<ImageUploadOptions>;
         };
@@ -219,5 +219,4 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
 };
 export { TinymceEditor, globalProps, type TinymceEditorGlobalOptions };
 export default TinymceEditor;
-export * from './util';
 export type {} from './components';

package/es/index.js

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

package/es/types.d.ts

@@ -1,4 +1,4 @@
-import { ImageUploadCheckOptions, ImageUploadCompressorOptions, ImageUploadCropOptions } from '@keyblade/pro-components-vue2';
+import { ImageUploadCheckOptions, ImageUploadCompressorOptions, ImageUploadCropOptions } from '@keyblade/one-travel';
 
 /** 图片选项 */
 export interface ImageUploadOptions {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/tinymce-editor-vue2",
   "description": "KeyBlade Tinymce Editor Vue2",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "main": "es/index.js",
@@ -23,11 +23,11 @@
     "vue-global-config": "^0.2.6",
     "tinymce": "^7.1.0",
     "element-ui": "^2.15.14",
-    "@keyblade/one-travel": "^2.0.18"
+    "@keyblade/one-travel": "^3.0.0"
   },
   "peerDependencies": {
     "vue": "^2.7.0",
-    "@keyblade/pro-components-vue2": "^1.12.8"
+    "@keyblade/pro-components-vue2": "^1.13.1"
   },
   "scripts": {
     "build": "vite build",

package/es/util.d.ts

@@ -1,21 +0,0 @@
-/**
- * 获取图片像素
- * @param src url或 base64
- */
-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,27 +0,0 @@
-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 r(e) {
-  const n = e.split(".");
-  return n ? n[n.length - 1] : "";
-}
-function c(e, n) {
-  return e.name ? e : new File([e], n, { type: e.type });
-}
-function g() {
-  const e = Date.now().toString(16), n = Math.random().toString(16).slice(2);
-  return `${e}-${n}`;
-}
-export {
-  c as blobToFile,
-  g as generateUUID,
-  r as getFileExtension,
-  o as getImagePixel
-};

package/src/index.ts

@@ -1,54 +0,0 @@
-import type { RawEditorOptions } from 'tinymce'
-import _TinymceEditor from './editor.vue'
-
-// 导入 ElementUI
-import { Button, Slider, Dialog, Upload, Tag, Form, FormItem, ButtonGroup, Loading, InputNumber } from 'element-ui'
-import { AudioUploadOptions, ImageUploadOptions, VideoUploadOptions } from './types'
-
-interface TinymceEditorGlobalOptions {
-  /** 富文本编辑器选项 */
-  options?: RawEditorOptions;
-
-  /** 图片上传选项 */
-  imageUploadOptions?: ImageUploadOptions;
-
-  /** 音频上传选项 */
-  audioUploadOptions?: AudioUploadOptions;
-
-  /** 视频上传选项 */
-  videoUploadOptions?: VideoUploadOptions;
-}
-
-// 全局属性
-const globalProps: TinymceEditorGlobalOptions = {}
-
-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(InputNumber)
-    app.use(Loading)
-
-    // 注册组件
-    app.component('KbTinymceEditor', _TinymceEditor)
-  }
-})
-
-export { TinymceEditor, globalProps, type TinymceEditorGlobalOptions }
-export default TinymceEditor
-
-// 导出工具类
-export * from './util'
-
-// components.d.ts
-export type {} from './components'