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?
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:
tinymce.addI18n('de_AT', {
'Title': 'Titel',
'Example plugin': 'Beispielplugin'
});
<!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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With