Change Background Color of Ajax HtmlEditorExtender using ColorPickerExtender

[Demo] Change Background Color of HtmlEditorExtender

[Demo] Change Background Color of HtmlEditorExtender


In this Blog, we will learn to change the Background Color of Ajax HtmlEditorExtender using ColorPickerExtender.

Background

There was an question, which eventually gave birth to this Blog.

Here comes the Logic

We have already discussed the Logic in one of the previous Blog Set Content inside AJAX HTMLEditor and EditorExtender using JavaScript. We just need to find out the Edit Panel, that is the div, which is actually showing data for HtmlEditorExtender. Then we can easily assign Selected Color of ColorPickerExtender to that div.

<div contenteditable="true"
     id="txtEditorDemo$HtmlEditorExtenderBehavior_ExtenderContentEditable"
     style="height: 80%; overflow: auto; clear: both;"
     class="ajax__html_editor_extender_texteditor">
</div>

Okay ! Let’s get our feet wet

Get the ColorPickerExtender Selected Color

We can easily get the Selected color by handling the OnClientColorSelectionChanged Event of ColorPickerExtender. We can call a JavaScript function on this Event. Let’s see the markup.

<asp:ColorPickerExtender runat="server" 
                         TargetControlID="txtSelectColor"
                         SampleControlID="sampleBodyColor"
                         PopupButtonID="txtSelectColor" 
                         OnClientColorSelectionChanged="colorChanged">
</asp:ColorPickerExtender>

So, the JavaScript function is colorChanged(). Following code would alert you the Selected Color.

function colorChanged(sender) {
    alert(sender.get_selectedColor());
}
Selected Color on Alert Box

Selected Color on Alert Box

Now, let’s get the HtmlEditorExtender and change its Background Color

There are two ways to do this.

  • Using Sys.Application $find Method

    First find the HTMLEditorExtenderusing ID, then assign the Selected Color to the Background Color Property of its EditableDiv.

    var htmlEditorExtender = $find("<%= heeEditorDemo.ClientID %>");
    htmlEditorExtender._editableDiv
                      .style
                      .backgroundColor = '#' + sender.get_selectedColor();
    
  • Using jQuery Class Selector

    Get the HTMLEditorExtender by its class name ajax__html_editor_extender_texteditor. Then set its Background Color by .css() Method.

    var htmlEditorExtender = $('.ajax__html_editor_extender_texteditor');
    htmlEditorExtender.css('background-color', '#' + sender.get_selectedColor());
    

NOTE

Here we have appended ‘#’ before the Selected Color. That is because Selected Color is only a Hex Number without the prefix ‘#’, as we can see on the screenshot above, where we have alerted the Selected Color.

Thanks !!!

For taking time and reading the Blog. If you find it useful, then share within your circle, by pressing the Social Icons.

Set Content inside AJAX HTMLEditor and EditorExtender using JavaScript

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.