Translator logo

Translator plugin

Translate text up to 90 languages
Translator screenshot
Translator screenshotTranslator choose languages screenshot
Translator logo

Translate your text to more than 90 languages directly in the editor: simply select the text and click the button or the shortcut. The text is then sent to Google Translate or Yandex Translate at your choice, gets translated and updated preserving HTML formatting. This means you can translate pages with complex formatting including various blocks and tables, and retain the original layout, and the translator takes the context into account when splitting the selected text to fragments.

You can configure languages both using the config file and within the editor itself (for instance, to switch to another source or destination language temporarily). There is also a toolbar button to quickly reverse the translation direction.

Editor42 logo Editor42
TinyMCE logo TinyMCE
CKEditor 4 logo CKEditor 4
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Translator plugin in Editor42

Download Translator
ZIP archive of Translator for Editor42
Self-hosted Editor42
Editor42 from CDN

Install the plugin to Editor42 hosted on your server

  1. Copy Translator directory to editor42/plugins/.
  2. Edit Editor42 config and add Translator to plugins parameter.

Example

Here you can see sample Editor42 initialization code with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to Editor42 loaded from CDN

  1. Copy Translator directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Translator plugin adding key-value pair in external_plugins Editor42 config parameter.
  3. Edit Editor42 config and add Translator to plugins parameter.

Example

Here you can see sample initialization code of Editor42 loaded from CDN with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config
    external_plugins: {
        "Translator": "http://example.com/public/Translator/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Translator comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Translator plugin in TinyMCE

Download Translator
ZIP archive of Translator for TinyMCE
Self-hosted TinyMCE
Cloud TinyMCE

Install the plugin to TinyMCE hosted on your server

  1. Copy Translator directory to tinymce/plugins/.
  2. Edit TinyMCE config and add Translator to plugins parameter.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE

  1. Copy Translator directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Translator plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add Translator to plugins parameter.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config
    external_plugins: {
        "Translator": "http://example.com/public/Translator/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Translator comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Translator plugin in CKEditor 4

Download Translator
ZIP archive of Translator for CKEditor 4

Then do these simple steps:

  1. From the archive, copy plugins/Translator/ to ckeditor/plugins/Translator/, and its skin skins/n1theme/ to ckeditor/skins/n1theme/.
  2. Edit CKEditor config: add Translator to extraPlugins parameter and switch the skin to n1theme.
Using config file
Using initialization script

If you prefer to edit config.js of CKEditor, or your CKEditor is initialized in some non-editable part of your CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "Translator";
    config.toolbar = [ ["Translator", "TranslatorReverse", "TranslatorConf"] ]; // or insert them into your toolbar config
    config.skin = "n1theme";                   // N1ED's own theme for CKEditor
    config.allowedContent = true;              // keep the classes and attributes N1ED writes
    config.removePlugins = "iframe,magicline"; // N1ED has better support of this
    config.versionCheck = false;               // skip its upgrade notice of CKEditor itself

    // config.apiKey = "...";
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
};

Some CMSs do not use config.js and let you edit only the CKEditor initialization script. Make these changes there:

CKEDITOR.replace("editorId", {
    extraPlugins: "Translator",
    toolbar: [ ["Translator", "TranslatorReverse", "TranslatorConf"] ], // or insert them into your toolbar config
    skin: "n1theme",                   // N1ED's own theme for CKEditor
    allowedContent: true,              // keep the classes and attributes N1ED writes
    removePlugins: "iframe,magicline", // N1ED has better support of this
    versionCheck: false,               // skip its upgrade notice of CKEditor itself

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Translator comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Translator plugin in TinyMCE 5

Download Translator
ZIP archive of Translator for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy Translator directory to tinymce/plugins/.
  2. Edit TinyMCE config and add Translator to plugins parameter.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE 5

  1. Copy Translator directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Translator plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add Translator to plugins parameter.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config
    external_plugins: {
        "Translator": "http://example.com/public/Translator/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Translator comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Translator plugin in TinyMCE 4

Download Translator
ZIP archive of Translator for TinyMCE 4

Then do these simple steps:

  1. Copy Translator directory to tinymce/plugins/.
  2. Edit TinyMCE config and add Translator to plugins parameter.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "Translator",
    toolbar: "Translator TranslatorReverse TranslatorConf", // or insert them into your toolbar config

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Translator comes as a part of N1ED. Read the official installation manual on developer website to know more.

Reviews

We wanted to provide the translate functionality to our customers on our online platform and found the perfect add-on for this purpose. A small plugin can really make life much easier.

User icon
Daniel D.
Web service (SaaS)

We are using Translator specifically for the translator functionality and everything is working well. I love its minimalism and functionality.

User icon
Richard P.
Agency

I have experience in using 'translator' with CKEditor. It covers really a lot of languages. The process of translating is based on Google service. So it is really fast and robust.

User icon
Adrian E.
Individual