Django环境下CKEditor图片属性面板自定义问题求助

针对你提出的四个自定义需求，结合Django的CKEDITOR_CONFIGS配置，具体解决方案如下：

1. 将Upload标签页设为默认显示 #

需要通过覆盖图片对话框的默认定义，指定初始激活的标签页。在你的CKEDITOR_CONFIGS['default']中添加以下配置：

'on': {
    'dialogDefinition': function(ev) {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        if (dialogName === 'image') {
            // 设置默认激活Upload标签页
            dialogDefinition.onShow = function() {
                this.selectPage('Upload');
            };
        }
    }
},

2. 修改面板主题的CSS文件位置 #

你使用的light皮肤对应的对话框CSS文件路径为：
static/ckeditor/skins/light/dialog.css
如果需要自定义样式，也可以在配置中添加extraCss引入自己的CSS文件，示例：

'extraCss': '/static/css/custom_ckeditor_dialog.css',

3. 解锁图片宽高修改功能 #

默认情况下CKEditor会锁定宽高比例，你可以通过两种方式解锁：

方法一：全局关闭比例锁定 #

在CKEDITOR_CONFIGS['default']中添加：

'imageLockRatio': False,

方法二：在对话框中单独解锁输入框 #

结合上面的dialogDefinition配置，补充以下逻辑：

if (dialogName === 'image') {
    // 解锁Image Info标签页的宽高输入框
    var infoTab = dialogDefinition.getContents('info');
    infoTab.get('txtWidth').disabled = false;
    infoTab.get('txtHeight').disabled = false;
}

4. 设置图片最大宽度上限 #

可以通过两种方式实现限制：

方法一：配置全局最大宽度 #

在CKEDITOR_CONFIGS['default']中添加：

'imageResize_maxWidth': 1200,  # 替换为你需要的像素值

方法二：在对话框中限制输入框最大值 #

在dialogDefinition中修改宽高输入框的属性：

if (dialogName === 'image') {
    var infoTab = dialogDefinition.getContents('info');
    infoTab.get('txtWidth').max = 1200;  # 限制宽度输入最大值
}

如果需要上传后自动缩放图片，还可以配合Django后端的图片处理逻辑，在上传环节直接将图片压缩到指定宽度。

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