Can't use i18n
@Lerdouille your issue is not related to grapesjs, you have to reference your locale objects somehow which i suggest using global variables for them, and to import them, is basically a matter of including their related scripts inside your html. Cheers!
Read full answer below ↓Question
Hi again @artf ,
you close my previous ticket but i don't succeed to reopen it
i saw the documentation and the part reguarding i18n but i didn't succed to use it.
In your documentation, you use some import function, basically my code is pretty simpler and without import, like this :
<html>
<body>
<link rel="stylesheet" href="grapesjs/css/grapes.min.css">
<script src="grapesjs/grapes.js"></script>
<div id="gjs">
<h1>Hello World Component!</h1>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
width: 'auto',
fromElement: true,
showDevices: 0,
storageManager: { autoload: 0 },
});
</script>
</body>
</html>
I managed too implement some plugins and configure the design of the editor, but i'm stucked with this i18n issue...
Could you please tell me what i'm doing wrong ? for the record i'm not in a Node environnement
I precise that i apparently my project is for now composed with only 3 files, the grapesjs.js, grapes.css and my HTML file. When i download your project on github, there are a few folders (and specially on named /src where i can find the locales files), but the plugin does not need them to work, is it normal ?
Regards and thank you again for the support :)Answers (3)
@Lerdouille your issue is not related to grapesjs, you have to reference your locale objects somehow which i suggest using global variables for them, and to import them, is basically a matter of including their related scripts inside your html. Cheers!
Current code of locale files are optimized only for importing them via import, if you want to improve that PR are welcome
you close my previous ticket but i don't succeed to reopen it
There is no need to keep questions open if there is a need to reply I'll do it, so please, next time avoid opening other duplicates
Thank you for your answers. I do succeed to display the good translation by tweaking the grapes.js.
To do that, i had to copy/paste the part
**/ "./src/i18n/locale/en.js":
/!!
! ./src/i18n/locale/en.js !
*/
/*! exports provided: default */
and replace all translation by another langage.
Then, i had to declare the variables in the part : "./src/i18n/config.js" with this (for French translation in my code) : /* harmony import / var locale_fr__WEBPACK_IMPORTED_MODULE_0_ = webpack_require(/! ./locale/fr */ "./src/i18n/locale/fr.js");
and update the "message" variable below by : messages: { en: locale_en__WEBPACK_IMPORTED_MODULE_0_["default"], fr: locale_fr__WEBPACK_IMPORTED_MODULE_0_["default"] }
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2029
[Question/Bug] grapesjs throws a DOMException if you import HTML contents with invalid (numbered) attributes
Hi @artf , We got a report that when you import some HTML code with incorrect attributes, such as <td class="cell" 01234="0" >Hello world!...
Issue #1163
[Question] How do I set <body> attributes
Hi @artf, On the previous issue #1132 about export <body my="attributes"> code, I think it's done using exportWrapper: true. But now experi...
Issue #3316
The editor does not remove the dead script blocks
Version: 0.16.34 Are you able to reproduce the bug from the demo? [ ] Yes [x ] No As I understand the code import dialog skips all the HTML...
Issue #3268
How to add javascript in the html without sanitization?
Hey @artf, I am taking javascript input from the user. I need to add this javascript inside the template HTML but it gets sanitized. Is the...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.