如何在TinyMCE修改图片ALT属性后触发回调？

嘿，我注意到你之前尝试用file_browser_callback来实现修改图片ALT后的回调，但这个配置其实是用来自定义文件浏览器的，完全不适用这个场景！别担心，我给你两个靠谱的方案，完美匹配你的需求：

方案一：实时监听节点变化（精准捕捉ALT属性修改） #

这个方案会在编辑器选中图片且其ALT属性发生变化时立即触发回调，适合需要实时响应的场景。

修改你的TinyMCE初始化配置，添加setup选项绑定事件：

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"],
  // 新增setup配置，绑定节点变化事件
  setup: function(editor) {
    let previousAlt = '';
    editor.on('NodeChange', function(e) {
      // 检查当前选中元素是否为图片
      if (e.element.tagName === 'IMG') {
        const currentAlt = e.element.getAttribute('alt') || '';
        // 对比历史值，避免重复触发回调
        if (currentAlt !== previousAlt) {
          previousAlt = currentAlt;
          // 调用自定义函数，把新ALT值传给后端存入数据库
          saveImageAltToDB(e.element.src, currentAlt);
        }
      } else {
        // 选中非图片元素时重置历史值
        previousAlt = '';
      }
    });
  }
});

// 自定义回调函数：处理ALT值存入数据库的逻辑
function saveImageAltToDB(imageUrl, newAltText) {
  console.log('目标图片URL:', imageUrl);
  console.log('新的ALT文本:', newAltText);
  // 这里替换成你的后端请求逻辑，比如AJAX
  // 示例：
  // fetch('/api/update-image-alt', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ imageUrl: imageUrl, altText: newAltText })
  // });
}

方案二：监听图片编辑对话框关闭（精准匹配你的操作流程） #

如果你只需要在用户关闭「图片选项」对话框后触发回调，这个方案更贴合你的操作路径：

tinyMCE.init({
  // 其他配置和之前保持一致...
  setup: function(editor) {
    let isImageDialogActive = false;
    // 监听窗口打开事件，判断是否为图片编辑对话框
    editor.on('OpenWindow', function(e) {
      const dialog = e.dialog;
      // 通过对话框标题或ID判断是否是图片编辑窗口
      if (dialog.settings.title === 'Insert/Edit Image' || dialog.settings.id === 'image') {
        isImageDialogActive = true;
      }
    });
    // 监听窗口关闭事件，执行回调
    editor.on('CloseWindow', function(e) {
      if (isImageDialogActive) {
        isImageDialogActive = false;
        // 获取当前选中的图片元素
        const selectedImg = editor.selection.getNode();
        if (selectedImg.tagName === 'IMG') {
          const newAlt = selectedImg.getAttribute('alt') || '';
          saveImageAltToDB(selectedImg.src, newAlt);
        }
      }
    });
  }
});

// 复用上面的saveImageAltToDB函数即可
function saveImageAltToDB(imageUrl, newAltText) {
  console.log('目标图片URL:', imageUrl);
  console.log('新的ALT文本:', newAltText);
  // 后端存储逻辑...
}

为什么之前的file_browser_callback无效？ #

file_browser_callback的作用是当用户点击编辑器里的「浏览文件」按钮（比如插入图片时选择本地文件）时，自定义文件选择的逻辑，它完全不会在修改图片属性后触发，所以这个配置和你的需求不匹配。

内容的提问来源于stack exchange，提问作者Diego Somar