canrd-outside / order-erp-front · Commits

Commit 83c9cd77421e9c0888a41e2d8dcbca816da67488

Authored by 无木
1 parent ba2bebb4

feat(tinymce): support dark theme and I18n 

支持暗黑主题和中英文（暂不支持动态切换）
Inline Side-by-side
Showing 1 changed file with 19 additions and 5 deletions
src/components/Tinymce/src/Editor.vue
  View file @83c9cd7
... ... @@ -66,6 +66,8 @@
66 66 import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
67 67 import { useDesign } from '/@/hooks/web/useDesign';
68 68 import { isNumber } from '/@/utils/is';
  69 + import { useLocale } from '/@/locales/useLocale';
  70 + import { useAppStore } from '/@/store/modules/app';
69 71  
70 72 const tinymceProps = {
71 73 options: {
... ... @@ -118,6 +120,8 @@
118 120  
119 121 const { prefixCls } = useDesign('tinymce-container');
120 122  
  123 + const appStore = useAppStore();
  124 +
121 125 const tinymceContent = computed(() => props.modelValue);
122 126  
123 127 const containerWidth = computed(() => {
... ... @@ -128,6 +132,15 @@
128 132 return width;
129 133 });
130 134  
  135 + const skinName = computed(() => {
  136 + return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
  137 + });
  138 +
  139 + const langName = computed(() => {
  140 + const lang = useLocale().getLocale.value;
  141 + return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
  142 + });
  143 +
131 144 const initOptions = computed(() => {
132 145 const { height, options, toolbar, plugins } = props;
133 146 const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
... ... @@ -137,15 +150,16 @@
137 150 toolbar,
138 151 menubar: 'file edit insert view format table',
139 152 plugins,
140   - language_url: publicPath + 'resource/tinymce/langs/zh_CN.js',
141   - language: 'zh_CN',
  153 + language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
  154 + language: langName.value,
142 155 branding: false,
143 156 default_link_target: '_blank',
144 157 link_title: false,
145 158 object_resizing: false,
146   - skin: 'oxide',
147   - skin_url: publicPath + 'resource/tinymce/skins/ui/oxide',
148   - content_css: publicPath + 'resource/tinymce/skins/ui/oxide/content.min.css',
  159 + skin: skinName.value,
  160 + skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
  161 + content_css:
  162 + publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
149 163 ...options,
150 164 setup: (editor: any) => {
151 165 editorRef.value = editor;
... ...