Image upload inside custom TinyMCE plugin

[Kat L.]

Is there a way to use Cloudinary image upload inside my own custom TinyMCE plugin?

The way I am working with custom plugins is having the plugin path inside keystone.init({})

external_plugins: {
   'example':'/plugins/example/plugin.min.js'
},...

and then creating the plugin and the dialog window like that:

tinymce.PluginManager.add('example', function(editor) {

   editor.addMenuItem('example1', {
        text: 'Example plugin #1',
        context: 'insert',
        onclick: function() {
            editor.windowManager.open({
            title: 'Example plugin №1',
            body: [
               {type: 'textbox', name: 'title', label: 'Title'},
               {type: '???', name: 'img', label: 'Image' }
            ],
            onsubmit: function(e) {
               editor.insertContent("<my-custom-component data-img=" + e.data.img + '>" + e.data.title + "</my-custom-component>");
            }
            });
        }
    });
...

The question is whether (and how) I can let my plugin know about the CloudinaryImage type. It is available to the TinyMCE editor but how can I make one plugin available to another external plugin?

[Chris Troutner]

You might want to check out the TinyMCE plugins I created for ConnextCMS. The plugin files are located in /public/js/lib/tinymce/plugins/image_gallery

In my case, I was using locally hosted images instead of Cloudinary, but that shouldn't matter too much. The image_gallery plugin is just fetching data from a KeystoneJS model to display inside TinyMCE. It doesn't matter weather that model points to a Cloudinary image or an image hosted somewhere else.

[Chris Troutner]

Oops. I meant to say that I wasn't using Cloudinary.

[Kat L.]

Thank you so much for your response, Chris! It looks very close to what I am trying to achieve!

[Chris Troutner]

I'm glad I could help! If you get the chance, please star the GitHub repo.