Bashabi Bashabi - 3 months ago 11
ASP.NET (C#) Question

ckeditor value is not recognized by asp.net and vb.net

I had integrated ckeditor in my asp.net and vb.net web application. Previously this web appilication was using bootstrap-wysihtml5. But now the clients require to use ckeditor.

To integrate ckeditor i have done the following:

I am using ckeditor_4.4.1 . I have copied the ckeditor folder in root directory. and linked it in the master page like the following.

<%@ Master Language="VB" CodeFile="E4.master.vb" Inherits="_resx_E4" %>
<!doctype html>
<html lang="en">
<head runat="server">
<title></title>
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
</head>


I have not changed the header of the content page. it is like the following

<%@ Page Page Title="" Language="VB" MasterPageFile="~/_resx/E4.master" AutoEventWireup="false" CodeFile="new.aspx.vb" Inherits="E4_Jobs_new" ValidateRequest="false" %>
<%@ Page <%@ Register Src="~/_controls/ucApplicationQuestions.ascx" TagPrefix="Application"
TagName="Questions" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">


and finally the text area code in the content page

<div><label>Description (required)</label>
<div>
<textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;" ></textarea>
</div></div>


The ckeditor toolbar is showing on the textarea. But website cannot recognize the value that is written in the ckeditor field nor does it save those value in the database. Even when I submit the form after writing on the text area it is not allowing me to submit form, as the description field have to have some text. But I actually have written in the textarea or copy paste from word file. But still it just does not get any value.

Please help me with code

Answer

I found the answer. And I think I have to share it ; in case someone else faces the same problem.

Here are the steps I followed.

  1. Downloaded the ckeditor from the link http://ckeditor.com/download

  2. Copied the whole folder under project folder.

  3. In the master page added the following lines to add reference of ckeditor

        <script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
        <script src="/ckeditor/adapters/jquery.js" type="text/javascript"></script>
        <script src="/ckeditor/ckeditor_custom.js" type="text/javascript"></script>
    
  4. Changed the class for the specific textarea

            <textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;"   ></textarea>
    
  5. Added following javascript function at the bottom of the content page

        $('#' + '<%= btnSave.ClientID%>').mousedown(function () {
     for (var i in CKEDITOR.instances) {
         CKEDITOR.instances[i].updateElement();
     }
    });
    

thats it.

here the btn.save is the button which submits the data

Thanks