Articles → ASP .NET AJAX → Adding Image In Custom Editor In C#

Adding Image In Custom Editor In C#

We have already learnt how to customize AJAX HTML editor using C#. This tutorial is just an extension of that. Here we go one step further and learn how to add an image in custom editor.

Objective Of This Tutorial

The objective of this tutorial is to learn how to add an image in a customized Ajax HTML editor in C#.

Prerequisites

Software

Download AjaxControlToolKit.dll (version 3.5 and above).
Copy the downloaded DLL in the bin folder of the project.
Copy AjaxMin.dll to bin folder as well
Visual studio 2008(or above)

Technical knowledge

In order to understand this tutorial you must have the sound knowledge about the following concepts

How to create a web based project in visual studio?
What is a class?
How to inherit a class?
How to override a method?
What are asp.net AJAX controls?
How to register a control in and aspx page?
How to add a web form in web based application in visual studio?
Understanding of JQuery and JavaScript.
How to customize Ajax HTML editor?

Customization Of The Editor

In this tutorial we will add a custom button on click of which an image will be added in the editor.

Solution

Before proceeding with the solution, let’s take a look at the code that was written to customize the Ajax HTML editor in C#.

using AjaxControlToolkit.HTMLEditor;
using AjaxControlToolkit.HTMLEditor.ToolbarButton;

namespace MyControls {
	/// <summary>
	/// Summary description for CustomEditor
	/// </summary>
	public class CustomEditor: Editor {
		protected override void FillTopToolbar() {
			TopToolbar.Buttons.Add(new Bold());
			TopToolbar.Buttons.Add(new Italic());
			TopToolbar.Buttons.Add(new Underline());
		}
		protected override void FillBottomToolbar() {
			BottomToolbar.Buttons.Add(new DesignMode());
			BottomToolbar.Buttons.Add(new HtmlMode());
		}
	}
}

In this tutorial, we will add few more lines of code in the existing code. To achieve our goal, we will add a custom button in the top toolbar. Therefore, we don't make any modifications in the FillBottomToolbar() function.

In order to create a new button, we will create an instance of the "MethodButton" class available in AjaxControlToolkit.HTMLEditor.ToolbarButton namespace. This can be done as follows:

MethodButton btn = new MethodButton();

In the next step, we will provide the path to the button image and we also provide it an "ID" as shown below:

btn.NormalSrc = "image_url";
btn.ID = "btnUploadImg";

Now, add the "onclick" event to the button.

btn.Attributes.Add("onclick", "show();");

The function show() is a JavaScript function that is called from the editor control and will be defined in the .aspx file.

Finally, can add it to the top tool bar with the rest of the buttons

TopToolbar.Buttons.Add(btn);

So, now our final code looks like this:

using AjaxControlToolkit.HTMLEditor;
using AjaxControlToolkit.HTMLEditor.ToolbarButton;

namespace MyControls {
	/// <summary>
	/// Summary description for CustomEditor
	/// </summary>
	public class CustomEditor: Editor {
		protected override void FillTopToolbar() {
			TopToolbar.Buttons.Add(new Bold());
			TopToolbar.Buttons.Add(new Italic());
			TopToolbar.Buttons.Add(new Underline());

			MethodButton btn = new MethodButton();
			btn.NormalSrc = "image_url";
			btn.ID = "btnUplaodImg";
			btn.Attributes.Add("onclick", "show();");

			TopToolbar.Buttons.Add(btn);

		}
		protected override void FillBottomToolbar() {
			BottomToolbar.Buttons.Add(new DesignMode());
			BottomToolbar.Buttons.Add(new HtmlMode());
		}
	}
}

We can now shift our focus to .aspx page. As mentioned before, we will define the show() function in the .aspx page . In this method, we will write a code to add image in the editor.

First, we will assign the "id" of the HTML Editor to the variable "controlid".

var controlid = '<%=editor.ClientID%>';

Now controlid can be used to access the edit panel and we can add the required image in the following manner.

var control = $find(controlid)._editPanel._modePanels[0];
control.insertHTML("<img src='image_url' alt='Facebook image' />");

So, the show() function would be

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><script language="javascript" type="text/javascript">
 function show() {
     var controlid = '<%=editor.ClientID%>';
     var control = $find(controlid)._editPanel._modePanels[0];
     control.insertHTML("<img src='image_url' alt='Facebook image' />");
 }         
</script>

Here’s a look at final code in.aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Customize.aspx.cs" Inherits="Customize" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %><%@ Register Namespace="MyControls" TagPrefix="HTMLEditor" %>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html
		xmlns="http://www.w3.org/1999/xhtml">
		<head runat="server">
			<title></title>
		</head>
		<body>
			<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
			<script language="javascript" type="text/javascript">
         function show() {
             var controlid = '<%=editor.ClientID%>';
             var control = $find(controlid)._editPanel._modePanels[0];
             control.insertHTML("
				<img src='image_url' alt='Facebook image' />");
         }            
      
			</script>
			<form id="form1" runat="server">
				<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajax:ToolkitScriptManager>
				<HTMLEditor:CustomEditor ID="editor" runat="server" />
			</form>
		</body></html>

Now run the application. You will get the following output.

Picture showing the output of adding images on custom HTML editor

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Tuesday, January 28, 2014

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**