diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue index 2a23bd60e550bef40f9601d2d53401202a2efaab..f39867657b461b6e2d2e04967b3ebc20bd61cfed 100644 --- a/src/components/Tinymce/src/Editor.vue +++ b/src/components/Tinymce/src/Editor.vue @@ -66,6 +66,8 @@ import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'; import { useDesign } from '/@/hooks/web/useDesign'; import { isNumber } from '/@/utils/is'; + import { useLocale } from '/@/locales/useLocale'; + import { useAppStore } from '/@/store/modules/app'; const tinymceProps = { options: { @@ -118,6 +120,8 @@ const { prefixCls } = useDesign('tinymce-container'); + const appStore = useAppStore(); + const tinymceContent = computed(() => props.modelValue); const containerWidth = computed(() => { @@ -128,6 +132,15 @@ return width; }); + const skinName = computed(() => { + return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark'; + }); + + const langName = computed(() => { + const lang = useLocale().getLocale.value; + return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN'; + }); + const initOptions = computed(() => { const { height, options, toolbar, plugins } = props; const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/'; @@ -137,15 +150,16 @@ toolbar, menubar: 'file edit insert view format table', plugins, - language_url: publicPath + 'resource/tinymce/langs/zh_CN.js', - language: 'zh_CN', + language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js', + language: langName.value, branding: false, default_link_target: '_blank', link_title: false, object_resizing: false, - skin: 'oxide', - skin_url: publicPath + 'resource/tinymce/skins/ui/oxide', - content_css: publicPath + 'resource/tinymce/skins/ui/oxide/content.min.css', + skin: skinName.value, + skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value, + content_css: + publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css', ...options, setup: (editor: any) => { editorRef.value = editor;