@keyblade/tinymce-editor-vue2 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -3
- package/es/editor.vue.d.ts +1 -5
- package/es/editor.vue.js +20 -20
- package/es/editor.vue2.js +257 -323
- package/es/index.d.ts +26 -46
- package/es/types.d.ts +44 -18
- package/package.json +2 -3
- package/src/index.ts +0 -3
package/README.md
CHANGED
|
@@ -6,12 +6,21 @@
|
|
|
6
6
|
|
|
7
7
|
升级指南：https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html
|
|
8
8
|
|
|
9
|
+
## 版本区分
|
|
10
|
+
- 0.x.x - 图片使用第三方 imgpond 组件
|
|
11
|
+
- 1.x.x - 图片使用自己封装的 ProVue2ImageUpload 组件
|
|
12
|
+
|
|
9
13
|
## 一、安装
|
|
10
14
|
```shell
|
|
11
15
|
yarn add @keyblade/tinymce-editor-vue2
|
|
12
16
|
# 下面两个是编辑器需要的第三方依赖，如原项目中有，可以不用安装，但要注意版本，必须匹配，否则css样式有问题。
|
|
17
|
+
|
|
18
|
+
# 0.x.x版本 需要安装如下:
|
|
13
19
|
yarn add pic-viewer@0.5.1
|
|
14
20
|
yarn add imgpond@0.6.2
|
|
21
|
+
|
|
22
|
+
# 1.x.x版本 需要安装如下:
|
|
23
|
+
yarn add @keyblade/pro-components-vue2@1.12.5
|
|
15
24
|
```
|
|
16
25
|
|
|
17
26
|
## 二、使用
|
|
@@ -19,20 +28,45 @@ yarn add imgpond@0.6.2
|
|
|
19
28
|
```typescript
|
|
20
29
|
import TinymceEditor from '@keyblade/tinymce-editor-vue2'
|
|
21
30
|
|
|
31
|
+
// 0.x.x版本
|
|
22
32
|
// 如原项目中，则不需要
|
|
23
33
|
import PicViewer from 'pic-viewer'
|
|
24
34
|
import 'pic-viewer/dist/style.css'
|
|
25
35
|
|
|
26
|
-
// 如原项目中，则不需要
|
|
36
|
+
// 如原项目中，则不需要(0.x.x版本)
|
|
27
37
|
import ImgPond from 'imgpond'
|
|
28
38
|
import 'imgpond/dist/style.css'
|
|
29
39
|
|
|
30
40
|
Vue.use(PicViewer, {})
|
|
31
41
|
Vue.use(ImgPond, {})
|
|
32
42
|
|
|
43
|
+
// 1.x.x版本
|
|
44
|
+
import { ProVue2ImageUpload } from '@keyblade/pro-components-vue2'
|
|
45
|
+
import '@keyblade/pro-components-vue2/es/style.css'
|
|
46
|
+
Vue.use(ProVue2ImageUpload)
|
|
47
|
+
|
|
48
|
+
|
|
33
49
|
Vue.use(TinymceEditor, {
|
|
34
50
|
// 图片
|
|
35
51
|
imageUploadOptions: {
|
|
52
|
+
/** 1.x.x版本新增 */
|
|
53
|
+
action: '/api/man/uploadFile/uploadSingleFile',
|
|
54
|
+
handlerResponse: (response: any) => {
|
|
55
|
+
return {
|
|
56
|
+
success: !!response?.data.fileUrl,
|
|
57
|
+
url: response?.data.fileUrl,
|
|
58
|
+
errorMessage: response?.data.fileUrl ? undefined : response?.msg
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
headers: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
|
|
62
|
+
console.log(parameters)
|
|
63
|
+
return {}
|
|
64
|
+
},
|
|
65
|
+
data: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
|
|
66
|
+
return {}
|
|
67
|
+
},
|
|
68
|
+
/** 1.x.x版本新增 */
|
|
69
|
+
|
|
36
70
|
handleRequest: (file: File, filename: string, parameters: { extParameters: Record<string, any> }) => {
|
|
37
71
|
return new Promise((resolve) => {
|
|
38
72
|
setTimeout(() => {
|
|
@@ -120,7 +154,7 @@ interface TinymceEditorGlobalOptions {
|
|
|
120
154
|
/** 图片上传选项 */
|
|
121
155
|
imageUploadOptions?: ImageUploadOptions;
|
|
122
156
|
|
|
123
|
-
/** imgPond
|
|
157
|
+
/** imgPond 选项（1.x.x版本废弃） */
|
|
124
158
|
imgPondOptions?: Record<string, any>;
|
|
125
159
|
|
|
126
160
|
/** 音频上传选项 */
|
|
@@ -147,7 +181,7 @@ interface ComponentOptions {
|
|
|
147
181
|
/** 图片上传选项 */
|
|
148
182
|
imageUploadOptions?: ImageUploadOptions;
|
|
149
183
|
|
|
150
|
-
/** imgPond
|
|
184
|
+
/** imgPond选项（1.x.x版本废弃） */
|
|
151
185
|
imgPondOptions?: Record<string, any>;
|
|
152
186
|
|
|
153
187
|
/** 音频上传组件选项 */
|
|
@@ -163,6 +197,46 @@ interface ComponentOptions {
|
|
|
163
197
|
|
|
164
198
|
### 3.图片上传配置
|
|
165
199
|
```typescript
|
|
200
|
+
// 1.x.x版本
|
|
201
|
+
export interface ImageUploadOptions {
|
|
202
|
+
/** 上传的文件字段名 - 默认: file */
|
|
203
|
+
name?: string;
|
|
204
|
+
/** 接受上传的文件类型 - 默认: ['jpg', 'jpeg', 'png', 'bmp', 'heif', 'heic', 'gif', 'webp'] */
|
|
205
|
+
accept?: string[];
|
|
206
|
+
/** 是否支持多选文件 - 默认: true */
|
|
207
|
+
multiple?: boolean;
|
|
208
|
+
/** 最大允许上传个数 - 默认: 10 */
|
|
209
|
+
limit?: number;
|
|
210
|
+
/** 是否禁用 - 默认: false */
|
|
211
|
+
disabled?: boolean;
|
|
212
|
+
/** 隐藏内置上传文件之前的loading效果 - 默认: false */
|
|
213
|
+
hideInnerBeforeUploadLoading?: boolean;
|
|
214
|
+
/** 校验选项 */
|
|
215
|
+
checkOptions?: ImageUploadCheckOptions;
|
|
216
|
+
/** 压缩选项 */
|
|
217
|
+
compressorOptions?: ImageUploadCompressorOptions;
|
|
218
|
+
/** 剪裁选项 */
|
|
219
|
+
cropOptions?: ImageUploadCropOptions;
|
|
220
|
+
|
|
221
|
+
/** 上传地址(启用必传) */
|
|
222
|
+
action?: string;
|
|
223
|
+
/** 请求头 */
|
|
224
|
+
headers?: (parameters: { file: File | Blob | undefined, extParameters?: Record<string, any> }) => Record<string, any>;
|
|
225
|
+
/** 额外请求体 */
|
|
226
|
+
data?: (parameters: { file: File | Blob | undefined, extParameters?: Record<string, any> }) => Record<string, any>;
|
|
227
|
+
/** 响应处理(启用必传) */
|
|
228
|
+
handlerResponse?: (response: any) => { success: boolean; url?: string; errorMessage?: string }
|
|
229
|
+
/** 图片上传请求处理(图片粘贴、复制时调用) */
|
|
230
|
+
handleRequest?: (file: File, filename: string, options?: {
|
|
231
|
+
extParameters?: Record<string, any>
|
|
232
|
+
}) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
|
|
233
|
+
/** 图片URL上传请求处理（图片粘贴、复制时调用,前端跨域，交给后端处理） */
|
|
234
|
+
handleRequestByUrl?: (url: string, options?: {
|
|
235
|
+
extParameters?: Record<string, any>
|
|
236
|
+
}) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// 0.x.x版本
|
|
166
240
|
export interface ImageUploadOptions {
|
|
167
241
|
/** 图片上传组件最大数量 */
|
|
168
242
|
maxCount?: number;
|
|
@@ -208,6 +282,8 @@ export interface VideoUploadOptions {
|
|
|
208
282
|
headers?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
|
|
209
283
|
/** 额外请求体 */
|
|
210
284
|
data?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
|
|
285
|
+
/** 上传之前回调结束(开始调用上传接口) */
|
|
286
|
+
beforeUploadEnd?: (file: File | Blob) => void
|
|
211
287
|
/** 响应处理(启用必传) */
|
|
212
288
|
handlerResponse?: (response: any) => { url?: string; errorMessage?: string }
|
|
213
289
|
}
|
|
@@ -230,6 +306,8 @@ export interface AudioUploadOptions {
|
|
|
230
306
|
headers?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
|
|
231
307
|
/** 额外请求体 */
|
|
232
308
|
data?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
|
|
309
|
+
/** 上传之前回调结束(开始调用上传接口) */
|
|
310
|
+
beforeUploadEnd?: (file: File | Blob) => void
|
|
233
311
|
/** 响应处理(启用必传) */
|
|
234
312
|
handlerResponse?: (response: any) => { url?: string; errorMessage?: string }
|
|
235
313
|
}
|
package/es/editor.vue.d.ts
CHANGED
|
@@ -12,8 +12,6 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
12
12
|
options?: Partial<RawEditorOptions> | undefined;
|
|
13
13
|
/** 图片上传选项 */
|
|
14
14
|
imageUploadOptions?: ImageUploadOptions | undefined;
|
|
15
|
-
/** imgPond选项 */
|
|
16
|
-
imgPondOptions?: Record<string, any> | undefined;
|
|
17
15
|
/** 音频上传组件选项 */
|
|
18
16
|
audioUploadOptions?: AudioUploadOptions | undefined;
|
|
19
17
|
/** 视频上传选项 */
|
|
@@ -40,8 +38,6 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
40
38
|
options?: Partial<RawEditorOptions> | undefined;
|
|
41
39
|
/** 图片上传选项 */
|
|
42
40
|
imageUploadOptions?: ImageUploadOptions | undefined;
|
|
43
|
-
/** imgPond选项 */
|
|
44
|
-
imgPondOptions?: Record<string, any> | undefined;
|
|
45
41
|
/** 音频上传组件选项 */
|
|
46
42
|
audioUploadOptions?: AudioUploadOptions | undefined;
|
|
47
43
|
/** 视频上传选项 */
|
|
@@ -56,10 +52,10 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
56
52
|
extParameters: () => {};
|
|
57
53
|
options: () => {};
|
|
58
54
|
}>>>, {
|
|
55
|
+
options: Partial<RawEditorOptions>;
|
|
59
56
|
value: string;
|
|
60
57
|
disabled: boolean;
|
|
61
58
|
extParameters: Record<string, any>;
|
|
62
|
-
options: Partial<RawEditorOptions>;
|
|
63
59
|
}>;
|
|
64
60
|
export default _default;
|
|
65
61
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
package/es/editor.vue.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var a = this,
|
|
6
|
-
return
|
|
7
|
-
a.$set(
|
|
8
|
-
}, expression: "uploadImage.formData.images" } }, "
|
|
9
|
-
a.$set(
|
|
10
|
-
}, expression: "uploadAudio.formData.name" } })], 1),
|
|
11
|
-
a.$set(
|
|
12
|
-
}, expression: "uploadAudio.formData.cover" } }, "
|
|
13
|
-
return a.$set(
|
|
14
|
-
} } }, [
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
import A from "./editor.vue2.js";
|
|
2
|
+
import I from "./_virtual/_plugin-vue2_normalizer.js";
|
|
3
|
+
var h = function() {
|
|
4
|
+
var i, l, s, u, d, r, p, n, m, c, g, f, C, v, F, U, _, D, E, b, y;
|
|
5
|
+
var a = this, o = a._self._c, e = a._self._setupProxy;
|
|
6
|
+
return o("div", { staticClass: "tinymce-editor" }, [o("textarea", { ref: "insRef" }), o("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-image-dialog", attrs: { visible: e.uploadImage.dialogVisible, title: "插入图片", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: e.onUploadImageClose } }, [o("el-form", { ref: "uploadImageFormRef", staticClass: "uploadImageForm", attrs: { model: e.uploadImage.formData } }, [o("el-form-item", { attrs: { prop: "images", rules: { required: !0, message: "必填项" } } }, [o("kb-pro-vue2-image-upload", a._b({ attrs: { accept: (i = e.mergeImageUploadOptions) == null ? void 0 : i.accept, action: e.mergeImageUploadOptions.action || "", data: e.getUploadImageData(), headers: e.getUploadImageHeaders(), onInnerBeforeUploadEnd: e.onUploadImageInnerBeforeUploadEnd }, model: { value: e.uploadImage.formData.images, callback: function(t) {
|
|
7
|
+
a.$set(e.uploadImage.formData, "images", t);
|
|
8
|
+
}, expression: "uploadImage.formData.images" } }, "kb-pro-vue2-image-upload", e.mergeImageUploadOptions, !1))], 1), o("div", { staticClass: "tips" }, [o("span", { staticStyle: { "font-size": "15px", "font-weight": "bold" } }, [a._v("注意：")]), o("span", [a._v("1. 单次最多可同时选择" + a._s(e.mergeImageUploadOptions.limit) + "张图片")]), o("span", [a._v("2. 仅支持" + a._s((s = (l = e.mergeImageUploadOptions) == null ? void 0 : l.accept) == null ? void 0 : s.map((t) => t.toUpperCase()).join("、")) + "格式")]), o("span", [a._v("3. 单张图片大小不可超过" + a._s((d = (u = e.mergeImageUploadOptions) == null ? void 0 : u.checkOptions) == null ? void 0 : d.maxSize) + "M")]), o("span", [a._v("4. 像素不低于" + a._s((p = (r = e.mergeImageUploadOptions) == null ? void 0 : r.checkOptions) == null ? void 0 : p.minWidth) + "*" + a._s((m = (n = e.mergeImageUploadOptions) == null ? void 0 : n.checkOptions) == null ? void 0 : m.minHeight) + "且像素不高于" + a._s((g = (c = e.mergeImageUploadOptions) == null ? void 0 : c.checkOptions) == null ? void 0 : g.maxWidth) + "*" + a._s((C = (f = e.mergeImageUploadOptions) == null ? void 0 : f.checkOptions) == null ? void 0 : C.maxHeight))])])], 1), o("div", { attrs: { slot: "footer" }, slot: "footer" }, [o("el-button", { on: { click: e.onUploadImageClose } }, [a._v("取消")]), o("el-button", { attrs: { type: "primary" }, on: { click: e.onUploadImageConfirm } }, [a._v("确定")])], 1)], 1), o("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-audio-dialog", attrs: { visible: e.uploadAudio.dialogVisible, title: "插入音频", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: e.onUploadAudioClose } }, [o("el-form", { ref: "uploadAudioFormRef", staticClass: "uploadAudioForm", attrs: { model: e.uploadAudio.formData, "label-width": "auto" } }, [o("el-form-item", { attrs: { label: "名称", prop: "name", rules: { required: !0, message: "必填项" } } }, [o("el-input", { attrs: { maxlength: "14", "show-word-limit": "", placeholder: "请输入" }, model: { value: e.uploadAudio.formData.name, callback: function(t) {
|
|
9
|
+
a.$set(e.uploadAudio.formData, "name", t);
|
|
10
|
+
}, expression: "uploadAudio.formData.name" } })], 1), o("el-form-item", { attrs: { label: "封面", prop: "cover", rules: { required: !0, message: "必填项" } } }, [o("kb-pro-vue2-image-upload", a._b({ attrs: { accept: (v = e.mergeImageUploadOptions) == null ? void 0 : v.accept, action: e.mergeImageUploadOptions.action || "", data: e.getUploadImageData(), headers: e.getUploadImageHeaders(), onInnerBeforeUploadEnd: e.onUploadImageInnerBeforeUploadEnd, limit: 1, multiple: !1 }, model: { value: e.uploadAudio.formData.cover, callback: function(t) {
|
|
11
|
+
a.$set(e.uploadAudio.formData, "cover", t);
|
|
12
|
+
}, expression: "uploadAudio.formData.cover" } }, "kb-pro-vue2-image-upload", e.mergeImageUploadOptions, !1))], 1), o("el-form-item", { attrs: { label: "音频", prop: "file", rules: { required: !0, message: "必填项" } } }, [o("el-upload", { class: ["upload", { "upload-hide": e.uploadAudio.formData.file.length >= 1 }], attrs: { name: "file", "file-list": e.uploadAudio.formData.file, action: ((F = e.mergeAudioUploadOptions) == null ? void 0 : F.action) || "", data: e.getUploadAudioData(), accept: e.mergeAudioUploadOptions.accept, "list-type": "headTextContent", "before-upload": e.onUploadAudioBeforeUpload, headers: e.getUploadAudioHeaders(), "on-remove": e.onUploadAudioRemove, "on-success": e.onUploadAudioSuccess, "on-error": e.onUploadAudioError, limit: 1 } }, [o("el-button", { attrs: { size: "small", type: "primary" } }, [a._v("上传文件"), o("i", { staticClass: "el-icon-upload el-icon--right" })]), o("div", { staticClass: "el-upload__tip", attrs: { slot: "tip" }, slot: "tip" }, [o("div", { staticClass: "tips" }, [o("p", [a._v("注意：")]), o("div", [o("span", [a._v("1. 仅支持" + a._s((_ = (U = e.mergeAudioUploadOptions) == null ? void 0 : U.allowedType) == null ? void 0 : _.map((t) => t.toUpperCase()).join("、")) + "格式")]), o("span", [a._v("2. 单个音频大小不可超过" + a._s((D = e.mergeAudioUploadOptions) == null ? void 0 : D.maxSize) + "M")])])])])], 1)], 1)], 1), o("div", { attrs: { slot: "footer" }, slot: "footer" }, [o("el-button", { on: { click: e.onUploadAudioClose } }, [a._v("取消")]), o("el-button", { attrs: { type: "primary" }, on: { click: e.onUploadAudioConfirm } }, [a._v("确定")])], 1)], 1), o("el-dialog", { staticClass: "tinymce-editor-dialog tinymce-editor-upload-video-dialog", attrs: { visible: e.uploadVideo.dialogVisible, title: "插入视频", "append-to-body": !0, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { close: e.onUploadVideoClose } }, [o("el-form", { ref: "uploadVideoFormRef", staticClass: "uploadVideoForm", attrs: { model: e.uploadVideo.formData, "label-width": "auto" } }, [o("el-form-item", { attrs: { label: "视频", prop: "file", rules: { required: !0, message: "必填项" } } }, [o("el-upload", { class: ["upload", { "upload-hide": e.uploadVideo.formData.file.length >= 1 }], attrs: { name: "file", "file-list": e.uploadVideo.formData.file, action: e.mergeVideoUploadOptions.action || "", data: e.getUploadVideoData(), accept: e.mergeVideoUploadOptions.accept, "list-type": "headTextContent", "before-upload": e.onUploadVideoBeforeUpload, headers: e.getUploadVideoHeaders(), "on-remove": e.onUploadVideoRemove, "on-success": e.onUploadVideoSuccess, "on-error": e.onUploadVideoError, limit: 1 } }, [o("el-button", { attrs: { size: "small", type: "primary" } }, [a._v("上传文件"), o("i", { staticClass: "el-icon-upload el-icon--right" })]), o("div", { staticClass: "el-upload__tip", attrs: { slot: "tip" }, slot: "tip" }, [o("div", { staticClass: "tips" }, [o("p", [a._v("注意：")]), o("div", [o("span", [a._v("1. 仅支持" + a._s((b = (E = e.mergeVideoUploadOptions) == null ? void 0 : E.allowedType) == null ? void 0 : b.map((t) => t.toUpperCase()).join("、")) + "格式")]), o("span", [a._v("2. 单个视频大小不可超过" + a._s((y = e.mergeVideoUploadOptions) == null ? void 0 : y.maxSize) + "M")])])])])], 1)], 1)], 1), o("div", { attrs: { slot: "footer" }, slot: "footer" }, [o("el-button", { on: { click: e.onUploadVideoClose } }, [a._v("取消")]), o("el-button", { attrs: { type: "primary" }, on: { click: e.onUploadVideoConfirm } }, [a._v("确定")])], 1)], 1), o("el-dialog", { staticClass: "tinymce-editor-loading-dialog", attrs: { fullscreen: "", "append-to-body": "", visible: e.uploadLoadingConfig.show, "show-close": !1, "close-on-press-escape": !1, "close-on-click-modal": !1, "destroy-on-close": "" }, on: { "update:visible": function(t) {
|
|
13
|
+
return a.$set(e.uploadLoadingConfig, "show", t);
|
|
14
|
+
} } }, [o("div", { staticClass: "tinymce-editor-loading-dialog-content" }, [o("div", { staticClass: "tinymce-editor-spinner" }, [o("div", { staticClass: "tinymce-editor-spinner-dot1" }), o("div", { staticClass: "tinymce-editor-spinner-dot2" }), o("div", { staticClass: "tinymce-editor-spinner-dot3" })]), o("span", [a._v(a._s(e.uploadLoadingConfig.text))])])])], 1);
|
|
15
|
+
}, O = [], k = /* @__PURE__ */ I(
|
|
16
|
+
A,
|
|
17
|
+
h,
|
|
18
|
+
O
|
|
19
19
|
);
|
|
20
|
-
const
|
|
20
|
+
const w = k.exports;
|
|
21
21
|
export {
|
|
22
|
-
|
|
22
|
+
w as default
|
|
23
23
|
};
|