CODEWITHSUNDEEP
javascriptckeditor
slum
slum

Reputation: 81

CKEditor & JavaScript - Adjust height and width in CKEditor

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>

Upvotes: 8

Views: 19404

Answers (3)

Suhas Manjunath
Suhas Manjunath

Reputation: 21

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!

Upvotes: 0

Khandad Niazi
Khandad Niazi

Reputation: 2396

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

Upvotes: 1

Fred
Fred

Reputation: 1234

Add the height and width setting in the parameters:

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

Upvotes: 24

Related Questions