CKEditor 4中如何基于图片文件名自动填充alt文本？

直接修改image.js没用，因为拖拽上传的流程由uploadimage和uploadwidget插件处理，和传统图片对话框的逻辑不重合。你可以通过以下两种方式实现，推荐用第一种（不修改核心文件，便于后续版本升级）：

方法一：通过编辑器事件监听实现（推荐） #

在初始化CKEditor时添加事件监听，拦截上传后的图片处理流程，自动生成alt文本：

CKEDITOR.replace('editor-id', {
  extraPlugins: 'image,uploadwidget,uploadimage',
  // 你的其他编辑器配置项
  on: {
    instanceReady: function(editor) {
      // 监听图片上传完成事件（适用于上传到服务器的场景）
      editor.on('uploadImageUploaded', function(evt) {
        var file = evt.data.file;
        var imgElement = evt.data.element;
        
        // 从文件名生成alt文本：去掉后缀、替换连字符为空格
        var fileName = file.name.split('.')[0];
        var altText = fileName.replace(/-/g, ' ');
        
        // 设置图片的alt属性
        imgElement.setAttribute('alt', altText);
      });

      // 处理本地拖拽图片（未上传到服务器，以base64显示的场景）
      editor.on('insertElement', function(evt) {
        var element = evt.data.element;
        if (element.is('img') && element.getAttribute('src').startsWith('data:')) {
          var fileName = element.getAttribute('data-cke-upload-file-name');
          if (fileName) {
            var altText = fileName.split('.')[0].replace(/-/g, ' ');
            element.setAttribute('alt', altText);
          }
        }
      });
    }
  }
});

方法二：修改uploadwidget插件逻辑（不推荐，升级会覆盖） #

如果一定要修改核心文件，找到plugins/uploadwidget/plugin.js，定位到uploadWidgetDefinition.onUploaded方法，添加alt文本生成逻辑：

// 在uploadWidgetDefinition的onUploaded方法中插入以下代码
onUploaded: function(upload) {
  var widget = this;
  var element = widget.element;
  
  // 原插件代码...
  
  // 新增：从文件名生成并设置alt文本
  var fileName = upload.file.name.split('.')[0];
  var altText = fileName.replace(/-/g, ' ');
  element.setAttribute('alt', altText);
}

关键说明 #

• 拖拽上传的核心流程是：uploadimage处理文件上传、uploadwidget管理上传状态，完成后替换为真实img元素。因此要在这个流程中插入alt文本生成逻辑，而非修改传统图片对话框的代码。
• 文件名转换逻辑可按需调整，比如处理下划线、首字母大写等，只需修改字符串处理部分即可。

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