Articles → ASP .NET AJAX → Adding image in custom editor in C#

Adding image in custom editor in C#






Objective of this tutorial





Prerequisites



































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