I have a CKeditor which is placed in a parent div. What is the best way to have the CKEditor exactly fit the div and resize when the div resizes? If possible I would prefer solutions which don't involve jQuery. If this is not possible solutions using jQuery would be fine to.

I have a CKeditor which is placed in a parent div. What is the best way to have the CKEditor exactly fit the div and resize when the div resizes? If possible I would prefer solutions which don't involve jQuery. If this is not possible solutions using jQuery would be fine to.

• javascript
• jquery
• ckeditor

Share Improve this question Follow edited Mar 23, 2021 at 0:28 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Jan 4, 2013 at 10:28 user1257239user1257239

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

var editor = CKEDITOR.replace( 'editor' );

...

And then, in event of your choice, do this:

editor.resize($("#elem").width(),$("#elem").height());

Hope this helped.

Use the width attribute when you call ckeditor.

<script type="text/javascript">
//<![CDATA[

CKEDITOR.replace( 'page_content',
{
    toolbar : 'MyToolbar',
    width : '100%'


});

//]]>
</script>

Since the call to initialize the editor is done with jquery, this is the best way.

edit: This will cause ckeditor to auto-resize when the div width changes as well.

If someone needs this now, I added this to my css file:

#cke_id_text {
  width: fit-content!important;
}