CKEditor & JavaScript - Adjust height and width in CKEditor

Question

How can I adjust the height in CKEditor?

Here is my code for CKEditor.

<script type="text/javascript">
    CKEDITOR.replace( 'content',
        {
            toolbar :
            [
                ['Source'],
                ['Bold','Italic','Underline','Strike'],
            ]
        });
</script>

Answer 1

Add the height and width setting in the parameters:

CKEDITOR.replace( 'content',
    {
        toolbar :
        [
            ['Source'],
            ['Bold','Italic','Underline','Strike'],
        ],
        height: 300,
        width: 400
    });

Answer 2

Go to confi.js file and in the

CKEDITOR.editorConfig = function( config ) {
.
.
.
.
**config.height = 320;**
};

So actually you just need to add config.height = required height; .

Answer 3

This can be easily done by adding few lines of code in your common script file.

1. Create a member variable to get the total size of paragraph tags var ttl = 0;
2. Check each paragraph element to get it's outer height and append the value back to total $().find('p').each(function() { ttl += $(this).outerHeight(true); });
3. Add the editor header and footer size which was neglected. it's 120px! var total = total+120;
4. Take a reference to your var etr = CKEDITOR.instance[''];
5. Resize your window according to total. etr.resize(, );

**Note : No need to mention 'px' neither for width nor height. '%' is must!

That's it!