How to support multiple languages?

[jujusharp]

Hi,

I've just found this amazing project, and I wonder is there any document about how to support multiple languages for it?

[artf]

Hi @jujusharp, GrapesJS, on its own, rarely outputs texts, but when it does, often, there is a way to override it. For example, in Style Manager the message you see before selecting an element

could be overridden with this configuration

var editor = grapesjs.init({
  ...
  styleManager: {
    textNoElement: 'Some text',
  }
});

When instead you add, for example, buttons/blocks you specify all the texts

editor.BlockManager.add('blockID', {
  label: 'My label text',
  attributes: { 
    title: 'My tooltip text' 
  },
  content: '<div>Hello</div>',
})

So this is the reason behind the lack of the i18n module.

Anyway, don't hesitate to let me know about some missed text to override.

[jujusharp]

@artf , I saw much of text in templates are in pure English text, have you have plan for Internationalization support? for example: /src/asset_manager/template/assets.html at line 7: <button class="<%= ppfx %>btn-prim">Add image</button> is just a pure english text.

[artf]

@jujusharp text in templates are part of the demo and not the core library itself

[jujusharp]

@artf Got it, thanks for your reply

[artf]

@jujusharp I saw now your updated reply with the example and this is actually a missed part. So I need to fix it

[artf]

@jujusharp fixed for the next release, you can change that text with:

assetManager: {
    addBtnText: 'Add image',
 }

[rgcarrasqueira]

Hi Art! I would like to change a tittle for a panel, how to do that, without change all parameters?

[carloswbarros]

styleManager sectors and assetManager modalTitle are not changing the text.

[carboni-rob]

Some strings, especially in the grapes-preset-newsletter, are being overwritten by an editor.on("load") method. I would recommend placing your custom strings in the same method.

[Covicake]

Before anything, this is a great library!

I'm only struggling with the internationalization. I can't find what do I need to override to translate the 'Margin top', 'Margin bottom' (...) at Styles manager.

I realize this is a closed issue, but I don't know where else to post this and I don't think this deserves a new thread.

Thanks in advance

[artf]

@Covicake this is how I change them in the demo https://github.com/artf/grapesjs/blob/6cb1199048a753a77466efd4ae8ff3752d413623/demo.html#L1032-L1049

[chickahoona]

Would be amazing if you can revise your decision. As representative of a company that is using grapejs in their product, I'd be happy to offer to give your string collection to an agency to translate them into the languages that we would require. I understand that you provide a mechanism for translating parts of the base module, yet plugins and so on often don't. If you would implement a mechanism that other plugins could "hook into", than that would provide them some insentive to do so.

[artf]

Yeah, by doing a lot of plugins I've noticed that without an i18n module it involves more work for the configuration and who uses the plugin.

I'll put it in the Roadmap but have no ETA, so I'd really appreciate a help

[lbresler]

Hello. I use GrapeJS for a project and a developer has hard coded the string in French. It is a serious problem for updates... I will try with the configuration solution for now, but I'll be happy to contribute with a french translation.

[barra]

Hi @artf , could be an idea if you quote the effort and we organize a sponsorship to support this task? In this case you can give an ETA?

[artf]

@barra I can give some structure indication but it'd be wrong giving a quote from my side. I'd be happy to share some guidelines on how to create a module with anyone willing to help and then this person can put the quote. Anyway, thanks for the offer

[artf]

I18n module merged in dev, it'll be available in the next release https://github.com/artf/grapesjs/pull/2385