From 1b4335760ba0183a1089ef329abe905ecdc7a340 Mon Sep 17 00:00:00 2001 From: xingyu4j Date: Wed, 3 Sep 2025 18:03:45 +0800 Subject: [PATCH] fix: tinymce --- apps/web-antd/package.json | 1 + .../src/components/tinymce/editor.vue | 51 +++++++------------ pnpm-lock.yaml | 19 +++++-- pnpm-workspace.yaml | 1 + 4 files changed, 37 insertions(+), 35 deletions(-) diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json index f92c5c90b..6d001275d 100644 --- a/apps/web-antd/package.json +++ b/apps/web-antd/package.json @@ -50,6 +50,7 @@ "dayjs": "catalog:", "highlight.js": "catalog:", "pinia": "catalog:", + "tinymce": "catalog:", "vue": "catalog:", "vue-dompurify-html": "catalog:", "vue-router": "catalog:", diff --git a/apps/web-antd/src/components/tinymce/editor.vue b/apps/web-antd/src/components/tinymce/editor.vue index cb874f6c9..722073cf7 100644 --- a/apps/web-antd/src/components/tinymce/editor.vue +++ b/apps/web-antd/src/components/tinymce/editor.vue @@ -2,8 +2,6 @@ import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes'; import type { Editor as EditorType } from 'tinymce/tinymce'; -import type { PropType } from 'vue'; - import { computed, nextTick, @@ -35,37 +33,26 @@ type InitOptions = IPropTypes['init']; defineOptions({ name: 'Tinymce', inheritAttrs: false }); -const props = defineProps({ - options: { - type: Object as PropType>, - default: () => ({}), - }, - toolbar: { - type: String, - default: defaultToolbar, - }, - plugins: { - type: String, - default: defaultPlugins, - }, - height: { - type: [Number, String] as PropType, - required: false, - default: 400, - }, - width: { - type: [Number, String] as PropType, - required: false, - default: 'auto', - }, - showImageUpload: { - type: Boolean, - default: true, - }, +const props = withDefaults(defineProps(), { + height: 400, + width: 'auto', + options: () => ({}), + plugins: defaultPlugins, + toolbar: defaultToolbar, + showImageUpload: true, }); const emit = defineEmits(['change']); +interface TinymacProps { + options?: Partial; + toolbar?: string; + plugins?: string; + height?: number | string; + width?: number | string; + showImageUpload?: boolean; +} + /** 外部使用 v-model 绑定值 */ const modelValue = defineModel('modelValue', { default: '', type: String }); @@ -151,7 +138,7 @@ const initOptions = computed((): InitOptions => { 'bold italic | quicklink h2 h3 blockquote quickimage quicktable', toolbar_mode: 'sliding', ...options, - images_upload_handler: (blobInfo) => { + images_upload_handler: (blobInfo: any) => { return new Promise((resolve, reject) => { const file = blobInfo.blob() as File; const { httpRequest } = useUpload(); @@ -165,9 +152,9 @@ const initOptions = computed((): InitOptions => { }); }); }, - setup: (editor) => { + setup: (editor: EditorType) => { editorRef.value = editor; - editor.on('init', (e) => initSetup(e)); + editor.on('init', (e: any) => initSetup(e)); }, }; }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a79ffc7df..22fdb51f4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -495,6 +495,9 @@ catalogs: theme-colors: specifier: ^0.1.0 version: 0.1.0 + tinymce: + specifier: ^7.3.0 + version: 7.9.1 tippy.js: specifier: ^6.3.7 version: 6.3.7 @@ -724,7 +727,7 @@ importers: version: 3.3.0(vue@3.5.18(typescript@5.9.2)) '@tinymce/tinymce-vue': specifier: 'catalog:' - version: 6.3.0(vue@3.5.18(typescript@5.9.2)) + version: 6.3.0(tinymce@7.9.1)(vue@3.5.18(typescript@5.9.2)) '@vben/access': specifier: workspace:* version: link:../../packages/effects/access @@ -788,6 +791,9 @@ importers: pinia: specifier: ^3.0.3 version: 3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)) + tinymce: + specifier: 'catalog:' + version: 7.9.1 vue: specifier: ^3.5.17 version: 3.5.18(typescript@5.9.2) @@ -811,7 +817,7 @@ importers: version: 3.2.28(vue@3.5.18(typescript@5.9.2)) '@tinymce/tinymce-vue': specifier: 'catalog:' - version: 6.3.0(vue@3.5.18(typescript@5.9.2)) + version: 6.3.0(tinymce@7.9.1)(vue@3.5.18(typescript@5.9.2)) '@vben/access': specifier: workspace:* version: link:../../packages/effects/access @@ -10774,6 +10780,9 @@ packages: resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==} engines: {node: '>=12.0.0'} + tinymce@7.9.1: + resolution: {integrity: sha512-zaOHwmiP1EqTeLRXAvVriDb00JYnfEjWGPdKEuac7MiZJ5aiDMZ4Unc98Gmajn+PBljOmO1GKV6G0KwWn3+k8A==} + tinypool@1.1.1: resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==} engines: {node: ^18.0.0 || >=20.0.0} @@ -14692,9 +14701,11 @@ snapshots: '@tanstack/virtual-core': 3.13.12 vue: 3.5.18(typescript@5.9.2) - '@tinymce/tinymce-vue@6.3.0(vue@3.5.18(typescript@5.9.2))': + '@tinymce/tinymce-vue@6.3.0(tinymce@7.9.1)(vue@3.5.18(typescript@5.9.2))': dependencies: vue: 3.5.18(typescript@5.9.2) + optionalDependencies: + tinymce: 7.9.1 '@tootallnate/once@1.1.2': {} @@ -21446,6 +21457,8 @@ snapshots: fdir: 6.5.0(picomatch@4.0.3) picomatch: 4.0.3 + tinymce@7.9.1: {} + tinypool@1.1.1: {} tinyrainbow@2.0.0: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 786733a5c..0c4be45e3 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -182,6 +182,7 @@ catalog: tailwindcss-animate: ^1.0.7 theme-colors: ^0.1.0 tippy.js: ^6.3.7 + tinymce: ^7.3.0 turbo: ^2.5.4 typescript: ^5.8.3 unbuild: ^3.6.1