调整 CKEditor 大小以适应响应式设计

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);

- user2250471

---

你需要监听窗口的 resize 事件，并在那里执行 JavaScript 的 resize。 - Pekka

你能给我一点提示怎么做吗？ - user2250471

CKEditor已经自带/需要jQuery了，对吧？如果是的话，请查看jQuery的.resize()事件示例：http://api.jquery.com/resize/。您可以将`editor.resize()`放在该函数中，并将其传递给新的所需像素宽度。 - Pekka

请注意，CKEDITOR.replace 返回 editor 对象。您还可以在全局 CKEDITOR.instances 对象中找到您的实例。 - oleq

Answer 1

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

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

          },
    }

- Mohammed

---

非常感谢。这正如预期的那样工作！：） - RUGVED

完美无误，谢谢。 - Hmatrix

Answer 2

如果您想要响应式设计，需要在config.js文件中更改设置。

CKEDITOR.editorConfig = function (config) {

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

- sandeep

Answer 3

/* main.css */
.django-ckeditor-widget {
  width: 100%;
}

- grace remce

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。您可以在帮助中心找到有关编写良好答案的更多信息：https://stackoverflow.com/help/how-to-answer。祝你好运！ - nima

Answer 4

找到具有固定宽度的 div 并将其宽度强制设置为 auto。

#cke_description {
    width: auto !important;
}

在我的电脑上，版本 4.4.4 运行良好。

- GabLeRoux