Set Content inside AJAX HTMLEditor and EditorExtender using JavaScript

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Rate me:

5.00/5 (3 votes)

5 Mar 2014CPOL1 min read

24.7K

632

If you want to set text inside AJAX HTMLEditor or HTMLEditorExtender, then this is the right place. Enjoy the tip.

Download demo - 1.5 MB

HTML Table set inside Editor and EditorExtender

If you want to set text inside AJAX HTMLEditor or HTMLEditorExtender, then this is the right place. Enjoy the tip.

What?

I am going to talk about ASP.NET Ajax HTMLEditor and HTMLEditorExtender.

So, What is the Issue?

There are two types of Editors available.

HTMLEditor
HTMLEditorExtender

If you are going to set Text or HTML inside the Edit Panel of any of these Controls, then you can’t do this directly using document.getElementById("EditorID");. That is because the HTMLEditor or HTMLEditorExtender are rendered on Browser with the help of many divs.

Then What is the Logic?

We need to identify the div which is used to the actual content and set the Text or HTML inside it. The way of setting this inside Editor and Extender will be different.

For HTMLEditor, Let’s Identify the Edit Panel in Source HTML

Ajax HTMLEditor Browser Rendered View

For HTMLEditorExtender, Let’s Identify the Edit Panel in Source HTML

Ajax HTMLEditorExtender Browser Rendered View

So, we just need to assign Text or HTML inside these body or div.

How To Do This?

For HTMLEditor

There is a method present named as set_content(), by which we can easily do this task.

JavaScript

var htmlEditor = $find("<%= htmlEditorDemo.ClientID %>");
htmlEditor.set_content(tableToBeSetInsideEditPanel);

Here tableToBeSetInsideEditPanel is a string containing one table Markup.

For HTMLEditorExtender

Using innerHTML

First, find the EditorExtender using ID, then assign the required HTML to its

JavaScript

var htmlEditorExtender = $find("<%= htmlEditorExtenderDemo.ClientID %>");
htmlEditorExtender._editableDiv.innerHTML = tableToBeSetInsideEditPanel;

Using jQuery .html()

Get only the Edit Panel div by the Class Name .ajax__html_editor_extender_texteditor, then call .html() to set the required HTML inside that.

JavaScript
```
var htmlEditorExtender = $('.ajax__html_editor_extender_texteditor');
htmlEditorExtender.html(tableToBeSetInsideEditPanel);
```

Doubts/Queries/Modifications?

If you have any doubts, queries or modifications, feel free to comment. Please Like and Share the Blog, if you find it interesting.

CodeProject

This article was originally posted at http://taditdash.wordpress.com/2014/03/05/set-content-inside-ajax-htmleditor-and-editorextender-using-javascript

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Architect

India

Awards

DZone Most Valuable Blogger
Microsoft MVP 2014, 2015, 2016, 2017, 2018
Code Project MVP 2014, 2015, 2016
Star Achiever of the Month December 2013
Mindfire Techno Idea Contest 2013 Winner
Star of the Month July 2013

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> <html> <head runat="server"> <title></title> <script type="text/javascript" language="javascript"> function addTable() { var myTableDiv = document.getElementById("grdv_myDynamicTable_0"); var table = document.createElement('TABLE'); table.border = '1'; var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i = 0; i < 3; i++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var j = 0; j < 4; j++) { var td = document.createElement('TD'); td.width = '75'; td.appendChild(document.createTextNode("Cell " + i + "," + j)); tr.appendChild(td); } } myTableDiv.appendChild(table); return false; } </script> </head> <body> <form id="form1" runat="server"> <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </ajax:ToolkitScriptManager> <asp:Button Text="text" runat="server" ID="btn" OnClientClick="return addTable();" /> <%-- <div id="myDynamicTable"></div>--%> <asp:GridView runat="server" ID="grdv" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="Id" HeaderText="Id" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:TemplateField HeaderText="Insert div"> <ItemTemplate> <table id="table" runat="server"> <tr> <td> <%--<div contenteditable="true" id="myDynamicTable" runat="server"> I'm editable</div>--%> <asp:TextBox ID="txtAuditeeComments" TextMode="MultiLine" runat="server" Width="500px" Height="500px"></asp:TextBox> <ajax:HtmlEditorExtender ID="HTMLAuditeeComments" EnableSanitization="false" TargetControlID="txtAuditeeComments" runat="server"> <Toolbar> <ajax:Bold /> <ajax:Italic /> <ajax:Underline /> <ajax:StrikeThrough /> <ajax:JustifyLeft /> <ajax:JustifyCenter /> <ajax:JustifyRight /> <ajax:JustifyFull /> <ajax:InsertOrderedList /> <ajax:InsertUnorderedList /> <ajax:BackgroundColorSelector /> <ajax:ForeColorSelector /> <ajax:FontNameSelector /> <ajax:FontSizeSelector /> </Toolbar> </ajax:HtmlEditorExtender> </td> </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:Button ID="btn1" runat="server" Text="Submit" /> </form> </body> </html>

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.