Click here to Skip to main content
Click here to Skip to main content

Set Content inside AJAX HTMLEditor and EditorExtender using JavaScript

, 5 Mar 2014
Rate this:
Please Sign up or sign in to vote.
If you want to set text inside AJAX HTMLEditor or HTMLEditorExtender, then this is the right place. Enjoy the Tip.
HTML Table set inside Editor and EditorExtender

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.

  1. HTMLEditor
  2. 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

Ajax HTMLEditor Browser Rendered View

For HTMLEditorExtender, let’s identify the Edit Panel in source HTML

Ajax HTMLEditorExtender Browser Rendered View

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.

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

    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.

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

Doubts/Queries/Modifications?

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


License

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

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Proud Indian | Microsoft MVP | CodeProject MVP | Author | Blogger | Community Expert | Moderator | jsfiddler | Cricketer | Cook | Dancer
 
Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. Microsoft MVP 2014
  2. Code Project MVP 2014
  3. Star Achiever of the Month December 2013
  4. Mindfire Techno Idea Contest 2013 Winner
  5. Star of the Month July 2013
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionHTML Code Pinmemberravi kumar Mishra26-May-14 1:57 
AnswerRe: HTML Code PinprotectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)20-Jul-14 18:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140826.1 | Last Updated 6 Mar 2014
Article Copyright 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid