javascript - 在tinymce中更改图像信息后有没有办法获得回调？

Question

我想在更改图像中的 ALT 属性后得到回调。上图显示了功能。

1. 添加图像后，我单击该图像，然后单击“图像选项”按钮(或“插入/编辑图像”)。

2. 将打开一个窗口。更改数据后，我想要一个回调，以获取新的替代文本，然后保存在数据库中。

我试过these options ，但不起作用。

我的TinyMCE插件是TinyMCE Rails Gem 。 tinymce 工作正常，我只需要一个回调来使用 TinyMCE 的默认对话框进行更改后获取 alt attr。

TinyMCE 设置:

  tinyMCE.init({
    selector: "textarea.tinymce",
    menubar: false,
    paste_as_text: true,
    resize: true,
    height: 500,
    language: "pt_BR",
    style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
    plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
    toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"]
  });

谢谢!

编辑 1

更改tinymce设置(包括file_browser_callback)后，没有任何反应。代码是:

TinyMCE 设置:

  tinyMCE.init({
    selector: "textarea.tinymce",
    menubar: false,
    paste_as_text: true,
    resize: true,
    height: 500,
    language: "pt_BR",
    style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
    plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
    toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"],
    file_browser_callback: "UpdateImgAlt"
  });

获取回调的函数:

function UpdateImgAlt(callback, value, meta){
  console.log('callback: '+callback);
  console.log('value: '+value);
  console.log('meta: '+meta);
}

Answer 1

编辑器不提供与图像插入相关的特定事件。如果您查看 image 插件的源代码，它确实会触发 change 事件，以便您可以在发生这种情况时收到通知。获取该通知的代码如下所示:

tinymce.init({
  selector: '#myeditor',
  ...
  setup: function (editor) {
    editor.on('change', function (e) {
      console.log('change event fired');
      console.log(e);
      console.log('Content changed to:  ' + editor.getContent());
    });
  }
});

然后您可以查看更改的内容中是否有图像，并从那里执行您需要的操作。