在 froala 编辑器中向图像添加 html 数据属性和 class

Question

我在 Froala 编辑器的图像弹出窗口中添加了一个自定义按钮。

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

单击按钮时，我想做两件事：

给图片添加一个class
向图像添加 html 数据属性

我知道已经有一种方法可以将 classes 添加到图像的下拉列表中，但我想用 1 个按钮做 2 件事。

怎么样？

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

在 froala 编辑器中向图像添加 html 数据属性和 class

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

froala