在tinymce中更改图像信息后有办法获得回调吗？答案

【问题标题】：There's a way to get a callback after change image info in tinymce?在tinymce中更改图像信息后有办法获得回调吗？
【发布时间】：2018-10-25 23:53:02
【问题描述】：

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

包含图像后，我单击图像，然后单击图像选项按钮（或插入/编辑图像）。
将打开一个窗口。更改数据后，我想要一个回调，以获取新的替代文本，然后保存在数据库中。

我试过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);
}

【问题讨论】：

当您尝试file_browser_callback 时会出现什么错误？
@rails-id 你好！当我使用file_browser_callback 时，根本没有任何反应。也许我用错了。我用代码更新了答案
您是否尝试过将回调函数作为值而不是函数的“名称”？
类似这样的东西：file_browser_callback: function(){... ?

标签： javascript ruby-on-rails tinymce tinymce-4

【解决方案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());
    });
  }
});

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

【讨论】：

感谢答案。它可能有效，但我认为分析每个更改都不是一个好主意。 BUTTTT，你给我一个好主意。当用户点击完成并提交到服务器时，我会用 Nokogiri 解析 html 内容，我会得到所有img 标签并得到alt。然后，将新的alt 保存到数据库中。

【解决方案2】：

NodeChange 是您可能正在寻找的事件。这是我正在使用的代码。确保在块的末尾添加一个 return 以允许 javascript 继续执行 - 否则，您将无法执行编辑图像之类的操作。

// When an image is inserted into the editor after image upload...
editor.on('NodeChange', function (e) {
    if (e.element.tagName === "IMG") { 
        // Set an alt attribute. We will insert the value when the image was successfully uploaded and the imageId was returned from the server. We saved the alt tag that we want into the imageId hidden input field (imageId) when the server returned data. Here, we are taking that value and inserting the new alt tag.
        e.element.setAttribute("alt", $("#imageId").val());
        return; 
    }
    return;
});

【讨论】：