Question

我正在尝试在响应式设计上使用CKEditor，但我无法让高度发挥作用。以下带有高度定义的代码可以将文本区域的大小调整为100％，这会溢出包含的div。

        CKEDITOR.replace( 'article', {
            toolbar: [
                { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
                { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Blockquote' ] },
                { name: 'links', items : [ 'Link','Unlink' ] },
                { name: 'insert', items : [ 'Image' ] }
            ],
            uiColor: '#f9fafb',
            height: '100%'
        });

我找到了下面的代码，但我无法弄清楚粘贴的位置。我也尝试过编辑config.js，并遵循CKEDitor网站上的所有文档。他们告诉你该做什么，但不知道在哪里做。

editor.resize( '100%', '350', true );

理论上，“true”将使高度包括整个编辑器，而不仅仅是文本区域，但我不知道它属于何处。

包含编辑器的div使用此CSS：

height: -moz-calc(100% - 400px);
height: -webkit-calc(100% - 400px);
height: calc(100% - 400px);

Answer 1

如果您想要响应需要更改config.js

中的设置

CKEDITOR.editorConfig = function (config) {

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

Answer 2

在django中，我必须将auto文件中的宽度设置为settings.py：

CKEDITOR_CONFIGS = {
'default': {
    'toolbar': None, #You can change this based on your requirements.
    'width': 'auto',

          },
    }

Answer 3

找出哪个div具有固定宽度并将其宽度强制为auto。

#cke_description {
    width: auto !important;
}

Version 4.4.4为我工作。

调整ckeditor的响应式设计

3 个答案: