@keyblade/tinymce-editor-vue2 0.1.1 → 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 +77 -3
- package/es/editor.vue.d.ts +1 -5
- package/es/editor.vue.js +20 -20
- package/es/editor.vue2.js +263 -329
- package/es/index.d.ts +26 -46
- package/es/types.d.ts +40 -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;
|
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
|
};
|