CODEWITHSUNDEEP
froala
Shawn
Shawn

Reputation: 3149

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

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?

enter image description here

Upvotes: 0

Views: 1261

Answers (1)

st3fan
st3fan

Reputation: 1640

  $.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');
    }
  });

Upvotes: 1

Related Questions