User Contributed Notes

1. Skip to note 2 content

   
   Steven Lin
   
   
   5 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

   Example Migrated from Codex:

   add_filter('mce_external_languages', 'my_custom_tinymce_plugin_add_locale');
   
   function my_custom_tinymce_plugin_add_locale($locales) {
       $locales ['My-Custom-Tinymce-Plugin'] = plugin_dir_path ( __FILE__ ) . 'my-custom-tinymce-plugin-langs.php';
       return $locales;
   }

   Replace My-Custom-Tinymce-Plugin with your identifier of your plugin and make sure the path to my-custom-tinymce-plugin-langs.php is correct.

   Translating strings with mce_external_languages

   Create a new file, called something like my-custom-tinymce-plugin-langs.php and open it. Insert the following code.

   // This file is based on wp-includes/js/tinymce/langs/wp-langs.php
   
   if ( ! defined( 'ABSPATH' ) )
       exit;
   
   if ( ! class_exists( '_WP_Editors' ) )
       require( ABSPATH . WPINC . '/class-wp-editor.php' );
   
   function my_custom_tinymce_plugin_translation() {
       $strings = array(
           'somestring' => __('My custom Tinymce plugin', 'textdomain'),
       );
       $locale = _WP_Editors::$mce_locale;
       $translated = 'tinyMCE.addI18n("' . $locale . '.my_custom_tinymce_plugin", ' . json_encode( $strings ) . ");n";
   
        return $translated;
   }
   
   $strings = my_custom_tinymce_plugin_translation();

   What the code does

   The code first checks if the file is included by WordPress. If not, it exits. Next, it checks if the class _WP_Editors exists. If not, the class is loaded (from wp-includes/class-wp-editor.php).

   We wrap the translation in a function (this to make sure there are no global variables) called my_custom_tinymce_plugin_translation (make sure your function is unique). This is where you can translate your strings with a associative array. The key in this array is also the key you will use later on to get the translation. Then we retrieve the locale for the editor and we build some JavaScript. We use the tinyMCE.addI18n JavaScript function to add the translated strings to the editor. Some information about the arguments:

   "' . $locale . '.my_custom_tinymce_plugin"
   This is the “textdomain” of the translation. It should look rendered like “en.my_custom_tinymce_plugin” (the language, in this case en, is set to the value of the variable $locale). We use my_custom_tinymce_plugin as “textdomain”.

   json_encode( $strings )
   This converts the translated strings to JavaScript.

   That bit of JavaScript code is returned by the function.

   You can see that on the last line of the file, our function my_custom_tinymce_plugin_translation is called and that the translated strings are saved in the global variable $strings (The variable has to be called $strings, or it won’t work).

   Load the translations

   Next, use the next code to make sure WordPress loads the translations

   unction my_custom_tinymce_plugin_add_locale($locales) {
       $locales ['My-Custom-Tinymce-Plugin'] = plugin_dir_path ( __FILE__ ) . 'my-custom-tinymce-plugin-langs.php';
       return $locales;
   }
   add_filter('mce_external_languages', 'my_custom_tinymce_plugin_add_locale');

   Use the translations in your Javascript

   // ed is the current tinymce editor.
   ed.getLang('my_custom_tinymce_plugin.somestring');

   This will return the translation of “My custom Tinymce plugin”.