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

Adding Image In Custom Editor In C#






Objective Of This Tutorial





Prerequisites


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


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

Customization Of The Editor





Solution




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());
		}
	}
}






MethodButton btn = new MethodButton();




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




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






TopToolbar.Buttons.Add(btn);




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());
		}
	}
}






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




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




<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>




<%@ 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>




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/FeedbackCharacters remaining 250