如何响应 Django CKEditor

Question

我已经为我的博客Web应用程序下载了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

如果你想做响应式需要改变配置中的设置.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', ]
]
}
}

我正在使用引导程序进行样式设置，它工作得很好。