Ckeditor change width

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.

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"

        });