@keyblade/tinymce-editor-vue2 0.0.5-alpha.4 → 0.0.5-alpha.5
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 +1 -10
- package/es/editor.vue.d.ts +7 -6
- package/es/editor.vue2.js +30 -39
- package/es/index.d.ts +20 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,9 +37,7 @@ Vue.use(TinymceEditor, {
|
|
|
37
37
|
```text
|
|
38
38
|
<template>
|
|
39
39
|
<TinymceEditor
|
|
40
|
-
ref="editorRef"
|
|
41
40
|
v-model="text"
|
|
42
|
-
:initComplete="initComplete"
|
|
43
41
|
/>
|
|
44
42
|
</template>
|
|
45
43
|
|
|
@@ -48,13 +46,6 @@ import { onMounted, ref } from 'vue'
|
|
|
48
46
|
import TinymceEditor from '@keyblade/tinymce-editor-vue2'
|
|
49
47
|
|
|
50
48
|
const text = ref<string>('')
|
|
51
|
-
const editorRef = ref()
|
|
52
|
-
|
|
53
|
-
// 组件加载完成
|
|
54
|
-
const initComplete = () => {
|
|
55
|
-
console.log(editorRef.value.insRef)
|
|
56
|
-
console.log(editorRef.value.editorRef)
|
|
57
|
-
}
|
|
58
49
|
|
|
59
50
|
onMounted(() => {
|
|
60
51
|
console.log('onMounted')
|
|
@@ -127,7 +118,7 @@ interface ComponentProps {
|
|
|
127
118
|
readonly internal: boolean;
|
|
128
119
|
}) => void;
|
|
129
120
|
/** 初始化完成 */
|
|
130
|
-
initComplete?: () => void,
|
|
121
|
+
initComplete?: (params: { editorIns: Editor }) => void,
|
|
131
122
|
/** 富文本编辑器选项 */
|
|
132
123
|
options?: Partial<RawEditorOptions>
|
|
133
124
|
}
|
package/es/editor.vue.d.ts
CHANGED
|
@@ -36,7 +36,9 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
36
36
|
readonly internal: boolean;
|
|
37
37
|
}) => void) | undefined;
|
|
38
38
|
/** 初始化完成 */
|
|
39
|
-
initComplete?: ((
|
|
39
|
+
initComplete?: ((params: {
|
|
40
|
+
editorIns: Editor;
|
|
41
|
+
}) => void) | undefined;
|
|
40
42
|
/** 富文本编辑器选项 */
|
|
41
43
|
options?: Partial<RawEditorOptions> | undefined;
|
|
42
44
|
}>, {
|
|
@@ -50,10 +52,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
50
52
|
imageMaxWidth: number;
|
|
51
53
|
imageMaxHeight: number;
|
|
52
54
|
options: () => {};
|
|
53
|
-
}>, {
|
|
54
|
-
insRef: import('vue').Ref<HTMLElement | undefined>;
|
|
55
|
-
editorRef: import('vue').Ref<Editor | undefined>;
|
|
56
|
-
}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
|
|
55
|
+
}>, {}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
|
|
57
56
|
input: (value: string) => void;
|
|
58
57
|
"update:modelValue": (value: string) => void;
|
|
59
58
|
}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -92,7 +91,9 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
92
91
|
readonly internal: boolean;
|
|
93
92
|
}) => void) | undefined;
|
|
94
93
|
/** 初始化完成 */
|
|
95
|
-
initComplete?: ((
|
|
94
|
+
initComplete?: ((params: {
|
|
95
|
+
editorIns: Editor;
|
|
96
|
+
}) => void) | undefined;
|
|
96
97
|
/** 富文本编辑器选项 */
|
|
97
98
|
options?: Partial<RawEditorOptions> | undefined;
|
|
98
99
|
}>, {
|
package/es/editor.vue2.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as $, ref as y, computed as z, onMounted as F, onUnmounted as N, watch as j } from "vue";
|
|
2
|
+
import L from "compressorjs";
|
|
3
3
|
import { conclude as _ } from "vue-global-config";
|
|
4
|
-
import
|
|
5
|
-
import { addI18n as
|
|
4
|
+
import q from "tinymce";
|
|
5
|
+
import { addI18n as E } from "./langs/zh_CN.js";
|
|
6
6
|
import "tinymce/skins/ui/oxide/skin";
|
|
7
7
|
import "tinymce/models/dom";
|
|
8
8
|
import "tinymce/themes/silver";
|
|
@@ -32,7 +32,7 @@ import "tinymce/plugins/visualblocks";
|
|
|
32
32
|
import "tinymce/plugins/visualchars";
|
|
33
33
|
import "tinymce/plugins/wordcount";
|
|
34
34
|
import { globalProps as d } from "./index.js";
|
|
35
|
-
const Se = /* @__PURE__ */
|
|
35
|
+
const Se = /* @__PURE__ */ $({
|
|
36
36
|
__name: "editor",
|
|
37
37
|
props: {
|
|
38
38
|
value: { default: "" },
|
|
@@ -51,23 +51,23 @@ const Se = /* @__PURE__ */ F({
|
|
|
51
51
|
options: { default: () => ({}) }
|
|
52
52
|
},
|
|
53
53
|
emits: ["input", "update:modelValue"],
|
|
54
|
-
setup(O, {
|
|
54
|
+
setup(O, { emit: b }) {
|
|
55
55
|
const i = O;
|
|
56
|
-
|
|
57
|
-
const
|
|
56
|
+
E();
|
|
57
|
+
const W = y(), m = y(), g = y(!1), f = y(!1);
|
|
58
58
|
async function A(n) {
|
|
59
59
|
var o, e;
|
|
60
60
|
const s = n.getElementsByTagName("img");
|
|
61
61
|
for (let a of s) {
|
|
62
62
|
const t = a.src;
|
|
63
63
|
if (t.startsWith("http://") || t.startsWith("https://")) {
|
|
64
|
-
const r = await
|
|
64
|
+
const r = await M(t);
|
|
65
65
|
if (r.width < i.imageMinWidth && r.height < i.imageMinHeight || r.width > i.imageMaxWidth && r.height > i.imageMaxHeight) {
|
|
66
66
|
(o = a == null ? void 0 : a.remove) == null || o.call(a);
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
|
-
const w = t.split("."),
|
|
70
|
-
if (!i.imageAllowedType.includes(
|
|
69
|
+
const w = t.split("."), C = w[w.length - 1].toLowerCase();
|
|
70
|
+
if (!i.imageAllowedType.includes(C)) {
|
|
71
71
|
(e = a == null ? void 0 : a.remove) == null || e.call(a);
|
|
72
72
|
return;
|
|
73
73
|
}
|
|
@@ -82,7 +82,7 @@ const Se = /* @__PURE__ */ F({
|
|
|
82
82
|
t[a] = e.charCodeAt(a);
|
|
83
83
|
return new Blob([t], { type: o });
|
|
84
84
|
};
|
|
85
|
-
function
|
|
85
|
+
function M(n) {
|
|
86
86
|
return new Promise((s) => {
|
|
87
87
|
const o = new Image();
|
|
88
88
|
o.onload = function() {
|
|
@@ -92,7 +92,7 @@ const Se = /* @__PURE__ */ F({
|
|
|
92
92
|
}
|
|
93
93
|
function T(n, s) {
|
|
94
94
|
return new Promise((o) => {
|
|
95
|
-
new
|
|
95
|
+
new L(n, {
|
|
96
96
|
...s,
|
|
97
97
|
success: async (e) => {
|
|
98
98
|
o({ success: !0, file: e });
|
|
@@ -103,20 +103,20 @@ const Se = /* @__PURE__ */ F({
|
|
|
103
103
|
});
|
|
104
104
|
});
|
|
105
105
|
}
|
|
106
|
-
const h =
|
|
106
|
+
const h = z(
|
|
107
107
|
() => _([i.paste_preprocess, d.paste_preprocess], {
|
|
108
108
|
type: Function
|
|
109
109
|
})
|
|
110
|
-
), v =
|
|
110
|
+
), v = z(
|
|
111
111
|
() => _([i.paste_postprocess, d.paste_postprocess], {
|
|
112
112
|
type: Function
|
|
113
113
|
})
|
|
114
|
-
), c =
|
|
114
|
+
), c = z(
|
|
115
115
|
() => _([i.imageUploadHandle, d.imageUploadHandle], {
|
|
116
116
|
type: Function
|
|
117
117
|
})
|
|
118
118
|
);
|
|
119
|
-
return
|
|
119
|
+
return F(() => {
|
|
120
120
|
const n = {
|
|
121
121
|
/** 需要配置到外部 */
|
|
122
122
|
// 设置语言
|
|
@@ -124,7 +124,7 @@ const Se = /* @__PURE__ */ F({
|
|
|
124
124
|
language: "zh_CN",
|
|
125
125
|
/** 需要配置到外部 */
|
|
126
126
|
// 实例
|
|
127
|
-
target:
|
|
127
|
+
target: W.value,
|
|
128
128
|
// 隐藏品牌
|
|
129
129
|
branding: !1,
|
|
130
130
|
// 隐藏右上角升级按钮
|
|
@@ -186,12 +186,6 @@ const Se = /* @__PURE__ */ F({
|
|
|
186
186
|
convert_urls: !1,
|
|
187
187
|
paste_webkit_styles: "all",
|
|
188
188
|
paste_data_images: !0,
|
|
189
|
-
menu: {
|
|
190
|
-
insert: {
|
|
191
|
-
title: "菜单",
|
|
192
|
-
items: "link"
|
|
193
|
-
}
|
|
194
|
-
},
|
|
195
189
|
// 粘贴前处理
|
|
196
190
|
paste_preprocess(o, e) {
|
|
197
191
|
var a;
|
|
@@ -208,16 +202,16 @@ const Se = /* @__PURE__ */ F({
|
|
|
208
202
|
var x, V, B;
|
|
209
203
|
const t = (V = (x = d.message) == null ? void 0 : x.loading) == null ? void 0 : V.call(x);
|
|
210
204
|
let r = o.blob();
|
|
211
|
-
const w = o.base64(),
|
|
205
|
+
const w = o.base64(), C = o.filename(), P = r.name.split("."), R = P[P.length - 1].toLowerCase();
|
|
212
206
|
if (r.size > i.imageMaxSize * 1024 * 1024)
|
|
213
207
|
return t == null || t.close(), a({ message: `请上传大小不超过${i.imageMaxSize}M的图片`, remove: !0 });
|
|
214
208
|
if (!i.imageAllowedMineType.includes(r.type))
|
|
215
209
|
return t == null || t.close(), a({ message: `请上传格式为${i.imageAllowedType.map((u) => u.toUpperCase()).join("、")}的图片`, remove: !0 });
|
|
216
|
-
const U = "data:" + r.type + ";base64," + w, p = await
|
|
210
|
+
const U = "data:" + r.type + ";base64," + w, p = await M(U);
|
|
217
211
|
if (p.width < i.imageMinWidth && p.height < i.imageMinHeight || p.width > i.imageMaxWidth && p.height > i.imageMaxHeight)
|
|
218
212
|
return t == null || t.close(), a({ message: `请上传像素不低于${i.imageMinWidth}*${i.imageMinHeight}且像素不高于${i.imageMaxWidth}*${i.imageMaxHeight}的图片`, remove: !0 });
|
|
219
213
|
const l = {};
|
|
220
|
-
["image/heif", "image/heic", "image/webp"].includes(
|
|
214
|
+
["image/heif", "image/heic", "image/webp"].includes(R) && (l.convertTypes = [r.type], l.convertSize = 0);
|
|
221
215
|
const S = 5 * 1024 * 1024;
|
|
222
216
|
if (r.size > S && (l.convertTypes = [r.type], l.convertSize = S, l.maxWidth = p.width * (S / r.size)), Object.keys(l).length > 0) {
|
|
223
217
|
const u = await T(H(U), l);
|
|
@@ -228,10 +222,10 @@ const Se = /* @__PURE__ */ F({
|
|
|
228
222
|
}
|
|
229
223
|
if (!c.value)
|
|
230
224
|
return t == null || t.close(), a({ message: "缺少图片上传配置", remove: !0 });
|
|
231
|
-
const
|
|
232
|
-
if (!
|
|
233
|
-
return t == null || t.close(), a({ message:
|
|
234
|
-
t == null || t.close(), e(
|
|
225
|
+
const k = await ((B = c.value) == null ? void 0 : B.call(c, r, C));
|
|
226
|
+
if (!k.success)
|
|
227
|
+
return t == null || t.close(), a({ message: k.errorMessage, remove: !0 });
|
|
228
|
+
t == null || t.close(), e(k.url);
|
|
235
229
|
});
|
|
236
230
|
}
|
|
237
231
|
}, s = _(
|
|
@@ -247,7 +241,7 @@ const Se = /* @__PURE__ */ F({
|
|
|
247
241
|
type: Object
|
|
248
242
|
}
|
|
249
243
|
);
|
|
250
|
-
|
|
244
|
+
q.init(s).then(([o]) => {
|
|
251
245
|
var e;
|
|
252
246
|
o.on("change input Redo Undo SetContent", () => {
|
|
253
247
|
if (f.value) {
|
|
@@ -255,12 +249,12 @@ const Se = /* @__PURE__ */ F({
|
|
|
255
249
|
return;
|
|
256
250
|
}
|
|
257
251
|
g.value = !0, b("input", o.getContent()), b("update:modelValue", o.getContent());
|
|
258
|
-
}), m.value = o, (e = i.initComplete) == null || e.call(i);
|
|
252
|
+
}), m.value = o, (e = i.initComplete) == null || e.call(i, { editorIns: o });
|
|
259
253
|
});
|
|
260
|
-
}),
|
|
254
|
+
}), N(() => {
|
|
261
255
|
var n;
|
|
262
256
|
(n = m.value) == null || n.destroy();
|
|
263
|
-
}),
|
|
257
|
+
}), j(
|
|
264
258
|
() => [i.value, i.modelValue, m.value],
|
|
265
259
|
() => {
|
|
266
260
|
var n;
|
|
@@ -271,10 +265,7 @@ const Se = /* @__PURE__ */ F({
|
|
|
271
265
|
f.value = !0, (n = m.value) == null || n.setContent(i.value ? i.value : i.modelValue ? i.modelValue : "");
|
|
272
266
|
},
|
|
273
267
|
{ immediate: !0 }
|
|
274
|
-
),
|
|
275
|
-
insRef: M,
|
|
276
|
-
editorRef: m
|
|
277
|
-
}), { __sfc: !0, insRef: M, editorRef: m, preventSettingContent: g, preventUpdatingModelValue: f, props: i, emits: b, processPastedImage: A, dataURLtoBlob: H, getImagePixel: C, compressorImage: T, paste_preprocess: h, paste_postprocess: v, imageUploadHandle: c };
|
|
268
|
+
), { __sfc: !0, insRef: W, editorRef: m, preventSettingContent: g, preventUpdatingModelValue: f, props: i, emits: b, processPastedImage: A, dataURLtoBlob: H, getImagePixel: M, compressorImage: T, paste_preprocess: h, paste_postprocess: v, imageUploadHandle: c };
|
|
278
269
|
}
|
|
279
270
|
});
|
|
280
271
|
export {
|
package/es/index.d.ts
CHANGED
|
@@ -85,7 +85,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
|
|
|
85
85
|
}) => void>;
|
|
86
86
|
};
|
|
87
87
|
initComplete: {
|
|
88
|
-
type: import('vue').PropType<(
|
|
88
|
+
type: import('vue').PropType<(params: {
|
|
89
|
+
editorIns: Editor;
|
|
90
|
+
}) => void>;
|
|
89
91
|
};
|
|
90
92
|
options: {
|
|
91
93
|
type: import('vue').PropType<Partial<RawEditorOptions>>;
|
|
@@ -148,7 +150,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
|
|
|
148
150
|
}) => void>;
|
|
149
151
|
};
|
|
150
152
|
initComplete: {
|
|
151
|
-
type: import('vue').PropType<(
|
|
153
|
+
type: import('vue').PropType<(params: {
|
|
154
|
+
editorIns: Editor;
|
|
155
|
+
}) => void>;
|
|
152
156
|
};
|
|
153
157
|
options: {
|
|
154
158
|
type: import('vue').PropType<Partial<RawEditorOptions>>;
|
|
@@ -225,16 +229,15 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
|
|
|
225
229
|
}) => void>;
|
|
226
230
|
};
|
|
227
231
|
initComplete: {
|
|
228
|
-
type: import('vue').PropType<(
|
|
232
|
+
type: import('vue').PropType<(params: {
|
|
233
|
+
editorIns: Editor;
|
|
234
|
+
}) => void>;
|
|
229
235
|
};
|
|
230
236
|
options: {
|
|
231
237
|
type: import('vue').PropType<Partial<RawEditorOptions>>;
|
|
232
238
|
default: () => {};
|
|
233
239
|
};
|
|
234
|
-
}>>> & import('vue').ShallowUnwrapRef<{
|
|
235
|
-
insRef: import('vue').Ref<HTMLElement | undefined>;
|
|
236
|
-
editorRef: import('vue').Ref<Editor | undefined>;
|
|
237
|
-
}> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
|
|
240
|
+
}>>> & import('vue').ShallowUnwrapRef<{}> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
|
|
238
241
|
value: {
|
|
239
242
|
type: import('vue').PropType<string>;
|
|
240
243
|
default: string;
|
|
@@ -291,7 +294,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
|
|
|
291
294
|
}) => void>;
|
|
292
295
|
};
|
|
293
296
|
initComplete: {
|
|
294
|
-
type: import('vue').PropType<(
|
|
297
|
+
type: import('vue').PropType<(params: {
|
|
298
|
+
editorIns: Editor;
|
|
299
|
+
}) => void>;
|
|
295
300
|
};
|
|
296
301
|
options: {
|
|
297
302
|
type: import('vue').PropType<Partial<RawEditorOptions>>;
|
|
@@ -354,16 +359,15 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
|
|
|
354
359
|
}) => void>;
|
|
355
360
|
};
|
|
356
361
|
initComplete: {
|
|
357
|
-
type: import('vue').PropType<(
|
|
362
|
+
type: import('vue').PropType<(params: {
|
|
363
|
+
editorIns: Editor;
|
|
364
|
+
}) => void>;
|
|
358
365
|
};
|
|
359
366
|
options: {
|
|
360
367
|
type: import('vue').PropType<Partial<RawEditorOptions>>;
|
|
361
368
|
default: () => {};
|
|
362
369
|
};
|
|
363
|
-
}>>, {
|
|
364
|
-
insRef: import('vue').Ref<HTMLElement | undefined>;
|
|
365
|
-
editorRef: import('vue').Ref<Editor | undefined>;
|
|
366
|
-
}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
|
|
370
|
+
}>>, {}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
|
|
367
371
|
input: (value: string) => void;
|
|
368
372
|
"update:modelValue": (value: string) => void;
|
|
369
373
|
}, string, {
|
|
@@ -435,7 +439,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
|
|
|
435
439
|
}) => void>;
|
|
436
440
|
};
|
|
437
441
|
initComplete: {
|
|
438
|
-
type: import('vue').PropType<(
|
|
442
|
+
type: import('vue').PropType<(params: {
|
|
443
|
+
editorIns: Editor;
|
|
444
|
+
}) => void>;
|
|
439
445
|
};
|
|
440
446
|
options: {
|
|
441
447
|
type: import('vue').PropType<Partial<RawEditorOptions>>;
|
package/package.json
CHANGED