Change texts in TinyMCE, inside Optimizely CMS 12

I have previously described how to update text in the TinyMCE UI inside Optimizely CMS 11. In CMS 12, things have changed slightly, because TinyMCE is updated from version 4 to version 6.

To check what version of TinyMCE you are running, you may run the following command from the console inside the developer tools in your browser of choice. Make sure to run it from a browser window where TinyMCE is loaded in edit mode.

tinymce.majorVersion

As in the previously mentioned blog post for CMS 11, I would like to change the text «Alternative description» (now updated by TinyMCE) to «Alt Text».

 

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) {
                tinymce.addI18n("nb_NO", {
                    "Alternative description": "Alternativ tekst"
                });
                tinymce.addI18n("en", {
                    "Alternative description": "Alt Text"
                });
            }
        });
    };
});

I'll save the new file in this location.

/wwwroot/ClientResources/TinyMCE/tinymceinit.js

Finally, I'll hook it up in the TinyMCE configuration, like this:

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

The final result: