Browse Source

Update i18n module doc with Plugin development section

pull/2385/head
Artur Arseniev 6 years ago
parent
commit
5f036b1f0e
  1. 79
      docs/modules/I18n.md

79
docs/modules/I18n.md

@ -139,4 +139,81 @@ We need to find the way to update the UI
## Plugin development
If you're developing a plugin for GrapesJS and you need to support some string localization or simply...
::: warning
This section is dedicated **only** to plugin developers and can also be skipped in case you use [grapesjs-cli](https://github.com/artf/grapesjs-cli) to init your plugin project
:::
If you're developing a plugin for GrapesJS and you need to support some string localization or simply change the default one, we recommend the following structure.
```
plugin-dir
- package.json
- README.md
- ...
- src
- index.js
- locale // create the locale foldar in your src
- en.js // All default strings should be placed here
```
For your plugin specific strings, place them under the plugin name key
```js
// src/locale/en.js
export default {
'grapesjs-plugin-name': {
yourKey: 'Your value',
}
}
```
In your `index.js` use the `en.js` file and add `i18n` option to allow import of other local files
```js
// src/index.js
import en from 'locale/en';
export default (editor, opts = {}) => {
const options = {
i18n: {},
// ...
...opts,
};
// ...
editor.I18n.addMessages({
en,
...i18n,
});
}
```
The next step would be to compile your locale files into `<rootDir>/locale` directory to make easily accessible by your users. This folder could be ignored in your git repository be should be deployd to the npm registry
::: warning
Remember that you can skip all these long steps and init your project with [grapesjs-cli](https://github.com/artf/grapesjs-cli). This will create all the necessary folders/files/commands for you (during `init` command this step is flagged `true` by default and we recommend to keep it even in case the i18n is not required in your project)
:::
At the end, your plugin users will be able to import other local files (if they exist) in this way
```js
import grapesjs from 'grapesjs';
// Import from your plugin
import yourPlugin from 'grapesjs-your-plugin';
import ch from 'grapesjs-your-plugin/locale/ch';
import fr from 'grapesjs-your-plugin/locale/fr';
const editor = grapesjs.init({
...
plugins: [ yourPlugin ],
pluginsOpts: {
[yourPlugin]: {
i18n: { ch, fr }
}
}
});
```

Loading…
Cancel
Save