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

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