Add attributes on image tools

Question

I need add attributes on images tool

I use tiny cloud. and when I add image I need add class and attributes on image tag. Like that

<img src="img_small.jpg" class="custom-css" data-imagebox>

I can add custom-css with

tinymce.init({
   selector: 'textarea', // change this value according to your HTML
    plugins: 'image',
    menubar: 'insert',
    toolbar: 'image',
    image_advtab: true,
    image_class_list: [
        {title: 'None', value: ''},
        {title: 'custom-css', value: 'custom-css'},
    ]
});

My question is, how I can add attribute "data-imagebox" when use image tools

Answer 1

Here's an example of adding a data attribute to an image tag using TinyMCE's setup option, the editor.on method, and execCommand to check when the mceUpdateImage command is executed:

https://fiddle.tiny.cloud/Mtiaab

setup: function (editor) {
    editor.on('ExecCommand', function (e) {
        if (e.command === 'mceUpdateImage') {
            const img = editor.selection.getNode();
            img.setAttribute('data-imagebox', img.src);
        }
    });
},