富文本编辑器支持国际化

Author: zhontai

ui/zhontai.ui.admin.vue3/src/components/my-cron/dialog.vue

@@ -16,7 +16,7 @@ import { t } from '/@/i18n'
 defineProps({
   title: {
     type: String,
-    default: 'Cron表达式生成器',
+    default: () => t('Cron表达式生成器'),
   },
 })
 

ui/zhontai.ui.admin.vue3/src/components/my-editor/index.vue

@@ -16,10 +16,10 @@
 <script setup lang="ts" name="wngEditor">
 // https://www.wangeditor.com/v5/for-frame.html#vue3
 import '@wangeditor/editor/dist/css/style.css'
-import { IDomEditor } from '@wangeditor/editor'
+import { IDomEditor, i18nChangeLanguage, i18nAddResources } from '@wangeditor/editor'
 import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
 import { FileApi } from '/@/api/admin/File'
-import { t } from '/@/i18n'
+import { t, locale } from '/@/i18n'
 
 type InsertFnType = (url: string, alt: string, href: string) => void
 type InsertVideoFnType = (url: string, poster: string) => void
@@ -113,6 +113,146 @@ const handleChange = (editor: IDomEditor) => {
   emit('update:modelValue', editor.getHtml())
   emit('update:getText', editor.getText())
 }
+
+onMounted(() => {
+  if (locale.value === 'en') {
+    i18nChangeLanguage('en')
+  } else if (locale.value === 'zh-tw') {
+    i18nAddResources('zh-TW', {
+      editor: {
+        more: '更多',
+        justify: '對齊',
+        indent: '縮排',
+        image: '圖片',
+        video: '影片',
+      },
+      common: {
+        ok: '確定',
+        delete: '刪除',
+        enter: '換行',
+      },
+      blockQuote: {
+        title: '引用',
+      },
+      codeBlock: {
+        title: '程式碼區塊',
+      },
+      color: {
+        color: '文字顏色',
+        bgColor: '背景色',
+        default: '預設顏色',
+        clear: '清除背景色',
+      },
+      divider: {
+        title: '分隔線',
+      },
+      emotion: {
+        title: '表情',
+      },
+      fontSize: {
+        title: '字號',
+        default: '預設字號',
+      },
+      fontFamily: {
+        title: '字型',
+        default: '預設字型',
+      },
+      fullScreen: {
+        title: '全螢幕',
+      },
+      header: {
+        title: '標題',
+        text: '內文',
+      },
+      image: {
+        netImage: '網路圖片',
+        delete: '刪除圖片',
+        edit: '編輯圖片',
+        viewLink: '查看連結',
+        src: '圖片位址',
+        desc: '圖片描述',
+        link: '圖片連結',
+      },
+      indent: {
+        decrease: '減少縮排',
+        increase: '增加縮排',
+      },
+      justify: {
+        left: '左對齊',
+        right: '右對齊',
+        center: '置中對齊',
+        justify: '兩端對齊',
+      },
+      lineHeight: {
+        title: '行高',
+        default: '預設行高',
+      },
+      link: {
+        insert: '插入連結',
+        text: '連結文字',
+        url: '連結位址',
+        unLink: '取消連結',
+        edit: '修改連結',
+        view: '查看連結',
+      },
+      textStyle: {
+        bold: '粗體',
+        clear: '清除格式',
+        code: '行內程式碼',
+        italic: '斜體',
+        sub: '下標',
+        sup: '上標',
+        through: '刪除線',
+        underline: '底線',
+      },
+      undo: {
+        undo: '復原',
+        redo: '重做',
+      },
+      todo: {
+        todo: '待辦',
+      },
+      listModule: {
+        unOrderedList: '無序清單',
+        orderedList: '有序清單',
+      },
+      tableModule: {
+        deleteCol: '刪除欄',
+        deleteRow: '刪除列',
+        deleteTable: '刪除表格',
+        widthAuto: '寬度自動調整',
+        insertCol: '插入欄',
+        insertRow: '插入列',
+        insertTable: '插入表格',
+        header: '表頭',
+      },
+      videoModule: {
+        delete: '刪除影片',
+        uploadVideo: '上傳影片',
+        insertVideo: '插入影片',
+        videoSrc: '影片位址',
+        videoSrcPlaceHolder: '影片檔案 url 或第三方 <iframe>',
+        videoPoster: '影片封面',
+        videoPosterPlaceHolder: '封面圖片 url',
+        ok: '確定',
+        editSize: '修改尺寸',
+        width: '寬度',
+        height: '高度',
+      },
+      uploadImgModule: {
+        uploadImage: '上傳圖片',
+        uploadError: '{{fileName}} 上傳出錯',
+      },
+      highLightModule: {
+        selectLang: '選擇語言',
+      },
+    })
+    i18nChangeLanguage('zh-TW')
+  } else {
+    i18nChangeLanguage('zh-CN')
+  }
+})
+
 // 页面销毁时
 onBeforeUnmount(() => {
   const editor = editorRef.value

ui/zhontai.ui.admin.vue3/src/i18n/admin/en.ts

@@ -1043,4 +1043,6 @@ export default {
   参考样例: 'Reference Examples',
   操作成功: 'Operation successful',
   操作失败: 'Operation failed',
+  后台权限管理框架: 'Backend Permission Management Framework',
+  Cron表达式生成器: 'Cron Expression Generator',
 }

ui/zhontai.ui.admin.vue3/src/i18n/admin/zh-tw.ts

@@ -1036,4 +1036,6 @@ export default {
   平台管理: '平台管理',
   帮助文档: '幫助文檔',
   参考样例: '參考樣例',
+  后台权限管理框架: '後台權限管理框架',
+  Cron表达式生成器: 'Cron表達式生成器',
 }

ui/zhontai.ui.admin.vue3/src/layout/logo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
     <img v-if="showLogoMini" :src="logoMini" class="layout-logo-medium-img" />
-    <span class="my-line-1">{{ themeConfig.globalTitle }}</span>
+    <span class="my-line-1">{{ t(themeConfig.globalTitle) }}</span>
   </div>
   <div class="layout-logo-size" v-else @click="onThemeConfigChange">
     <img v-if="showLogoMini" :src="logoMini" class="layout-logo-size-img" />
@@ -11,6 +11,7 @@
 <script setup lang="ts" name="layoutLogo">
 import { useThemeConfig } from '/@/stores/themeConfig'
 import logoMini from '/@/assets/logo-mini.svg'
+import { t } from '/@/i18n'
 
 // 定义变量内容
 const storesThemeConfig = useThemeConfig()

ui/zhontai.ui.admin.vue3/src/views/admin/login/index.vue

@@ -5,8 +5,8 @@
         <div class="login-left-logo">
           <img :src="logoMini" />
           <div class="login-left-logo-text">
-            <span>{{ getThemeConfig.globalViceTitle }}</span>
-            <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
+            <span>{{ t(getThemeConfig.globalViceTitle) }}</span>
+            <span class="login-left-logo-text-msg">{{ t(getThemeConfig.globalViceTitleMsg) }}</span>
           </div>
         </div>
         <div class="login-left-img">
@@ -34,6 +34,7 @@ import { useThemeConfig } from '/@/stores/themeConfig'
 import { NextLoading } from '/@/utils/loading'
 import logoMini from '/@/assets/logo-mini.svg'
 import loginMain from '/@/assets/login-main.svg'
+import { t } from '/@/i18n'
 
 const LoginForm = defineAsyncComponent(() => import('./form.vue'))