Tags: Alt-text Language Properties

Change text in Episerver TinyMCE UI

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 aproach.

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

The dialog for editing an image, before the change

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.

A screen shot of Chrome Developer Tools showing texts from the TinyMCE UI

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

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

The final result:

The dialog for editing an image, after the change