如何响应式Django ckeditor

Question

我已经为我的博客网络应用程序下载了 ckeditor。

但是当我通过移动设备访问这个网站时，它看起来非常糟糕，因为它没有响应式，我怎样才能将其转换为响应式设计......

我正在使用 Django 3.5

CKEDITOR_CONFIGS = {

'default': {
    'toolbar': 'Custom',
    'height':500,
    'width':450,
    'extraPlugins': 'codesnippet',
    'toolbar_Custom': [
        ['Bold', 'Italic','Image', 'Underline'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink'],
        ['RemoveFormat', 'Source','codesnippet']
    ]
},
'special':
  { 'toolbar': 'Special',
  'wdith':100,
  'toolbar_Special':
  [
  ['CodeSnippet','Youtube'],
  ['Styles', 'Format', 'Bold', 'Italic', 'Underline', 'Strike', 'SpellChecker', 'Undo', 'Redo'],
  ['Link', 'Unlink',],
  ['Image','Table', 'HorizontalRule'],
  ['TextColor', 'BGColor'],
  ['Smiley', 'SpecialChar'],
  ['Source'],
  ],'extraPlugins': 'codesnippet',
  }

}

Answer 1

如果你想做响应式需要更改 config.js 中的设置

CKEDITOR.editorConfig = function (config) {

config.width = "auto";
config.height = "auto";

Answer 2

我用过 ‘宽度’：‘100%’， “高度”：“50vh”，

顺便说一句，在您的特殊设置中，“宽度”拼写错误。

Answer 3

这就是我的使用方式和效果：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'width': 'auto',       # <--------- LIKE THIS
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline'],
            ['NumberedList', 'BulletedList', ]
        ]
    }
}

我正在使用 bootstrap 进行造型，效果非常好。