Translate Plugin

This plugin adds translation capabilities to the Jodit editor, allowing users to translate selected text directly within the editor. It provides a toolbar button for translation and supports different translation providers.

Features

Translate selected text with a single click
Support for Google Translate API
Support for custom translation providers
Configurable source and target languages
Keyboard shortcuts for quick translation

Installation

<!doctype html>
<html>
	<head>
		<title>Translate Editor</title>
		<meta charset="utf-8" />

		<!-- css -->
		<link
			rel="stylesheet"
			href="./node_modules/jodit-pro/build/jodit.css"
		/>
		<link
			rel="stylesheet"
			href="./node_modules/jodit-pro/build/plugins/translate/translate.css"
		/>
	</head>
	<body>
		<!-- element -->
		<textarea id="entry">...</textarea>

		<!-- js -->
		<script src="./node_modules/jodit-pro/build/jodit.js"></script>
		<script src="./node_modules/jodit-pro/build/config.js"></script>
		<script src="./node_modules/jodit-pro/build/plugins/translate/translate.js"></script>

		<!-- call -->
		<script>
			Jodit.make('#entry', {
				extraPlugins: ['translate'],
				translate: {
					provider: 'google',
					googleProviderOptions: {
						key: '{YOUR_GOOGLE_API_KEY}'
					}
				}
			});
		</script>
	</body>
</html>
Copy

Options

translate.provider

Type: 'google' | ITranslateProviderFactory
Default: 'google'
Required: true

Translation engine provider. You can use:

'google' - Google Translate API
A custom function that implements the ITranslateProviderFactory interface (see Custom Translate Provider example)

Jodit.make('#editor', {
    translate: {
        provider: 'google'
    }
});
Copy

translate.defaultSourceLang

Type: string
Default: '' (empty string, which means auto-detection)
Required: false

Default source language for translation. Use language ISO-639-1 codes. If not specified, the plugin will try to auto-detect the source language.

Jodit.make('#editor', {
    translate: {
        defaultSourceLang: 'en'
    }
});
Copy

translate.defaultTargetLang

Type: string
Default: 'de'
Required: true

Default target language for translation. Use language ISO-639-1 codes.

Jodit.make('#editor', {
    translate: {
        defaultTargetLang: 'fr'
    }
});
Copy

translate.hotkeys

Type: object
Default:

{
    translateSelection: ['ctrl+shift+o', 'cmd+shift+o'],
    translateOptions: ['ctrl+shift+p', 'cmd+shift+p']
}
Copy

Keyboard shortcuts for translation functions.

Jodit.make('#editor', {
    translate: {
        hotkeys: {
            translateSelection: ['ctrl+alt+t'],
            translateOptions: ['ctrl+alt+o']
        }
    }
});
Copy

translate.googleProviderOptions

Type: object
Default:

{
    url: 'https://translation.googleapis.com/language/translate/v2',
    key: ''
}
Copy

Options for Google Translate API.

translate.googleProviderOptions.key

Type: string
Default: ''
Required: true (when using Google Translate provider)

API key for using Google Translate engine. Get API key

Jodit.make('#editor', {
    translate: {
        provider: 'google',
        googleProviderOptions: {
            key: 'YOUR_GOOGLE_API_KEY'
        }
    }
});
Copy

translate.googleProviderOptions.url

Type: string
Default: 'https://translation.googleapis.com/language/translate/v2'
Required: false

URL for Google Translate API. You typically don't need to change this unless you're using a proxy or a different endpoint.

Jodit.make('#editor', {
    translate: {
        provider: 'google',
        googleProviderOptions: {
            url: 'https://your-proxy.com/google-translate',
            key: 'YOUR_GOOGLE_API_KEY'
        }
    }
});
Copy

Custom Translate Provider

You can create your own translation provider by implementing the ITranslateProviderFactory interface. This function should return an object with two methods:

translate(text, from, to) - Translates text from one language to another
supportedLanguages() - Returns a list of supported languages

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	language: 'en',
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: (jodit) => {
			return {
				supportedLanguages() {
					return Promise.resolve({
						langs: {
							English: 'en',
							Russian: 'ru',
							German: 'de'
						}
					});
				},
				translate(text, from, to) {
					return fetch(
						'https://your-translate-service.com/?text=' +
							encodeURIComponent(text) +
							'&from=' +
							encodeURIComponent(from || jodit.o.language) +
							'&to=' +
							encodeURIComponent(to)
					)
						.then((resp) => resp.json())
						.then((data) => {
							return {
								text: data.translation.text
							};
						});
				}
			};
		}
	}
});
Copy

Usage Examples

Basic Usage with Google Translate

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	language: 'en',
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: 'google',
		defaultSourceLang: 'en',
		defaultTargetLang: 'fr',
		googleProviderOptions: {
			key: 'YOUR_GOOGLE_API_KEY'
		}
	}
});
Copy

Using Custom Translation Service

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	language: 'en',
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: (jodit) => {
			return {
				supportedLanguages() {
					// Return only the languages your service supports
					return Promise.resolve({
						langs: {
							English: 'en',
							Spanish: 'es',
							French: 'fr',
							German: 'de',
							Italian: 'it'
						}
					});
				},
				translate(text, from, to) {
					// Use your own translation API
					return fetch(`https://api.your-translation-service.com/translate`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer YOUR_API_KEY'
						},
						body: JSON.stringify({
							text,
							source_language: from || 'auto',
							target_language: to
						})
					})
					.then(response => response.json())
					.then(data => {
						return {
							text: data.translated_text
						};
					});
				}
			};
		},
		defaultTargetLang: 'es'
	}
});
Copy

Customizing Keyboard Shortcuts

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: 'google',
		googleProviderOptions: {
			key: 'YOUR_GOOGLE_API_KEY'
		},
		hotkeys: {
			translateSelection: ['alt+t'],
			translateOptions: ['alt+o']
		}
	}
});
Copy

How It Works

When text is selected in the editor, the user can click the "Translate" button or use the keyboard shortcut
The plugin sends the selected text to the configured translation provider
The translated text replaces the selected text in the editor
Users can also access translation options to change source and target languages

This plugin is particularly useful for multilingual content creation and editing, allowing users to quickly translate portions of text without leaving the editor.

Demo

Translate Plugin

Features

Translate selected text with a single click
Support for Google Translate API
Support for custom translation providers
Configurable source and target languages
Keyboard shortcuts for quick translation

Installation

<!doctype html>
<html>
	<head>
		<title>Translate Editor</title>
		<meta charset="utf-8" />

		<!-- css -->
		<link
			rel="stylesheet"
			href="./node_modules/jodit-pro/build/jodit.css"
		/>
		<link
			rel="stylesheet"
			href="./node_modules/jodit-pro/build/plugins/translate/translate.css"
		/>
	</head>
	<body>
		<!-- element -->
		<textarea id="entry">...</textarea>

		<!-- js -->
		<script src="./node_modules/jodit-pro/build/jodit.js"></script>
		<script src="./node_modules/jodit-pro/build/config.js"></script>
		<script src="./node_modules/jodit-pro/build/plugins/translate/translate.js"></script>

		<!-- call -->
		<script>
			Jodit.make('#entry', {
				extraPlugins: ['translate'],
				translate: {
					provider: 'google',
					googleProviderOptions: {
						key: '{YOUR_GOOGLE_API_KEY}'
					}
				}
			});
		</script>
	</body>
</html>
Copy

Options

translate.provider

Type: 'google' | ITranslateProviderFactory
Default: 'google'
Required: true

Translation engine provider. You can use:

'google' - Google Translate API
A custom function that implements the ITranslateProviderFactory interface (see Custom Translate Provider example)

Jodit.make('#editor', {
    translate: {
        provider: 'google'
    }
});
Copy

translate.defaultSourceLang

Type: string
Default: '' (empty string, which means auto-detection)
Required: false

Default source language for translation. Use language ISO-639-1 codes. If not specified, the plugin will try to auto-detect the source language.

Jodit.make('#editor', {
    translate: {
        defaultSourceLang: 'en'
    }
});
Copy

translate.defaultTargetLang

Type: string
Default: 'de'
Required: true

Default target language for translation. Use language ISO-639-1 codes.

Jodit.make('#editor', {
    translate: {
        defaultTargetLang: 'fr'
    }
});
Copy

translate.hotkeys

Type: object
Default:

{
    translateSelection: ['ctrl+shift+o', 'cmd+shift+o'],
    translateOptions: ['ctrl+shift+p', 'cmd+shift+p']
}
Copy

Keyboard shortcuts for translation functions.

Jodit.make('#editor', {
    translate: {
        hotkeys: {
            translateSelection: ['ctrl+alt+t'],
            translateOptions: ['ctrl+alt+o']
        }
    }
});
Copy

translate.googleProviderOptions

Type: object
Default:

{
    url: 'https://translation.googleapis.com/language/translate/v2',
    key: ''
}
Copy

Options for Google Translate API.

translate.googleProviderOptions.key

Type: string
Default: ''
Required: true (when using Google Translate provider)

API key for using Google Translate engine. Get API key

Jodit.make('#editor', {
    translate: {
        provider: 'google',
        googleProviderOptions: {
            key: 'YOUR_GOOGLE_API_KEY'
        }
    }
});
Copy

translate.googleProviderOptions.url

Type: string
Default: 'https://translation.googleapis.com/language/translate/v2'
Required: false

URL for Google Translate API. You typically don't need to change this unless you're using a proxy or a different endpoint.

Jodit.make('#editor', {
    translate: {
        provider: 'google',
        googleProviderOptions: {
            url: 'https://your-proxy.com/google-translate',
            key: 'YOUR_GOOGLE_API_KEY'
        }
    }
});
Copy

Custom Translate Provider

You can create your own translation provider by implementing the ITranslateProviderFactory interface. This function should return an object with two methods:

translate(text, from, to) - Translates text from one language to another
supportedLanguages() - Returns a list of supported languages

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	language: 'en',
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: (jodit) => {
			return {
				supportedLanguages() {
					return Promise.resolve({
						langs: {
							English: 'en',
							Russian: 'ru',
							German: 'de'
						}
					});
				},
				translate(text, from, to) {
					return fetch(
						'https://your-translate-service.com/?text=' +
							encodeURIComponent(text) +
							'&from=' +
							encodeURIComponent(from || jodit.o.language) +
							'&to=' +
							encodeURIComponent(to)
					)
						.then((resp) => resp.json())
						.then((data) => {
							return {
								text: data.translation.text
							};
						});
				}
			};
		}
	}
});
Copy

Usage Examples

Basic Usage with Google Translate

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	language: 'en',
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: 'google',
		defaultSourceLang: 'en',
		defaultTargetLang: 'fr',
		googleProviderOptions: {
			key: 'YOUR_GOOGLE_API_KEY'
		}
	}
});
Copy

Using Custom Translation Service

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	language: 'en',
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: (jodit) => {
			return {
				supportedLanguages() {
					// Return only the languages your service supports
					return Promise.resolve({
						langs: {
							English: 'en',
							Spanish: 'es',
							French: 'fr',
							German: 'de',
							Italian: 'it'
						}
					});
				},
				translate(text, from, to) {
					// Use your own translation API
					return fetch(`https://api.your-translation-service.com/translate`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer YOUR_API_KEY'
						},
						body: JSON.stringify({
							text,
							source_language: from || 'auto',
							target_language: to
						})
					})
					.then(response => response.json())
					.then(data => {
						return {
							text: data.translated_text
						};
					});
				}
			};
		},
		defaultTargetLang: 'es'
	}
});
Copy

Customizing Keyboard Shortcuts

import { JoditPro } from 'jodit-pro';
JoditPro.make('#editor', {
	buttons: ['translate.translate'],
	extraPlugins: ['translate'],
	translate: {
		provider: 'google',
		googleProviderOptions: {
			key: 'YOUR_GOOGLE_API_KEY'
		},
		hotkeys: {
			translateSelection: ['alt+t'],
			translateOptions: ['alt+o']
		}
	}
});
Copy

How It Works

When text is selected in the editor, the user can click the "Translate" button or use the keyboard shortcut
The plugin sends the selected text to the configured translation provider
The translated text replaces the selected text in the editor
Users can also access translation options to change source and target languages

This plugin is particularly useful for multilingual content creation and editing, allowing users to quickly translate portions of text without leaving the editor.

Footer

Jodit Core

Integration

PRO/OEM plugins

Links

Versions

Translate Plugin

Features

Installation

Options

translate.provider

translate.defaultSourceLang

translate.defaultTargetLang

translate.hotkeys

translate.googleProviderOptions

translate.googleProviderOptions.key

translate.googleProviderOptions.url

Custom Translate Provider

Usage Examples

Basic Usage with Google Translate

Using Custom Translation Service

Customizing Keyboard Shortcuts

How It Works

Demo

Footer

Jodit Core

Integration

PRO/OEM plugins

Links

Versions

Translate Plugin

Features

Installation

Options

translate.provider

translate.defaultSourceLang

translate.defaultTargetLang

translate.hotkeys

translate.googleProviderOptions

translate.googleProviderOptions.key

translate.googleProviderOptions.url

Custom Translate Provider

Usage Examples

Basic Usage with Google Translate

Using Custom Translation Service

Customizing Keyboard Shortcuts

How It Works

Demo