Using CKEditor in GridView Row EditItemTemplate in ASP.Net

Hi comunidadmexi...,

Check this example. Now please take its reference and correct your code.

HTML

<script src="Scripts/ckeditor/ckeditor.js"></script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
        <asp:TemplateField HeaderText="Text"
            ItemStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <asp:Label ID="lbsezi" runat="server"
                    Text='<%# HttpUtility.HtmlDecode(Eval("contents").ToString()) %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txsezi" runat="server" TextMode="MultiLine"
                    Text='<%# HttpUtility.HtmlDecode(Eval("contents").ToString()) %>'
                    CssClass="ckeditor" CausesValidation="true"></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:LinkButton Text="Update" runat="server" OnClick="OnUpdate" />
                <asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[]
    {
        new DataColumn("Id"),
        new DataColumn("Name"),
        new DataColumn("Country"),
        new DataColumn("contents")
    });
    dt.Rows.Add(1, "John Hammond", "United States", "<p><span style='text-align:'>Text row1</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSk...' />");
    dt.Rows.Add(2, "Mudassar Khan", "India", "<p><span style='text-align:'>Text row2</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSkZJRgA...' />");
    dt.Rows.Add(3, "Suzanne Mathews", "France", "<p><span style='text-align:'>Text row3</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSkZJRg...' />");
    dt.Rows.Add(4, "Robert Schidner", "Russia", "<p><span style='text-align:'>Text row4</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSkZJR...' />");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;
    this.BindGrid();
}

protected void OnUpdate(object sender, EventArgs e)
{
    GridViewRow row = (sender as LinkButton).NamingContainer as GridViewRow;       

    GridView1.EditIndex = -1;
    this.BindGrid();
}

protected void OnCancel(object sender, EventArgs e)
{
    GridView1.EditIndex = -1;
    this.BindGrid();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {
                        New DataColumn("Id"),
                        New DataColumn("Name"),
                        New DataColumn("Country"),
                        New DataColumn("contents")})
    dt.Rows.Add(1, "John Hammond", "United States", "<p><span style='text-align:'>Text row1</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSk...' />")
    dt.Rows.Add(2, "Mudassar Khan", "India", "<p><span style='text-align:'>Text row2</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSkZJRgABA...' />")
    dt.Rows.Add(3, "Suzanne Mathews", "France", "<p><span style='text-align:'>Text row3</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSkZJRg...' />")
    dt.Rows.Add(4, "Robert Schidner", "Russia", "<p><span style='text-align:'>Text row4</span></p><p>&nbsp;</p><p><img alt='1' src='data:image/png;base64,/9j/4AAQSkZ...' />")
    GridView1.DataSource = dt
    GridView1.DataBind()
End Sub

Protected Sub OnRowEditing(ByVal sender As Object, ByVal e As GridViewEditEventArgs)
    GridView1.EditIndex = e.NewEditIndex
    Me.BindGrid()
End Sub

Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast((TryCast(sender, LinkButton)).NamingContainer, GridViewRow)
    GridView1.EditIndex = -1
    Me.BindGrid()
End Sub

Protected Sub OnCancel(ByVal sender As Object, ByVal e As EventArgs)
    GridView1.EditIndex = -1
    Me.BindGrid()
End Sub

comunidadmexicanaroma says:

<asp:Label ID="lbsezi" runat="server"

   Text='<%# HttpUtility.HtmlDecode(SpliceText(Eval("contents").ToString(),150)) %>'></asp:Label>

If you want to display formatted html then remove the SpliceText function from the Label control.

Without this you will get the output as currently getting. 

Simply bind the HTML to label control.

Use below.

<asp:Label ID="lbsezi" runat="server"
   Text='<%# HttpUtility.HtmlDecode(Eval("contents").ToString()) %>'></asp:Label>