@keyblade/tinymce-editor-vue2 0.0.5-alpha.4 → 0.0.5-alpha.6

package/README.md

@@ -37,9 +37,7 @@ Vue.use(TinymceEditor, {
 ```text
 <template>
   <TinymceEditor
-    ref="editorRef"
     v-model="text"
-    :initComplete="initComplete"
   />
 </template>
 
@@ -48,13 +46,6 @@ import { onMounted, ref } from 'vue'
 import TinymceEditor from '@keyblade/tinymce-editor-vue2'
 
 const text = ref<string>('')
-const editorRef = ref()
-
-// 组件加载完成
-const initComplete = () => {
-  console.log(editorRef.value.insRef)
-  console.log(editorRef.value.editorRef)
-}
 
 onMounted(() => {
   console.log('onMounted')
@@ -127,7 +118,7 @@ interface ComponentProps {
     readonly internal: boolean;
   }) => void;
   /** 初始化完成 */
-  initComplete?: () => void,
+  initComplete?: (params: { editorIns: Editor }) => void,
   /** 富文本编辑器选项 */
   options?: Partial<RawEditorOptions>
 }

package/es/editor.vue.d.ts

@@ -36,7 +36,9 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
         readonly internal: boolean;
     }) => void) | undefined;
     /** 初始化完成 */
-    initComplete?: (() => void) | undefined;
+    initComplete?: ((params: {
+        editorIns: Editor;
+    }) => void) | undefined;
     /** 富文本编辑器选项 */
     options?: Partial<RawEditorOptions> | undefined;
 }>, {
@@ -50,10 +52,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     imageMaxWidth: number;
     imageMaxHeight: number;
     options: () => {};
-}>, {
-    insRef: import('vue').Ref<HTMLElement | undefined>;
-    editorRef: import('vue').Ref<Editor | undefined>;
-}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
+}>, {}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
     input: (value: string) => void;
     "update:modelValue": (value: string) => void;
 }, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -92,7 +91,9 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
         readonly internal: boolean;
     }) => void) | undefined;
     /** 初始化完成 */
-    initComplete?: (() => void) | undefined;
+    initComplete?: ((params: {
+        editorIns: Editor;
+    }) => void) | undefined;
     /** 富文本编辑器选项 */
     options?: Partial<RawEditorOptions> | undefined;
 }>, {

package/es/editor.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as F, ref as y, computed as W, onMounted as N, onUnmounted as j, watch as L } from "vue";
-import q from "compressorjs";
+import { defineComponent as $, ref as y, computed as z, onMounted as F, onUnmounted as N, watch as j } from "vue";
+import L from "compressorjs";
 import { conclude as _ } from "vue-global-config";
-import E from "tinymce";
-import { addI18n as G } from "./langs/zh_CN.js";
+import q from "tinymce";
+import { addI18n as E } from "./langs/zh_CN.js";
 import "tinymce/skins/ui/oxide/skin";
 import "tinymce/models/dom";
 import "tinymce/themes/silver";
@@ -32,7 +32,7 @@ import "tinymce/plugins/visualblocks";
 import "tinymce/plugins/visualchars";
 import "tinymce/plugins/wordcount";
 import { globalProps as d } from "./index.js";
-const Se = /* @__PURE__ */ F({
+const Se = /* @__PURE__ */ $({
   __name: "editor",
   props: {
     value: { default: "" },
@@ -51,23 +51,23 @@ const Se = /* @__PURE__ */ F({
     options: { default: () => ({}) }
   },
   emits: ["input", "update:modelValue"],
-  setup(O, { expose: R, emit: b }) {
+  setup(O, { emit: b }) {
     const i = O;
-    G();
-    const M = y(), m = y(), g = y(!1), f = y(!1);
+    E();
+    const W = y(), m = y(), g = y(!1), f = y(!1);
     async function A(n) {
       var o, e;
       const s = n.getElementsByTagName("img");
       for (let a of s) {
         const t = a.src;
         if (t.startsWith("http://") || t.startsWith("https://")) {
-          const r = await C(t);
+          const r = await M(t);
           if (r.width < i.imageMinWidth && r.height < i.imageMinHeight || r.width > i.imageMaxWidth && r.height > i.imageMaxHeight) {
             (o = a == null ? void 0 : a.remove) == null || o.call(a);
             return;
           }
-          const w = t.split("."), k = w[w.length - 1].toLowerCase();
-          if (!i.imageAllowedType.includes(k)) {
+          const w = t.split("."), C = w[w.length - 1].toLowerCase();
+          if (!i.imageAllowedType.includes(C)) {
             (e = a == null ? void 0 : a.remove) == null || e.call(a);
             return;
           }
@@ -82,7 +82,7 @@ const Se = /* @__PURE__ */ F({
         t[a] = e.charCodeAt(a);
       return new Blob([t], { type: o });
     };
-    function C(n) {
+    function M(n) {
       return new Promise((s) => {
         const o = new Image();
         o.onload = function() {
@@ -92,7 +92,7 @@ const Se = /* @__PURE__ */ F({
     }
     function T(n, s) {
       return new Promise((o) => {
-        new q(n, {
+        new L(n, {
           ...s,
           success: async (e) => {
             o({ success: !0, file: e });
@@ -103,20 +103,20 @@ const Se = /* @__PURE__ */ F({
         });
       });
     }
-    const h = W(
+    const h = z(
       () => _([i.paste_preprocess, d.paste_preprocess], {
         type: Function
       })
-    ), v = W(
+    ), v = z(
       () => _([i.paste_postprocess, d.paste_postprocess], {
         type: Function
       })
-    ), c = W(
+    ), c = z(
       () => _([i.imageUploadHandle, d.imageUploadHandle], {
         type: Function
       })
     );
-    return N(() => {
+    return F(() => {
       const n = {
         /** 需要配置到外部 */
         // 设置语言
@@ -124,7 +124,7 @@ const Se = /* @__PURE__ */ F({
         language: "zh_CN",
         /** 需要配置到外部 */
         // 实例
-        target: M.value,
+        target: W.value,
         // 隐藏品牌
         branding: !1,
         // 隐藏右上角升级按钮
@@ -186,12 +186,6 @@ const Se = /* @__PURE__ */ F({
         convert_urls: !1,
         paste_webkit_styles: "all",
         paste_data_images: !0,
-        menu: {
-          insert: {
-            title: "菜单",
-            items: "link"
-          }
-        },
         // 粘贴前处理
         paste_preprocess(o, e) {
           var a;
@@ -208,16 +202,16 @@ const Se = /* @__PURE__ */ F({
             var x, V, B;
             const t = (V = (x = d.message) == null ? void 0 : x.loading) == null ? void 0 : V.call(x);
             let r = o.blob();
-            const w = o.base64(), k = o.filename(), P = r.name.split("."), $ = P[P.length - 1].toLowerCase();
+            const w = o.base64(), C = o.filename(), P = r.name.split("."), R = P[P.length - 1].toLowerCase();
             if (r.size > i.imageMaxSize * 1024 * 1024)
               return t == null || t.close(), a({ message: `请上传大小不超过${i.imageMaxSize}M的图片`, remove: !0 });
             if (!i.imageAllowedMineType.includes(r.type))
               return t == null || t.close(), a({ message: `请上传格式为${i.imageAllowedType.map((u) => u.toUpperCase()).join("、")}的图片`, remove: !0 });
-            const U = "data:" + r.type + ";base64," + w, p = await C(U);
+            const U = "data:" + r.type + ";base64," + w, p = await M(U);
             if (p.width < i.imageMinWidth && p.height < i.imageMinHeight || p.width > i.imageMaxWidth && p.height > i.imageMaxHeight)
               return t == null || t.close(), a({ message: `请上传像素不低于${i.imageMinWidth}*${i.imageMinHeight}且像素不高于${i.imageMaxWidth}*${i.imageMaxHeight}的图片`, remove: !0 });
             const l = {};
-            ["image/heif", "image/heic", "image/webp"].includes($) && (l.convertTypes = [r.type], l.convertSize = 0);
+            ["image/heif", "image/heic", "image/webp"].includes(R) && (l.convertTypes = [r.type], l.convertSize = 0);
             const S = 5 * 1024 * 1024;
             if (r.size > S && (l.convertTypes = [r.type], l.convertSize = S, l.maxWidth = p.width * (S / r.size)), Object.keys(l).length > 0) {
               const u = await T(H(U), l);
@@ -228,10 +222,10 @@ const Se = /* @__PURE__ */ F({
             }
             if (!c.value)
               return t == null || t.close(), a({ message: "缺少图片上传配置", remove: !0 });
-            const z = await ((B = c.value) == null ? void 0 : B.call(c, r, k));
-            if (!z.success)
-              return t == null || t.close(), a({ message: z.errorMessage, remove: !0 });
-            t == null || t.close(), e(z.url);
+            const k = await ((B = c.value) == null ? void 0 : B.call(c, r, C));
+            if (!k.success)
+              return t == null || t.close(), a({ message: k.errorMessage, remove: !0 });
+            t == null || t.close(), e(k.url);
           });
         }
       }, s = _(
@@ -247,7 +241,7 @@ const Se = /* @__PURE__ */ F({
           type: Object
         }
       );
-      E.init(s).then(([o]) => {
+      q.init(s).then(([o]) => {
         var e;
         o.on("change input Redo Undo SetContent", () => {
           if (f.value) {
@@ -255,12 +249,12 @@ const Se = /* @__PURE__ */ F({
             return;
           }
           g.value = !0, b("input", o.getContent()), b("update:modelValue", o.getContent());
-        }), m.value = o, (e = i.initComplete) == null || e.call(i);
+        }), m.value = o, (e = i.initComplete) == null || e.call(i, { editorIns: o });
       });
-    }), j(() => {
+    }), N(() => {
       var n;
       (n = m.value) == null || n.destroy();
-    }), L(
+    }), j(
       () => [i.value, i.modelValue, m.value],
       () => {
         var n;
@@ -271,10 +265,7 @@ const Se = /* @__PURE__ */ F({
         f.value = !0, (n = m.value) == null || n.setContent(i.value ? i.value : i.modelValue ? i.modelValue : "");
       },
       { immediate: !0 }
-    ), R({
-      insRef: M,
-      editorRef: m
-    }), { __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 };
+    ), { __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 };
   }
 });
 export {

package/es/index.d.ts

@@ -85,7 +85,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
     initComplete: {
-        type: import('vue').PropType<() => void>;
+        type: import('vue').PropType<(params: {
+            editorIns: Editor;
+        }) => void>;
     };
     options: {
         type: import('vue').PropType<Partial<RawEditorOptions>>;
@@ -148,7 +150,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
     initComplete: {
-        type: import('vue').PropType<() => void>;
+        type: import('vue').PropType<(params: {
+            editorIns: Editor;
+        }) => void>;
     };
     options: {
         type: import('vue').PropType<Partial<RawEditorOptions>>;
@@ -225,16 +229,15 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
     initComplete: {
-        type: import('vue').PropType<() => void>;
+        type: import('vue').PropType<(params: {
+            editorIns: Editor;
+        }) => void>;
     };
     options: {
         type: import('vue').PropType<Partial<RawEditorOptions>>;
         default: () => {};
     };
-}>>> & import('vue').ShallowUnwrapRef<{
-    insRef: import('vue').Ref<HTMLElement | undefined>;
-    editorRef: import('vue').Ref<Editor | undefined>;
-}> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
+}>>> & import('vue').ShallowUnwrapRef<{}> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
     value: {
         type: import('vue').PropType<string>;
         default: string;
@@ -291,7 +294,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
     initComplete: {
-        type: import('vue').PropType<() => void>;
+        type: import('vue').PropType<(params: {
+            editorIns: Editor;
+        }) => void>;
     };
     options: {
         type: import('vue').PropType<Partial<RawEditorOptions>>;
@@ -354,16 +359,15 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
         }) => void>;
     };
     initComplete: {
-        type: import('vue').PropType<() => void>;
+        type: import('vue').PropType<(params: {
+            editorIns: Editor;
+        }) => void>;
     };
     options: {
         type: import('vue').PropType<Partial<RawEditorOptions>>;
         default: () => {};
     };
-}>>, {
-    insRef: import('vue').Ref<HTMLElement | undefined>;
-    editorRef: import('vue').Ref<Editor | undefined>;
-}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, import('vue/types/v3-component-options').ComponentOptionsMixin, import('vue/types/v3-component-options').ComponentOptionsMixin, {
     input: (value: string) => void;
     "update:modelValue": (value: string) => void;
 }, string, {
@@ -435,7 +439,9 @@ declare const TinymceEditor: import('vue/types/v3-component-public-instance').Co
             }) => void>;
         };
         initComplete: {
-            type: import('vue').PropType<() => void>;
+            type: import('vue').PropType<(params: {
+                editorIns: Editor;
+            }) => void>;
         };
         options: {
             type: import('vue').PropType<Partial<RawEditorOptions>>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/tinymce-editor-vue2",
   "description": "KeyBlade Tinymce Editor Vue2",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "0.0.5-alpha.04",
+  "version": "0.0.5-alpha.06",
   "private": false,
   "type": "module",
   "main": "es/index.js",
@@ -21,12 +21,19 @@
   ],
   "dependencies": {
     "compressorjs": "^1.2.1",
-    "vue-global-config": "^0.2.6",
-    "tinymce": "^7.1.0"
+    "vue-global-config": "^0.6.1",
+    "tinymce": "^7.1.0",
+    "vue-demi": "^0.14.7"
   },
   "devDependencies": {},
   "peerDependencies": {
-    "vue": "^2.7.0"
+    "@vue/composition-api": "^1.7.2",
+    "vue": "^2.0.0 || >=3.3.4"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "vite build",