Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE 4 Plugins: Can't get tinymce.Editor.getLang() working

I am currently switching a plugin from TinyMCE 3.x to the new version TinyMCE 4.0.26. I encountered heavy problems when trying to internationalize my plugin labels.

Within my plugin.js, I am loading the language pack by calling

tinymce.PluginManager.requireLangPack('myplugin');

with my i18n file langs/de.js looking something like this:

tinyMCE.addI18n('de', {
  myplugin: {
    button : 'Link einf\u00FCgen/bearbeiten',
    title : 'Link einf\u00FCgen/bearbeiten'
  }
});

When I access the the static context

tinymce.i18n.data.myplugin

I can see that both variables button and title are available.

THE PROBLEM:

When calling editor.getLang('myplugin.button') I get {#myplugin.button} instead of the appropriate variable value.

After I investigated the source code a little bit, I found out that it expects the language code to exist within the tinyMCE.i18n.data....., which is not available

getLang: function(name, defaultVal) {
            return (
                this.editorManager.i18n[(this.settings.language || 'en') + '.' + name] ||
                (defaultVal !== undefined ? defaultVal : '{#' + name + '}')
            );
        },

@see https://github.com/tinymce/tinymce/blob/4.0.26/js/tinymce/classes/Editor.js#L1105

Have I done something wrong? Has anyone created a plugin for the new TinyMCE version and managed to get the internationalization working?

like image 748
Remluben Avatar asked Nov 11 '22 07:11

Remluben


1 Answers

Thanks to everyone, who tried to help me out on this. Unfortunately I could not make my plugin work with translated labels in the popup window, but finally found a solution.

Everything below works perfectly okay and easy in TinyMCE version 4.2.6.

Here the steps to make everything work with a plugin named example:

  • Create your plugin directory at plugins/example
  • Create the required plugin JS file plugins/example/plugin.min.js ( take a look at the example http://pastebin.com/jEARrtWN ) - As @msqar recommended I added the requireLangPack call right before my plugin function.
  • Now create your translation files ( Please replace de_AT by your language code ) at langs/de_AT.js and plugins/example/langs/de_AT.js

tinymce.addI18n('de_AT', {
  'Title': 'Titel',
  'Example plugin': 'Beispielplugin'
});
  • All the ( in my example ) english labels are automatically translated to de_AT when setting up TinyMCE like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <textarea name="test"></textarea>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="tinymce/tinymce.min.js"></script>
    <script>
    jQuery(document).ready(function ($) {
        $('textarea').tinymce({
            theme: "modern",
            plugins: 'example',
            toolbar: 'example',
            language:'de_AT'
        });
    })
    </script>
</body>
</html>

The result

When opening the dialog using the button inside the toolbar, the window title Example plugin is automatically translated to Beispielplugin

NO special calls to editor.getLang required.

I hope this guide works for other developers around here too. I would appreciate any positive or negative feedback.

Thanks a lot to all the developers here at @stackoverflow.

like image 112
Remluben Avatar answered Nov 15 '22 07:11

Remluben