You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+54-17Lines changed: 54 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,18 +4,42 @@
4
4
5
5
English | [简体中文](./README-zh_CN.md)
6
6
7
-
The purpose of this plugin is to set the language when using `monaco-editor`. The main implementation idea is to achieve language switching by overriding the `monaco-editor/esm/vs/nls.js`.
7
+
The purpose of this plugin is to set the interface language when using `monaco-editor`. The main implementation idea is to override the `monaco-editor/esm/vs/nls.js` file to achieve the effect of interface language switching.
8
+
9
+
10
+
## Version difference
11
+
12
+
- The 0.x: When your product only has one interface language (does not need to support internationalization, such as only supporting Chinese), please use version [0.x](https://github.com/DTStack/monaco-editor-i18n-plugin/tree/0.x-stable).
13
+
- The latest: When your product needs to support internationalization (the product page supports switching interface languages), please use the latest version.
14
+
8
15
9
16
## Install
10
17
11
18
`npm install monaco-editor-i18n-plugin -D`
12
19
13
-
## Usage
14
20
15
-
### dt-zh-hans
21
+
## Languages
22
+
23
+
### dt-zh-hans (Simplified version for dtstack)
16
24
17
25
The used `src/locale/dt-zh-hans.json` is lite based on [vscode-loc/i18n/zh-hans](https://github.com/microsoft/vscode-loc/blob/release/1.63.3/i18n/vscode-language-pack-zh-hans/translations/main.i18n.json).
18
26
27
+
### Simplified Chinese (Full version)
28
+
29
+
The used `src/locale/zh-hans.json` is from [vscode-loc/i18n/zh-hans](https://github.com/microsoft/vscode-loc/blob/release/1.63.3/i18n/vscode-language-pack-zh-hans/translations/main.i18n.json)。
30
+
31
+
### custom languages
32
+
33
+
If you want to use another language or if the `src/locale/dt-zh-hans.json` doesn't meet your requirements, you can get another's JSON file from [vscode-loc/i18n](https://github.com/microsoft/vscode-loc/tree/release/1.63.3/i18n).
34
+
35
+
36
+
If you want to use another languages or if the simplified `src/scale/dt-zh-hans.json` file does not meet the requirements, you can find JSON files in other languages in [vscode-loc/i18n](https://github.com/microsoft/vscode-loc/tree/release/1.63.3/i18n), modify them, and place them in your project folder for custom path usage.
37
+
38
+
39
+
## Example usage
40
+
41
+
### configuration item
42
+
19
43
-`ko.config.js`[ko - Project toolkit for React Applications](https://github.com/DTStack/ko)
20
44
21
45
```js
@@ -30,7 +54,8 @@ const plugin = [
30
54
name:'MonacoEditorI18nPlugin',
31
55
fn: () => {
32
56
returnnewMonacoEditorI18nPlugin({
33
-
locale:"dt-zh-hans",
57
+
windowKey:'__DT_LOCALE__',
58
+
localStorageKey:'dt-locale',
34
59
});
35
60
},
36
61
},
@@ -47,35 +72,47 @@ module.exports = {
47
72
...,
48
73
plugins: [
49
74
newMonacoEditorI18nPlugin({
50
-
locale:"dt-zh-hans",
75
+
windowKey:'__DT_LOCALE__',
76
+
localStorageKey:'dt-locale',
51
77
})
52
78
],
53
79
...,
54
80
};
55
81
```
56
82
57
-
### Simplified Chinese
83
+
### Instructions
58
84
59
-
The used `src/locale/zh-hans.json`is from [vscode-loc/i18n/zh-hans](https://github.com/microsoft/vscode-loc/blob/release/1.63.3/i18n/vscode-language-pack-zh-hans/translations/main.i18n.json)。
85
+
The interface language content used needs to be mounted on the `window` object in the engineering code, with the default key value is `__DT_LOCALE__`. `En US`is the default language for `monaco-editor`, and a value of an empty object is sufficient. The subsequent reading of interface language content will be done from the `window` object. The mounting example is as follows:
// Mount the interface language content onto the window object
92
+
window.__DT_LOCALE__= {
93
+
'zh-hant': zhHant?.contents|| {},
94
+
'dt-zh-hans': dtZhHans?.contents|| {},
95
+
'en-US': {},
96
+
};
65
97
```
66
98
67
-
### custom languages
68
-
69
-
If you want to use another language or if the `src/locale/dt-zh-hans.json` doesn't meet your requirements, you can get another's JSON file from [vscode-loc/i18n](https://github.com/microsoft/vscode-loc/tree/release/1.63.3/i18n).
99
+
When switching interface languages, it is necessary to synchronize the language name to the localStorage. The switching example is as follows:
70
100
71
101
```js
72
-
newMonacoEditorI18nPlugin({
73
-
customLocalePath:path.join(__dirname, "./zh-hant.json"), // Traditional Chinese
74
-
});
102
+
functionsetLocale(value:string) {
103
+
window.localStorage.setItem('dt-locale', value);
104
+
}
105
+
106
+
setLocale('dt-zh-hans');
75
107
```
76
108
109
+
> **Important**
110
+
>
111
+
> - If the interface language of `monaco-editor` does not change with the product page, please note that the mounting timing of `window.__DT_LOCALE__` should be as early as possible.
112
+
113
+
77
114
## Notice
78
115
79
116
- The currently verified versions of `monaco-editor` are `0.30.1` and `0.31.1`.
80
-
- The version of `vscode-loc` is `1.63.3`.
117
+
- The corresponding version of `vscode doc` is `1.63.3`.
81
118
- If custom language doesn't work, it may be due to a mismatch between the versions of the two packages. The JSON file structure in later versions of `vscode-loc` has changed, so please verify it by yourself.
0 commit comments