feat(tinymce): support dark theme and I18n

支持暗黑主题和中英文（暂不支持动态切换）
vbenjs · May 27, 2021 · 83c9cd7 · 83c9cd7
1 parent ba2bebb
commit 83c9cd7
Showing 1 changed file with 19 additions and 5 deletions.
diff --git 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;