如何调整Django-CKEditor上传图片的宽高为100%？

需求说明 #

使用Django 6.5.1开发项目，需实现以下两个目标：

• 移除CKEditor编辑器中的图片调整（缩放、拖拽改变尺寸）选项
• 让通过CKEditor上传/插入的图片，在前端HTML页面中自动应用width: 100%; height: 100%;样式

当前配置 #

1. settings.py中的CKEditor配置 #

CKEDITOR_CONFIGS = {
    'default': {
        'height': 90,
         'width': 700,
        # 'skin': 'moono',
        # # 'skin': 'office2013',
        # 'toolbar_Basic': [
        #     ['Source', '-', 'Bold', 'Italic']
        # ],
        'toolbar_Custom': [
            {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},
            {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
            {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},
            {'name': 'forms',
             'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                       'HiddenField']},
            '/',
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                       'Language']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'insert',
             'items': ['Image', 'Youtube','Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
            '/',
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
            {'name': 'about', 'items': ['CodeSnippet']},
            {'name': 'about', 'items': ['About']},

        ],
        'toolbar': 'Custom',  # put selected toolbar config here
        'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
        'height': 400,
        'width': '100%',
        'filebrowserWindowHeight': 725,
        'filebrowserWindowWidth': 940,
        'toolbarCanCollapse': True,
        'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage', # the upload image feature
            # your extra plugins here
            'div',
            'autolink',
            'autoembed',
            'embedsemantic',
            'autogrow',
            'devtools',
            'widget',
            'lineutils',
            'clipboard',
            'dialog',
            'dialogui',
            'elementspath',
            'codesnippet',
            
        ]),
    }
}

2. post_form.html中的脚本引入 #

<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

3. 展示页面的HTML代码 #

{% extends "blog/base.html" %}
{% block content %}
    <article class="media content-section">
        <div class="media-body">
            <div class="article-metadata">
            <img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}">
              <a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
              <small class="text-muted">{{ object.date_posted|date:'F d, Y'}}</small>
              {% if object.author == user %}
            <div>
              <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
              <a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
            </div>
          {% endif %}
            </p>

            <h2 class="article-title"> {{ object.title }} </h2>
            <img src="{{ post.image.url }}" class="rounded blog-pics-list" alt="post_img">
            <p class="article-content">{{ object.content | safe }}</p>
        </div>
    </article>
{% endblock content %}

解决方案 #

1. 修改CKEditor配置，移除图片调整选项 #

在settings.py的CKEDITOR_CONFIGS['default']中添加以下配置项：

# 禁用图片拖拽调整尺寸
'image2_disableResizer': True,
# 移除图片对齐选项（可选，若不需要对齐功能）
'image2_alignClasses': [],
# 设置插入图片时的默认属性，直接给图片添加宽高样式
'image2_defaultAttributes': {
    'width': '100%',
    'height': '100%',
    'style': 'object-fit: cover;'  # 可选，防止图片拉伸变形
},

2. 通过CSS强制页面图片样式 #

在项目全局CSS文件或页面内的<style>标签中添加以下规则，确保CKEditor渲染的内容里的图片应用目标样式：

.article-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 可选，保持图片比例同时填充容器 */
}

3. 验证效果 #

修改后重启Django服务，重新打开编辑器插入图片：

• 编辑器内不再显示图片调整的拖拽控制点
• 前端页面渲染时，CKEditor内容中的图片会自动应用100%宽高样式

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