add html data-attribute and class to image in froala editor

Question

I've added a custom button to the image popup in the Froala editor.

  $.FroalaEditor.DefineIcon('youtubePop', {NAME: 'youtube'});
  $.FroalaEditor.RegisterCommand('youtubePop', {
    title: 'make YouTube pop-up',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
         // do 2 things here
    }
  });

When the button is clicked, I want to do 2 things:

1. add a class to the image
2. add a html data attribute to the image

I know there is a method already for adding classes in a drop-down to an image, but I want to do 2 things with 1 button.

how?

Answer 1

  $.FroalaEditor.DefineIcon('youtubePop', {NAME: 'youtube'});
  $.FroalaEditor.RegisterCommand('youtubePop', {
    title: 'make YouTube pop-up',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      var $img = editor.image.get();
      $img.addClass('my-custom-class').attr('data-foo', 'bar');
    }
  });