locize-editor
The locize-editor enables you to directly connect content from your website / application with your content on your localization project on locize.
Enabling the editor by querystring ?locize=true
you can click any text content on your website to open it on the right side editor window:
The linking could be turned on/off using the button on the lower right or by pressing ctrl-x
.
Getting started
Source can be loaded via npm, bower, downloaded from this repo or loaded from the npm CDN unpkg.com/locize-editor.
If not using a bundler the script will be added to window.locizeEditor
.
Hint: This module runs only in browser.
Using
standalone
Just init like:
locizeEditor;
Open edit mode by appending ?locize=true
to the querystring.
For additional options see below Initialize with optional options
with locizify
The editor is built into our locizify script. There is no additional step needed.
Open edit mode by appending ?locize=true
to the querystring.
For texts using plural or interpolation feature you might need to additionally add &lng=cimode&useLng=[yourLocal]
to find a key.
with i18next and i18next-locize-backend
import locizeEditor from 'locize-editor';
import i18next from 'locize';
import Backend from 'i18next-locize-backend';
i18next
.use(Backend)
.use(locizeEditor);
Initialize with optional options
You can configure some aspects like layout by adding init options.
// standalonelocizeEditor // i18next, ...locizify|locize|i18next;
update your application when you saved changes in locize editor
use the onEditorSaved handler
// reload the full pagelocizeEditor; // reload translations in i18next and trigger a rerenderlocizeEditor;
update the locize editor if your site sent new save missings
the app will reload those namespaces
locizeEditor; // eg. on your i18next-locize-backend bind the onSaved on initi18next ;
see the sample for react.js i18next/react-i18next sample
find the namespace
As content is structured into multiple translation files we somehow need to detect/find the namespace (file) used for translating the clicked content.
If locize is not able to detect the right namespace it will fallback for a fuzzy global search - which in most cases should also provide the correct result. But you might like to get more control.
by adding attribute containing namespace
The namespace will be detected from current clicked element or any of its parents.
Following attributes are valid to look it up:
<!-- standalone -->contentcontent <!-- i18next: preferred -->contentcontent <!-- alternative: json stringified i18next options-->contentcontent
by using cimode language
If there is no possibility to find the used namespace per attribute on parent element you will need to toggle the lng to cimode. Additionally you will need to configure locize to append namespace in cimode by:
i18next.init({
appendNamespaceToCIMode: true
});
open your website with querystring ?locize=true&lng=cimode&useLng=[yourLocal]
.