Creating a custom Rails tinyMCE plugin: editor.ui is undefined - ruby-on-rails

Question

I want to add a custom plugin to a rails backed tinyMCE editor, however in the console I get editor.ui is undefined and it fails
If I comment out any code relating to editor.ui in the config.js file then the editor loads and using the 'Help' plugin I can see that my plugin is loading fine from the getMetadata function
/config/tinymce.yml
toolbar:
- bold italic underline superscript subscript underline | link | alignleft aligncenter alignright | bullist numlist | hr | forecolor | backcolor | table | myplugin | image | help
plugins:
- link table lists textcolor myplugin image imagetools help
app/assets/javascripts/tinymce/plugins/myplugin/plugin.js
(this is just copied directly from https://www.tiny.cloud/docs/advanced/creating-a-plugin/ changing "example" for "myplugin")
$(document).on("ready", function() {
tinymce.PluginManager.add("myplugin", function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: "Example plugin",
body: {
type: "panel",
items: [
{
type: "input",
name: "title",
label: "Title"
}
]
},
buttons: [
{
type: "cancel",
text: "Close"
},
{
type: "submit",
text: "Save",
primary: true
}
],
onSubmit: function (api) {
var data = api.getData();
// Insert content when the window form is submitted
editor.insertContent("Title: " + data.title);
api.close();
}
});
};
// Add a button that opens a window
editor.ui.registry.addButton("myplugin", {
text: "My button",
onAction: function () {
// Open window
openDialog();
}
});
// Adds a menu item, which can then be included in any menu via the menu/menubar configuration
editor.ui.registry.addMenuItem("myplugin", {
text: "Example plugin",
onAction: function() {
// Open window
openDialog();
}
});
return {
getMetadata: function () {
return {
name: "Example plugin",
url: "http://exampleplugindocsurl.com"
};
}
};
});
});

Answer 1

Which version of TinyMCE are you using? This code works fine on our fiddle website:
http://fiddle.tinymce.com/PGgaab

Answer 2

Without seeing the full code you are using it will be hard to say for sure but document ready in jQuery is likely firing well before TinyMCE itself is initialized. If that is the case you can't use a TinyMCE API to add a plugin before TinyMCE is initialized.
I would, as that documentation page suggests, place the plugin code in a file and load it like all other TinyMCE plugins. TinyMCE will get the plugins at the correct time in its initialization process and this would no longer be an issue.