How to add plugin to Tinymce

I am working with tinymce and i need to add plugin , i fallow documetation of tinymce to add new plugin..

as documentation on tinymce plugin look like :

tinymce.PluginManager.add('example', 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('example', {
    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('example', {
    text: 'Example plugin',
    onAction: function() {
      // Open window
      openDialog();
    }
  });

  return {
    getMetadata: function () {
      return  {
        name: "Example plugin",
        url: "http://exampleplugindocsurl.com"
      };
    }
  };
});

and put it into seperate file called plugins/example/plugin.js and added to tinymce using this script :

{
  selector: "#editor",
  directionality: "rtl",
  branding: false,
  height: 500,
  theme: "modern",
  // toolbar: 'mybutton',
  external_plugins: {
    'example': "plugins/example/plugin.js",
  },
  plugins:
    "example",
}

and after run it i get undefiend tinymce

what can I do to fixed ??