CKEditor 4图片上传UI自定义：如何实现简易上传按钮

• 方案1：修改默认图片上传弹窗样式（零侵入原有上传逻辑）
  直接在全局样式中添加CSS规则隐藏不需要的模块，仅保留上传相关操作区域：

/* 隐藏图片弹窗多余标签页 */
.cke_dialog_contents [role="tablist"] li:not(:last-child) {
  display: none !important;
}
/* 隐藏上传页多余配置项，仅保留文件选择按钮和确认按钮 */
.cke_dialog_page_contents .cke_dialog_ui_hbox:not(:nth-last-child(2)) {
  display: none !important;
}

调整后默认弹窗会仅保留文件选择和提交按钮，无需修改CKEditor核心逻辑。

• 方案2：自定义工具栏上传按钮（完全自定义UI，无冗余功能）
  直接通过CKEditor API注册自定义上传按钮，彻底替换默认图片上传组件，逻辑完全自主可控：

// 注册自定义上传命令
CKEDITOR.addCommand('simpleImageUpload', {
  exec: function(editor) {
    // 创建隐藏的文件选择input
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = function(e) {
      const file = e.target.files[0];
      if (!file) return;
      // 调用自有后端上传接口
      const formData = new FormData();
      formData.append('upload', file);
      fetch('/你的上传接口地址', {
        method: 'POST',
        body: formData
      }).then(res => res.json())
      .then(data => {
        if (data.url) {
          // 上传成功后直接插入图片到编辑器
          editor.insertHtml(`<img src="${data.url}" alt="">`);
        }
      })
    }
    input.click();
  }
});
// 把自定义按钮加到工具栏
CKEDITOR.config.toolbar.push({
  name: 'insert',
  items: ['simpleImageUpload']
});
// 配置按钮图标（可替换为本地图片路径）
CKEDITOR.ui.addButton('simpleImageUpload', {
  label: '上传图片',
  command: 'simpleImageUpload',
  icon: '/本地按钮图标路径.png'
});

配置完成后工具栏会出现自定义上传按钮，点击直接唤起系统文件选择器，选图后自动上传插入，完全没有多余交互步骤。

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