调整ckeditor的响应式设计

时间:2014-01-18 17:19:38

标签: javascript ckeditor

我正在尝试在响应式设计上使用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);

3 个答案:

答案 0 :(得分:5)

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

中的设置
CKEDITOR.editorConfig = function (config) {

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

答案 1 :(得分:1)

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

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

          },
    }

答案 2 :(得分:0)

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

#cke_description {
    width: auto !important;
}

Version 4.4.4为我工作。