How to set or change Height of Ckeditor TextBox area using ASP.Net

 

Introduction

In this article i will tell you how to set height of the Ckeditor textbox area. 

Ckeditor comes with default height and it is not possible to change it's height from properties window. Here i will come with the solution how to adjust the editor or window size of the Ckeditor.

History

In the Previous articles i explained how to upload image to the server or application using Ckeditor , how to change or set width of ckeditor textbox area using asp.net and many more about Ckeditor.

Solution

Step1.

Create a new ASP.NET website 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 height of Ckeditor TextBox area.

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

Step 6.

Test Your Application.

Give your Valuable Comments.
comments powered by Disqus
 
Follow me on twitter
About Me
Harpreet Singh
I began programming with C++ when i was 17. Then at the middle of my study .NET came. Then I began to read C# and VB.NET. By the time i learnt SQL and ASP.NET, and developed some websites such as news portals that are active now. Currently i am running my own Software company.
More Articles