Ckeditor change width

Question

I want to change the width and height of the Ckeditor but am not able to change it. Please know that I want to change it when call CKeditor , I dont want to hard code it inside the config.js...

The bottom code is not working, what do you suggest ?

var editor = CKEDITOR.replace('editorToday',
          {


            toolbar :
                [
                    { name: 'document', items : [ 'Preview' ] },
                    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
                    { name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'] },
                            '/',
                    { name: 'styles', items : [ 'Styles','Format' ] },
                    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
                    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                    { name: 'tools', items : [ 'Maximize','-','About' ] }

                ]

            });


CKEDITOR.instances.editor.resize(500, 400);

Answer 1

Try this:

 var editor = CKEDITOR.replace('editorToday',
      {


        toolbar :
            [
                { name: 'document', items : [ 'Preview' ] },
                { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
                { name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'] },
                        '/',
                { name: 'styles', items : [ 'Styles','Format' ] },
                { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
                { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                { name: 'tools', items : [ 'Maximize','-','About' ] }

            ],
        width: "400px",
        height: "500px"

        });

Answer 2

The following was taken from How to change or set width of Ckediotr TextBox area using ASP .Net.

Step1

Create a new ASP.NET webite and name it as Demo_application.

Step 2

Download Ckeditor from here and add Ckeditor to the root Folder of your Application.

Step 3

Call the Ckeditor Scripts in your .aspx page like below

<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>

Step 4

Add Ckeditor TextBox to your .aspx file with id txtCkEditor

<asp:TextBox ID="txtCkEditor" runat="server" TextMode="MultiLine"></asp:TextBox>

Step 5.

Call the Below JavaScript function to change the default width of Ckeditor TextBox area.

<script type="text/javascript">
    $(function () {  
      CKEDITOR.replace('<%=txtCkEditor.ClientID %>');
      CKEDITOR.config.width = 200;
    });
</script>

Step 6

Test Your Application.