From 83c9cd77421e9c0888a41e2d8dcbca816da67488 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Thu, 27 May 2021 22:16:40 +0800
Subject: [PATCH] feat(tinymce): support dark theme and I18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

支持暗黑主题和中英文（暂不支持动态切换）
---
 src/components/Tinymce/src/Editor.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index 2a23bd60..f3986765 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;
-- 
GitLab