@keyblade/tinymce-editor-vue2 0.0.11 → 0.0.12-alpha.3

package/README.md

@@ -4,6 +4,8 @@
 ## 一、安装
 ```shell
 yarn add @keyblade/tinymce-editor-vue2
+yarn add pic-viewer@0.5.1 (如项目中有，怎不需要再次安装)
+yarn add imgpond@0.6.2 (如项目中有，怎不需要再次安装)
 ```
 
 ## 二、使用
@@ -11,20 +13,18 @@ yarn add @keyblade/tinymce-editor-vue2
 ```typescript
 import TinymceEditor from '@keyblade/tinymce-editor-vue2'
 
+// 如原项目中，则不需要
+import PicViewer from 'pic-viewer'
+import 'pic-viewer/dist/style.css'
+
+// 如原项目中，则不需要
+import ImgPond from 'imgpond'
+import 'imgpond/dist/style.css'
+
+Vue.use(PicViewer, {})
+Vue.use(ImgPond, {})
+
 Vue.use(TinymceEditor, {
-  // 配置消息提示
-  message: {
-    // 注入 loading 方法
-    loading: () => {
-      // 可以使用项目中的UI组件，这里以ElementUI为例
-      const ins = Loading.service({ text: '加载中' })
-      return {
-        close: () => {
-          ins.close()
-        }
-      }
-    }
-  },
   // 配置图片上传
   imageUploadHandle: (file, filename, { extParameters }) => {
     return new Promise((resolve) => {

package/es/editor.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled?: boolean | undefined;
     /** 额外参数 */
     extParameters?: Record<string, any> | undefined;
+    /** 图片上传组件最大数量 */
+    imageUploadMaxCount?: number | undefined;
+    /** 图片上传提示 */
+    imageUploadTip?: string | undefined;
     /** 图片最大值(单位M，主要用于错误提示) */
     imageMaxSize?: number | undefined;
     /** 图片允许的类型 */
@@ -23,6 +27,34 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMaxWidth?: number | undefined;
     /** 图片最大高度 */
     imageMaxHeight?: number | undefined;
+    /** 音频最大尺寸(M) */
+    audioMaxSize?: number | undefined;
+    /** 音频结尾格式 */
+    audioAllowedType?: string[] | undefined;
+    /** 音频上传选项 */
+    audioUploadOptions?: {
+        action: string;
+        handlerResponse: (response: any) => {
+            url?: string;
+            errorMessage?: string;
+        };
+        headers?: Record<string, any> | undefined;
+        data?: Record<string, any> | undefined;
+    } | undefined;
+    /** 视频最大尺寸(M) */
+    videoMaxSize?: number | undefined;
+    /** 视频结尾格式 */
+    videoAllowedType?: string[] | undefined;
+    /** 视频上传选项 */
+    videoUploadOptions?: {
+        action: string;
+        handlerResponse: (response: any) => {
+            url?: string;
+            errorMessage?: string;
+        };
+        headers?: Record<string, any> | undefined;
+        data?: Record<string, any> | undefined;
+    } | undefined;
     /** 图片上传请求处理，需要返回图片地址 */
     imageUploadHandle?: ((file: File | Blob, filename: string, options?: {
         extParameters?: Record<string, any>;
@@ -47,9 +79,13 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     }) => void) | undefined;
     /** 富文本编辑器选项 */
     options?: Partial<RawEditorOptions> | undefined;
+    /** imgPond 选项 */
+    imgPondOptions?: Record<string, any> | undefined;
 }>, {
     value: string;
     modelValue: string;
+    imageUploadMaxCount: number;
+    imageUploadTip: string;
     imageMaxSize: number;
     imageAllowedType: () => string[];
     imageAllowedMineType: () => string[];
@@ -57,6 +93,10 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMinHeight: number;
     imageMaxWidth: number;
     imageMaxHeight: number;
+    audioMaxSize: number;
+    videoMaxSize: number;
+    audioAllowedType: () => string[];
+    videoAllowedType: () => string[];
     options: () => {};
 }>, {}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
     input: (value: string) => void;
@@ -70,6 +110,10 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled?: boolean | undefined;
     /** 额外参数 */
     extParameters?: Record<string, any> | undefined;
+    /** 图片上传组件最大数量 */
+    imageUploadMaxCount?: number | undefined;
+    /** 图片上传提示 */
+    imageUploadTip?: string | undefined;
     /** 图片最大值(单位M，主要用于错误提示) */
     imageMaxSize?: number | undefined;
     /** 图片允许的类型 */
@@ -84,6 +128,34 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMaxWidth?: number | undefined;
     /** 图片最大高度 */
     imageMaxHeight?: number | undefined;
+    /** 音频最大尺寸(M) */
+    audioMaxSize?: number | undefined;
+    /** 音频结尾格式 */
+    audioAllowedType?: string[] | undefined;
+    /** 音频上传选项 */
+    audioUploadOptions?: {
+        action: string;
+        handlerResponse: (response: any) => {
+            url?: string;
+            errorMessage?: string;
+        };
+        headers?: Record<string, any> | undefined;
+        data?: Record<string, any> | undefined;
+    } | undefined;
+    /** 视频最大尺寸(M) */
+    videoMaxSize?: number | undefined;
+    /** 视频结尾格式 */
+    videoAllowedType?: string[] | undefined;
+    /** 视频上传选项 */
+    videoUploadOptions?: {
+        action: string;
+        handlerResponse: (response: any) => {
+            url?: string;
+            errorMessage?: string;
+        };
+        headers?: Record<string, any> | undefined;
+        data?: Record<string, any> | undefined;
+    } | undefined;
     /** 图片上传请求处理，需要返回图片地址 */
     imageUploadHandle?: ((file: File | Blob, filename: string, options?: {
         extParameters?: Record<string, any>;
@@ -108,9 +180,13 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     }) => void) | undefined;
     /** 富文本编辑器选项 */
     options?: Partial<RawEditorOptions> | undefined;
+    /** imgPond 选项 */
+    imgPondOptions?: Record<string, any> | undefined;
 }>, {
     value: string;
     modelValue: string;
+    imageUploadMaxCount: number;
+    imageUploadTip: string;
     imageMaxSize: number;
     imageAllowedType: () => string[];
     imageAllowedMineType: () => string[];
@@ -118,17 +194,27 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMinHeight: number;
     imageMaxWidth: number;
     imageMaxHeight: number;
+    audioMaxSize: number;
+    videoMaxSize: number;
+    audioAllowedType: () => string[];
+    videoAllowedType: () => string[];
     options: () => {};
 }>>>, {
-    value: string;
-    modelValue: string;
     imageMaxSize: number;
-    imageAllowedType: string[];
     imageAllowedMineType: string[];
     imageMinWidth: number;
     imageMinHeight: number;
     imageMaxWidth: number;
     imageMaxHeight: number;
+    value: string;
+    modelValue: string;
+    imageUploadMaxCount: number;
+    imageUploadTip: string;
+    imageAllowedType: string[];
+    audioMaxSize: number;
+    audioAllowedType: string[];
+    videoMaxSize: number;
+    videoAllowedType: string[];
     options: Partial<RawEditorOptions>;
 }>;
 export default _default;

package/es/editor.vue.js

@@ -1,15 +1,22 @@
-import t from "./editor.vue2.js";
+import d from "./editor.vue2.js";
 import "./editor.vue3.js";
-import _ from "./_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var r = this, e = r._self._c;
-  return r._self._setupProxy, e("textarea", { ref: "insRef" });
-}, o = [], s = /* @__PURE__ */ _(
-  t,
-  n,
-  o
+import s from "./_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var l, i, u;
+  var e = this, a = e._self._c, o = e._self._setupProxy;
+  return a("div", { staticClass: "tinymce-editor" }, [a("textarea", { ref: "insRef" }), e._v(" "), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-image-dialog", attrs: { visible: o.uploadImage.dialogVisible, title: "插入图片", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadImageClose } }, [a("el-form", { ref: "uploadImageFormRef", staticClass: "uploadImageForm", attrs: { model: o.uploadImage.formData } }, [a("el-form-item", { attrs: { prop: "images", rules: { required: !0, message: "必填项" } } }, [a(o.ImgPond, e._b({ attrs: { valueType: "array", size: e.imageMaxSize, count: e.imageUploadMaxCount, upload: o.onImageUploadUpload }, model: { value: o.uploadImage.formData.images, callback: function(t) {
+    e.$set(o.uploadImage.formData, "images", t);
+  }, expression: "uploadImage.formData.images" } }, "ImgPond", o.mergeImgPondOptions, !1))], 1), a("div", { staticClass: "tips" }, [a("span", { staticStyle: { "font-size": "15px", "font-weight": "bold" } }, [e._v("注意：")]), a("span", [e._v("1. 单次最多可同时选择" + e._s(e.imageUploadMaxCount) + "张图片")]), a("span", [e._v("2. 仅支持" + e._s(e.imageAllowedType.map((t) => t.toUpperCase()).join("、")) + "格式")]), a("span", [e._v("3. 单张图片大小不可超过" + e._s(e.imageMaxSize) + "M")]), a("span", [e._v("4. 像素不低于" + e._s(e.imageMinWidth) + "*" + e._s(e.imageMinHeight) + "且像素不高于" + e._s(e.imageMaxWidth) + "*" + e._s(e.imageMaxHeight))])])], 1), a("div", { attrs: { slot: "footer" }, slot: "footer" }, [a("el-button", { on: { click: o.onUploadImageClose } }, [e._v("取消")]), a("el-button", { attrs: { type: "primary" }, on: { click: o.onUploadImageConfirm } }, [e._v("确定")])], 1)], 1), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-audio-dialog", attrs: { visible: o.uploadAudio.dialogVisible, title: "插入音频", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadAudioClose } }, [a("el-form", { ref: "uploadAudioFormRef", staticClass: "uploadAudioForm", attrs: { model: o.uploadAudio.formData, "label-width": "auto" } }, [a("el-form-item", { attrs: { label: "名称", prop: "name", rules: { required: !0, message: "必填项" } } }, [a("el-input", { attrs: { maxlength: "14", "show-word-limit": "", placeholder: "请输入" }, model: { value: o.uploadAudio.formData.name, callback: function(t) {
+    e.$set(o.uploadAudio.formData, "name", t);
+  }, expression: "uploadAudio.formData.name" } })], 1), a("el-form-item", { attrs: { label: "封面", prop: "cover", rules: { required: !0, message: "必填项" } } }, [a(o.ImgPond, e._b({ attrs: { valueType: "array", size: e.imageMaxSize, count: 1, upload: o.onImageUploadUpload }, model: { value: o.uploadAudio.formData.cover, callback: function(t) {
+    e.$set(o.uploadAudio.formData, "cover", t);
+  }, expression: "uploadAudio.formData.cover" } }, "ImgPond", o.mergeImgPondOptions, !1))], 1), a("el-form-item", { attrs: { label: "音频", prop: "file", rules: { required: !0, message: "必填项" } } }, [a("el-upload", { class: ["upload", { "upload-hide": o.uploadAudio.formData.file.length >= 1 }], attrs: { name: "file", "file-list": o.uploadAudio.formData.file, action: ((l = o.mergeAudioUploadOptions) == null ? void 0 : l.action) || "", data: (i = o.mergeAudioUploadOptions) == null ? void 0 : i.data, accept: "audio/*", "list-type": "headTextContent", "before-upload": o.onUploadAudioBeforeUpload, headers: (u = o.mergeAudioUploadOptions) == null ? void 0 : u.headers, "on-remove": o.onUploadAudioRemove, "on-success": o.onUploadAudioSuccess, "on-error": o.onUploadAudioError, limit: 1 } }, [a("el-button", { attrs: { size: "small", type: "primary" } }, [e._v("上传文件"), a("i", { staticClass: "el-icon-upload el-icon--right" })]), a("div", { staticClass: "el-upload__tip", attrs: { slot: "tip" }, slot: "tip" }, [e._v("支持音频格式：" + e._s(e.audioAllowedType.join("、")))])], 1)], 1)], 1), a("div", { attrs: { slot: "footer" }, slot: "footer" }, [a("el-button", { on: { click: o.onUploadAudioClose } }, [e._v("取消")]), a("el-button", { attrs: { type: "primary" }, on: { click: o.onUploadAudioConfirm } }, [e._v("确定")])], 1)], 1), a("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-video-dialog", attrs: { visible: o.uploadVideo.dialogVisible, title: "插入视频", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: o.onUploadVideoClose } }, [a("el-form", { ref: "uploadVideoFormRef", staticClass: "uploadVideoForm", attrs: { model: o.uploadVideo.formData, "label-width": "auto" } }, [a("el-form-item", { attrs: { label: "视频", prop: "file", rules: { required: !0, message: "必填项" } } }, [a("el-upload", { class: ["upload", { "upload-hide": o.uploadVideo.formData.file.length >= 1 }], attrs: { name: "file", "file-list": o.uploadVideo.formData.file, action: o.mergeVideoUploadOptions.action || "", data: o.mergeVideoUploadOptions.data, accept: "video/*", "list-type": "headTextContent", "before-upload": o.onUploadVideoBeforeUpload, headers: o.mergeVideoUploadOptions.headers, "on-remove": o.onUploadVideoRemove, "on-success": o.onUploadVideoSuccess, "on-error": o.onUploadVideoError, limit: 1 } }, [a("el-button", { attrs: { size: "small", type: "primary" } }, [e._v("上传文件"), a("i", { staticClass: "el-icon-upload el-icon--right" })]), a("div", { staticClass: "el-upload__tip", attrs: { slot: "tip" }, slot: "tip" }, [e._v("支持视频格式：" + e._s(e.videoAllowedType.join("、")))])], 1)], 1)], 1), a("div", { attrs: { slot: "footer" }, slot: "footer" }, [a("el-button", { on: { click: o.onUploadVideoClose } }, [e._v("取消")]), a("el-button", { attrs: { type: "primary" }, on: { click: o.onUploadVideoConfirm } }, [e._v("确定")])], 1)], 1)], 1);
+}, p = [], n = /* @__PURE__ */ s(
+  d,
+  r,
+  p
 );
-const c = s.exports;
+const F = n.exports;
 export {
-  c as default
+  F as default
 };