TinyMCE 4 Plugins: Can't get tinymce.Editor.getLang() working
Question
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?
3 answers
solution1
1 ACCPTED 2015-10-27 19:38:16
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.
solution2
0 2015-03-24 10:40:01
您可以使用以下内容直接访问正确的字符串：
tinymce.EditorManager.i18n.data[ed.getParam('language') + '.myplugin_name']['my_key'];
solution3
0 2015-06-11 19:33:43
I finally made it work, maybe it can help, this is 1 year old though, but can help others. Since the entire way of creating a plugin changed from 3.X to 4.X, the requireLangPack i was adding to my plugin was in an incorrect location.
I was doing:
tinymce.PluginManager.add('myplugin', function(editor, url) {
tinymce.PluginManager.requireLangPack('myplugin');
...
});
When it should be:
tinymce.PluginManager.requireLangPack('myplugin');
tinymce.PluginManager.add('myplugin', function(editor, url) {
...
});
Also, the way I accessed those variables was:
editor.getLang("myplugin").title;
Instead of
editor.getLang("myplugin.title");
Hope it works for other people under the same circumstance.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.