Django ckeditor - 将宽度设置为 100%

Django ckeditor - set width to 100%

我有一个简单的 django-ckeditor 实现,默认设置设置为

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline',
             '-', 'Link', 'Unlink', 'Anchor',
             '-', 'Format',
             '-', 'SpellChecker', 'Scayt',
             '-', 'Maximize',
             '-', 'Language',
            ],
        ],
        'height': '100%',
        'width': '100%',
        'toolbarCanCollapse': False,
    },
}

在我的表单中我有

{{ form.media }}
{{ form.description }}

我希望 ckeditor 字段覆盖 100% 的宽度,但它覆盖了 100% 的菜单栏。如何让它覆盖可用宽度?

谢谢

在设置 ckeditor 实例时,您可以像这样触发 maximize 事件。

CKEDITOR.on('instanceReady',
   function( evt )
   {
     var editor = evt.editor;
     editor.execCommand('maximize');
   });

希望这能解决您的问题

我遇到了同样的问题。将此 javascript 添加到模板中解决了我的问题。

 $(document).ready(function () {
    $(".django-ckeditor-widget").css("width", "100%")
 });

我用css解决了

.django-ckeditor-widget{
  width: 100%;
}

编辑“admin_change_form_document_ready”块在模板>管理>change_form.html

{% block admin_change_form_document_ready %}
    <script type="text/javascript"
            id="django-admin-form-add-constants"
            src="{% static 'admin/js/change_form.js' %}"
            {% if adminform and add %}
                data-model-name="{{ opts.model_name }}"
            {% endif %}>
    </script>
    <script>
      setTimeout(function(){
        for (let editor of document.getElementsByClassName('cke_browser_webkit')){
          editor.style.width = '100%';
        }
      }, 500)
    </script>
{% endblock %}

css:

.django-ckeditor-widget{
    display: inline !important;
}

在settings.py

CKEDITOR_CONFIGS = {
    'default': {
        'height': 'full', 
        'width': 'full', 
    },
}