Question

我有一个简单的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％。如何获得覆盖可用宽度的

？

谢谢

Answer 1

我用CSS来解决。

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

Answer 2

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

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

希望这可以解决您的问题

Answer 3

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

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

Answer 4

在templates > admin > change_form.html

编辑“admin_change_form_document_ready”块

{% 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 %}

Django ckeditor-将宽度设置为100％

4 个答案: