I18n

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
 i18n: {
   locale: 'en',
   localeFallback: 'en',
   messages: {
     it: { hello: 'Ciao', ... },
     ...
   }
 }
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const i18n = editor.I18n;

Available Events

• i18n:add New set of messages is added.

editor.on('i18n:add', (messages) => { ... });

• i18n:update The set of messages is updated.

editor.on('i18n:update', (messages) => { ... });

• i18n:locale Locale changed.

editor.on('i18n:locale', ({ value, valuePrev }) => { ... });

setLocale

Update current locale

Parameters

• locale String (opens new window) Locale value

Examples

i18n.setLocale('it');

Returns this

getLocale

Get current locale

Returns String (opens new window) Current locale value

getMessages

Get all messages

Parameters

• lang String (opens new window)? Specify the language of messages to return

• opts Object (opens new window)? Options (optional, default {})

  • opts.debug Boolean (opens new window)? Show warnings in case of missing language

Examples

i18n.getMessages();
// -> { en: { hello: '...' }, ... }
i18n.getMessages('en');
// -> { hello: '...' }

Returns Object (opens new window)

setMessages

Set new set of messages

Parameters

• msg Object (opens new window) Set of messages

Examples

i18n.getMessages();
// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
i18n.setMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
// Set replaced
i18n.getMessages();
// -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }

Returns this

addMessages

Update messages

Parameters

• msg Object (opens new window) Set of messages to add

Examples

i18n.getMessages();
// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
i18n.addMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
// Set updated
i18n.getMessages();
// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }

Returns this

t

Translate the locale message

Parameters

• key String (opens new window) Label to translate

• opts Object (opens new window)? Options for the translation (optional, default {})

  • opts.params Object (opens new window)? Params for the translation
  • opts.debug Boolean (opens new window)? Show warnings in case of missing resources

Examples

obj.setMessages({
 en: { msg: 'Msg', msg2: 'Msg {test}'},
 it: { msg2: 'Msg {test} it'},
});
obj.t('msg');
// -> outputs `Msg`
obj.t('msg2', { params: { test: 'hello' } });  // use params
// -> outputs `Msg hello`
obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
// -> outputs `Msg hello it`

Returns String (opens new window)

getConfig

Get configuration object

Returns Object (opens new window)