Change text in Episerver TinyMCE UI

This blog post is for CMS 11, for CMS 12 look over here.

I have previously described how to Change text in the Episerver UI. To change the default text in the TinyMCE editor, we must take another approach.

I would like to change the text «Image description» to «Alt text», to make it clearer for editors where the text is used.

To do this, I'll add a JavaScript-file with the text overrides. I'll include the text in both Norwegian and English.

// This code is called every time a TinyMCE instance is loaded on a page
define([], function () {
    return function (settings) {
        return Object.assign(settings, {
            init_instance_callback: function (editor) {
                if (tinymce.i18n.data["nb-no"]) {
                    tinymce.i18n.data["nb-no"]["Image description"] = "Alt tekst";
                }
                if (tinymce.i18n.data["en-us"]) {
                    tinymce.i18n.data["en-us"]["Image description"] = "Alt text";
                }
            }
        });
    };
});

I'll save this in a new file, in this location.

/ClientResources/TinyMCE/tinymceinit.js

To locate the correct language keys, I used developer tools in Chome, and typed tinymce.i18n.data in the console.

Then, finally hook it up in the TinyMCE configuration, like this:

config.Default()
   .InitializationScript("/ClientResources/TinyMce/tinymceinit.js");

The final result: