mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
38 KiB
157 lines
38 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>I18n (Internationalization) | GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.10">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.21.10"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.c7ff573f.css" as="style"><link rel="preload" href="/docs/assets/js/app.7cba500a.js" as="script"><link rel="preload" href="/docs/assets/js/4.0070552e.js" as="script"><link rel="preload" href="/docs/assets/js/2.6fefd022.js" as="script"><link rel="preload" href="/docs/assets/js/1.d23e9fed.js" as="script"><link rel="preload" href="/docs/assets/js/86.d1d289b7.js" as="script"><link rel="prefetch" href="/docs/assets/js/12.fcd6c1b3.js"><link rel="prefetch" href="/docs/assets/js/13.f8ba6288.js"><link rel="prefetch" href="/docs/assets/js/14.37d1e434.js"><link rel="prefetch" href="/docs/assets/js/15.6e77df13.js"><link rel="prefetch" href="/docs/assets/js/16.c5f433ca.js"><link rel="prefetch" href="/docs/assets/js/17.de56d7c2.js"><link rel="prefetch" href="/docs/assets/js/18.bf39ac98.js"><link rel="prefetch" href="/docs/assets/js/19.ca87c57f.js"><link rel="prefetch" href="/docs/assets/js/20.68039d84.js"><link rel="prefetch" href="/docs/assets/js/21.2b429912.js"><link rel="prefetch" href="/docs/assets/js/22.27b0a8c5.js"><link rel="prefetch" href="/docs/assets/js/23.a6d68e8d.js"><link rel="prefetch" href="/docs/assets/js/24.74960541.js"><link rel="prefetch" href="/docs/assets/js/25.ca71342f.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.54f6b393.js"><link rel="prefetch" href="/docs/assets/js/28.cf1f128d.js"><link rel="prefetch" href="/docs/assets/js/29.5888c207.js"><link rel="prefetch" href="/docs/assets/js/3.4e94790f.js"><link rel="prefetch" href="/docs/assets/js/30.bace5f23.js"><link rel="prefetch" href="/docs/assets/js/31.2b0fa15d.js"><link rel="prefetch" href="/docs/assets/js/32.fdf463ac.js"><link rel="prefetch" href="/docs/assets/js/33.a739af41.js"><link rel="prefetch" href="/docs/assets/js/34.27801365.js"><link rel="prefetch" href="/docs/assets/js/35.55be1c25.js"><link rel="prefetch" href="/docs/assets/js/36.78a4b7a9.js"><link rel="prefetch" href="/docs/assets/js/37.a1d1286c.js"><link rel="prefetch" href="/docs/assets/js/38.7f94984b.js"><link rel="prefetch" href="/docs/assets/js/39.bae8130f.js"><link rel="prefetch" href="/docs/assets/js/40.d641c435.js"><link rel="prefetch" href="/docs/assets/js/41.2f0da2d4.js"><link rel="prefetch" href="/docs/assets/js/42.a0743242.js"><link rel="prefetch" href="/docs/assets/js/43.8460a28b.js"><link rel="prefetch" href="/docs/assets/js/44.943c0253.js"><link rel="prefetch" href="/docs/assets/js/45.aafa45da.js"><link rel="prefetch" href="/docs/assets/js/46.ad246b82.js"><link rel="prefetch" href="/docs/assets/js/47.b412adfe.js"><link rel="prefetch" href="/docs/assets/js/48.af9cac86.js"><link rel="prefetch" href="/docs/assets/js/49.86ad40ac.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.f7509701.js"><link rel="prefetch" href="/docs/assets/js/51.8c42f1c6.js"><link rel="prefetch" href="/docs/assets/js/52.82b56909.js"><link rel="prefetch" href="/docs/assets/js/53.5f6601a1.js"><link rel="prefetch" href="/docs/assets/js/54.e8a69f95.js"><link rel="prefetch" href="/docs/assets/js/55.22891dc5.js"><link rel="prefetch" href="/docs/assets/js/56.f7e9921e.js"><link rel="prefetch" href="/docs/assets/js/57.578f14f1.js"><link rel="prefetch" href="/docs/assets/js/58.64b9e09c.js"><link rel="prefetch" href="/docs/assets/js/59.135e8739.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.c21dfd9f.js"><link rel="prefetch" href="/docs/assets/js/61.c49c5b1e.js"><link rel="prefetch" href="/docs/assets/js/62.ce5bed3d.js"><link rel="prefetch" href="/docs/assets/js/63.3ee6f39c.js"><link rel="prefetch" href="/docs/assets/js/64.b439d27f.js"><link rel="prefetch" href="/docs/assets/js/65.ee472a88.js"><link rel="prefetch" href="/docs/assets/js/66.becd0d7a.js"><link rel="prefetch" href="/docs/assets/js/67.166cf34e.js"><link rel="prefetch" href="/docs/assets/js/68.36615226.js"><link rel="prefetch" href="/docs/assets/js/69.9a5913c7.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.8663a867.js"><link rel="prefetch" href="/docs/assets/js/71.8b580dcf.js"><link rel="prefetch" href="/docs/assets/js/72.355b7953.js"><link rel="prefetch" href="/docs/assets/js/73.b9ad99cd.js"><link rel="prefetch" href="/docs/assets/js/74.517d9902.js"><link rel="prefetch" href="/docs/assets/js/75.183f30c2.js"><link rel="prefetch" href="/docs/assets/js/76.894100bc.js"><link rel="prefetch" href="/docs/assets/js/77.a896626f.js"><link rel="prefetch" href="/docs/assets/js/78.a8d38215.js"><link rel="prefetch" href="/docs/assets/js/79.d0ad637c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/80.43bf5b47.js"><link rel="prefetch" href="/docs/assets/js/81.a3f44150.js"><link rel="prefetch" href="/docs/assets/js/82.514bee1c.js"><link rel="prefetch" href="/docs/assets/js/83.288e8f5d.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.c70a27f1.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.f0049b73.js"><link rel="prefetch" href="/docs/assets/js/89.c2ba01c2.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.529090e5.js"><link rel="prefetch" href="/docs/assets/js/91.dd59134d.js"><link rel="prefetch" href="/docs/assets/js/92.d3e7c08c.js"><link rel="prefetch" href="/docs/assets/js/93.a12b0826.js"><link rel="prefetch" href="/docs/assets/js/94.036e5ed0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.0da9b1d4.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.c7ff573f.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Modules</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components & JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/I18n.html" aria-current="page" class="active sidebar-link">I18n</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/I18n.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/I18n.html#update-strings" class="sidebar-link">Update strings</a></li><li class="sidebar-sub-header"><a href="/docs/modules/I18n.html#adding-new-language" class="sidebar-link">Adding new language</a></li><li class="sidebar-sub-header"><a href="/docs/modules/I18n.html#plugin-development" class="sidebar-link">Plugin development</a></li></ul></li><li><a href="/docs/modules/Selectors.html" class="sidebar-link">Selectors</a></li><li><a href="/docs/modules/Layers.html" class="sidebar-link">Layers</a></li><li><a href="/docs/modules/Pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Modal.html" class="sidebar-link">Modal</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="internationalization"><a href="#internationalization" class="header-anchor">#</a> Internationalization</h1> <p>The <strong>I18n</strong> module allows the internationalization and update of strings in the editor UI</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide is referring to GrapesJS v0.15.9 or higher</p> <p>The module was added recently so we're open to receive support in <a href="#adding-new-language">translating strings in other languages</a>. Your help will be much appreciated!</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#update-strings">Update strings</a><ul><li><a href="#generated-strings">Generated strings</a></li></ul></li><li><a href="#adding-new-language">Adding new language</a></li><li><a href="#plugin-development">Plugin development</a></li></ul></div><p></p> <h2 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h2> <p>By default, the editor includes only the English language, if you need other languages you have to import them manually.
|
|
<strong>Note</strong>: The language code is defined in the <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" target="_blank" rel="noopener noreferrer">ISO 639-1<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> standard.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> grapesjs <span class="token keyword">from</span> <span class="token string">'grapesjs'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> it <span class="token keyword">from</span> <span class="token string">'grapesjs/locale/it'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> tr <span class="token keyword">from</span> <span class="token string">'grapesjs/locale/tr'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// locale: 'en', // default locale</span>
|
|
<span class="token comment">// detectLocale: true, // by default, the editor will detect the language</span>
|
|
<span class="token comment">// localeFallback: 'en', // default fallback</span>
|
|
<span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span> it<span class="token punctuation">,</span> tr <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Now the editor will be translated in Italian for those browsers which default language is Italian (by default <code>detectLocale</code> option is enabled)</p> <h2 id="update-strings"><a href="#update-strings" class="header-anchor">#</a> Update strings</h2> <p>If you need to change some default language strings you can easily update them by using <a href="/docs/api/i18n.html">I18n API</a>.
|
|
To find the correth path of the string you can check the <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/i18n/locale/en.js" target="_blank" rel="noopener noreferrer"><code>en</code> locale file<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and follow its inner path inside the locale object.</p> <p>Let's say we want to update the default message of the empty state in Style Manager when no elements are selected.</p> <img src="/docs/sm-empty-state.jpg"> <p>From the <code>en</code> locale file you can see it by following the path below</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">empty</span><span class="token operator">:</span> <span class="token string">'Select an element before using Style Manager'</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>So now to update it you'll do this</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>I18n<span class="token punctuation">.</span><span class="token function">addMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// indicate the locale to update</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">empty</span><span class="token operator">:</span> <span class="token string">'New empty state message'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Even if the UI shows correctly the updated message, we highly suggest to do all the API calls wrapped in a <a href="/docs/modules/Plugins.html">plugin</a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">myPlugin</span> <span class="token operator">=</span> <span class="token parameter">editor</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
editor<span class="token punctuation">.</span>I18n<span class="token punctuation">.</span><span class="token function">addMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="generated-strings"><a href="#generated-strings" class="header-anchor">#</a> Generated strings</h3> <p>Not all the strings are indicated in the <code>en</code> local file as some of them can be generated from <code>id</code>s, <code>name</code>s, etc.
|
|
If you look back at the <code>styleManager</code> path from the <code>en</code> file you'll notice the empty <code>properties</code> key</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// float: 'Float',</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
</code></pre></div><p>This object is used to translate property names inside StyleManager, so if you need, for instance, to change the auto-generated names for the <code>margin</code> properties</p> <img src="/docs/margin-strings.jpg"> <p>you'd this</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>I18n<span class="token punctuation">.</span><span class="token function">addMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// The key is the property name (or id)</span>
|
|
<span class="token string-property property">'margin-top'</span><span class="token operator">:</span> <span class="token string">'Top'</span><span class="token punctuation">,</span>
|
|
<span class="token string-property property">'margin-right'</span><span class="token operator">:</span> <span class="token string">'Right'</span><span class="token punctuation">,</span>
|
|
<span class="token string-property property">'margin-left'</span><span class="token operator">:</span> <span class="token string">'Left'</span><span class="token punctuation">,</span>
|
|
<span class="token string-property property">'margin-bottom'</span><span class="token operator">:</span> <span class="token string">'Bottom'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div> <h2 id="adding-new-language"><a href="#adding-new-language" class="header-anchor">#</a> Adding new language</h2> <p>If you want to support GrapesJS by adding a new language to our repository all you need to do is to follow steps below:</p> <ol><li>First of all, be sure to check the language file in <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/i18n/locale" target="_blank" rel="noopener noreferrer"><code>src/i18n/locale</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> doesn't exist already</li> <li><a href="https://github.com/GrapesJS/grapesjs/issues/new?title=XX%20Language%20support" target="_blank" rel="noopener noreferrer">Open a new issue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to avoid overlap with other contributors. To be sure, check also no one else has opened already an issue for the same language</li> <li>Start a new branch from <code>dev</code></li> <li>Copy (in the same folder) and rename the <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/i18n/locale/en.js" target="_blank" rel="noopener noreferrer"><code>en</code> locale file<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to the name of your language of choice (be sure to be compliant to <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" target="_blank" rel="noopener noreferrer">ISO 639-1<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</li> <li>Now you can start translating strings</li> <li>By following comments you'll probably notice that some keys are not indicated (eg. <code>styleManager.properties</code>), for the reference you can check other locale files</li> <li>Once you've done, you can create a new Pull Request on GitHub from your branch to <code>dev</code> by making also a reference to your issue in order to close it automatically once it's merged (your PR message should contain <code>Closes #1234</code> where 1234 is the issue ID)</li></ol> <h2 id="plugin-development"><a href="#plugin-development" class="header-anchor">#</a> Plugin development</h2> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This section is dedicated <strong>only</strong> to plugin developers and can also be skipped in case you use <a href="https://github.com/GrapesJS/cli" target="_blank" rel="noopener noreferrer">grapesjs-cli<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to init your plugin project</p></div> <p>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.</p> <div class="language- extra-class"><pre class="language-text"><code>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
|
|
</code></pre></div><p>For your plugin specific strings, place them under the plugin name key</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/locale/en.js</span>
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
|
<span class="token string-property property">'grapesjs-plugin-name'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">yourKey</span><span class="token operator">:</span> <span class="token string">'Your value'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>In your <code>index.js</code> use the <code>en.js</code> file and add <code>i18n</code> option to allow import of other local files</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/index.js</span>
|
|
<span class="token keyword">import</span> en <span class="token keyword">from</span> <span class="token string">'locale/en'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token operator">...</span>opts<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
|
|
editor<span class="token punctuation">.</span>I18n<span class="token punctuation">.</span><span class="token function">addMessages</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
en<span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>options<span class="token punctuation">.</span>i18n<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>The next step would be to compile your locale files into <code><rootDir>/locale</code> directory to make them easily accessible by your users. This folder could be ignored in your git repository be should be deployd to the npm registry</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Remember that you can skip all these long steps and init your project with <a href="https://github.com/GrapesJS/cli" target="_blank" rel="noopener noreferrer">grapesjs-cli<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. This will create all the necessary folders/files/commands for you (during <code>init</code> command this step is flagged <code>true</code> by default and we recommend to keep it even in case the i18n is not required in your project)</p></div> <p>At the end, your plugin users will be able to import other locale files (if they exist) in this way</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> grapesjs <span class="token keyword">from</span> <span class="token string">'grapesjs'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Import from your plugin</span>
|
|
<span class="token keyword">import</span> yourPlugin <span class="token keyword">from</span> <span class="token string">'grapesjs-your-plugin'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> ch <span class="token keyword">from</span> <span class="token string">'grapesjs-your-plugin/locale/ch'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> fr <span class="token keyword">from</span> <span class="token string">'grapesjs-your-plugin/locale/fr'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span> yourPlugin <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">pluginsOpts</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token punctuation">[</span>yourPlugin<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span> ch<span class="token punctuation">,</span> fr <span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/I18n.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/11/2023, 9:25:30 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/modules/Commands.html" class="prev">
|
|
Commands
|
|
</a></span> <span class="next"><a href="/docs/modules/Selectors.html">
|
|
Selectors
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.7cba500a.js" defer></script><script src="/docs/assets/js/4.0070552e.js" defer></script><script src="/docs/assets/js/2.6fefd022.js" defer></script><script src="/docs/assets/js/1.d23e9fed.js" defer></script><script src="/docs/assets/js/86.d1d289b7.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|