This tool allows you to translate text inline to english.
Requires a translation service. See Translation Service for more information.
Works in any block. just select the text and click the Translate button in the toolbar.
Source language is detected automatically.
Example of the translation service server is provided.
Soon Choosing the target language to translate.
Soon Support for the offical Google Translate API.
Features of the example translation service:
- uses the googletrans python package to translate text;
- runs on port 5000;
- CORS are enabled for all origins.
You can run the server locally via venv or docker. On the production you can use
For the production environment you should use a different translation service cause the googletrans package is not meant for production use. But you can use the example server as a starting point.
Use your package manager to install the package editorjs-translate-inline.
npm install -D @editorjs/translate-inline
yarn add -D @editorjs/translate-inlineImport and add the Tool to your Editor.js configuration and provide the endpoint of the translation service.
import Translate from '@editorjs/translate-inline';
const editor = new EditorJS({
tools: {
translator: {
class: Translate,
config: {
endpoint: 'http://localhost:5000/translate?text=',
}
},
},
// ...
});npm run dev / yarn dev — run development environment with hot reload
npm run build / yarn build — build the tool for production to the dist folder
Use venv to create a virtual environment and activate it.
cd server
python3 -m venv venv
source venv/bin/activateInstall the requirements and run the server.
python -m pip install -r requirements.txt
python main.pyDeactivate the virtual environment when you're done.
deactivateBuild the docker image and run the container.
cd server
docker build -t editorjs-translate-inline .
docker run -p 5000:5000 editorjs-translate-inlineTo rebuild the image after changes run docker build --no-cache -t editorjs-translate-inline .