TinyMCE 5.8.2如何将图片alt描述字段设为插入前必填项

不需要从零开发独立插件，通过编辑器内置API做提交前拦截即可实现需求，比事后校验的a11y_advanced_options配置更符合交互要求，以下是两种可落地的实现方式：

方案1：初始化时挂载事件拦截（推荐，维护成本最低） #

直接在TinyMCE初始化的setup钩子中绑定对话框打开事件，对图片插入弹窗的提交动作做前置校验，不需要修改原生插件代码，后续版本升级兼容性更好：

• 弹窗打开后判断是否为图片插入对话框
• 拦截提交动作，先校验alt输入框的内容（自动去除首尾空格，避免纯空格内容绕过校验）
• 校验不通过时直接阻断提交，给alt输入框标红并展示错误提示，不关闭弹窗
• 校验通过后走原生插入/上传流程

可直接复用的配置代码：

tinymce.init({
  selector: '#your-editor-area',
  plugins: 'image', // 其余原有插件配置保持不变
  toolbar: 'image', // 其余原有工具栏配置保持不变
  setup: (editor) => {
    editor.on('OpenWindow', (e) => {
      const currentDialog = e.dialog;
      const dialogData = currentDialog.getData();
      // 仅针对图片插入弹窗做处理
      if (Object.prototype.hasOwnProperty.call(dialogData, 'alt')) {
        currentDialog.setMetadata({
          onSubmit: (dialogApi) => {
            const formData = dialogApi.getData();
            const altContent = formData.alt?.trim() || '';
            if (!altContent) {
              // 校验不通过，给alt字段追加错误提示
              const originConfig = dialogApi.getConfig();
              dialogApi.redial({
                ...originConfig,
                items: originConfig.items.map(field => {
                  if (field.name === 'alt') {
                    return {
                      ...field,
                      error: '图片替代描述（alt）为必填项，请填写后再提交'
                    }
                  }
                  return field;
                })
              });
              return false;
            }
            // 校验通过，执行原有插入逻辑
            dialogApi.close();
            // 如果是本地图片上传场景，这里替换为你原有的上传回调逻辑即可
            editor.insertContent(`<img src="${formData.src}" alt="${altContent}" ${formData.width ? `width="${formData.width}"` : ''} ${formData.height ? `height="${formData.height}"` : ''} />`);
            return true;
          }
        })
      }
    })
  }
})

如果你已经配置了图片上传接口处理逻辑，只需要把校验通过后的执行逻辑替换成你原有上传成功后的插入代码即可，不需要改动上传相关的其他配置。

方案2：二次修改原生image插件（适合需要深度定制的场景） #

如果后续你还需要给图片插入表单加更多自定义字段、校验规则，可以直接基于官方原生image插件做修改：

• 从你本地引入的TinyMCE5.8.2源码中，找到image插件的源码文件
• 定位到弹窗提交的处理函数，在执行插入逻辑前加入alt非空校验
• 将修改后的插件作为自定义插件放到项目中，初始化时优先加载自定义插件替换原生image插件
  这个方案灵活度最高，但后续升级TinyMCE版本时需要手动同步官方插件的更新内容，维护成本比方案1高。

不建议从零开发独立图片插件，原生image插件已经处理了跨域图片、上传进度、尺寸自适应、历史记录回退等大量边界场景，从零开发重复工作量大，容易出现兼容问题。

内容的提问来源于stack exchange，提问作者Gregory Boutte