Have a Question?

If you have any question you can ask below or enter what you are looking for!

Question Detial

resize ckeditor for responsive design

5:19pm 18th January 2014 10301 Views

I'm trying to use CKEditor on a responsive design, and I cannot get the height to work. The following code with height define works to resize the text area to 100%, which overflows the containing 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%'
        });

I have found the below code, but I can't figure out where to paste it. I've also tried editing config.js, and following all the documentation on CKEDitor's website. They tell you what to do, but not where to do it.

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

In theory, the "true" will make the height include the entire editor, not just the text area, but I don't know where it belongs.

The div containing the editor uses this CSS:

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

Answers

Mike Patrick

8:54am 14th March 2014

if u want to do responsive need to change setting in config.js

CKEDITOR.editorConfig = function (config) {

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

Jonathan Leffler

3:12pm 15th September 2014

Find which div has a fixed width and force it's width to auto.

#cke_description {
    width: auto !important;
}

Worked for me on Version 4.4.4.