Implement Custom Dialog and Insert Image Built-in Dialog

This example demonstrates two of the new features of RadImageEditor - InsertImage built-in functionality and the support for custom dialogs.

You can easily insert another image to the currently edited one using RadImageEditor's built-in InsertImage dialog. It offers the possibility to insert an image from a provided live URL (it should be accessible from the application) with specified size and position. The inserted image will be placed on top of the current image, and if it has transparent parts, the original image will be displayed through them. This approach is used for the custom dialog to add a frame to the image.

Implement Custom Dialog

In this example you can find how to implement a custom dialog to the ImageEditor. The custom image editor's dialog is a standard WebUserControl that has to be loaded in the tools panel.

To implement a custom dialog please use the following approach:

1. Add a custom button to the RadImageEditor's toolbar and in its command implementation call executeCommand() method:
   
   Telerik.Web.UI.ImageEditor.CommandList["CustomInsertImage"] = function(imgEditor, commandName, args)

   {

       imgEditor.executeCommand("CustomInsertImage");

   };
2. Handle the RadImageEditor's DialogLoading server-side event and load the user control to the tools panel:
   
   protectedvoidRadImageEditor1_DialogLoading(objectsender, ImageEditorDialogEventArgs args)

   {

       if(args.DialogName == "CustomInsertImage")

       {

           args.Panel.Controls.RemoveAt(1);//remove the predefined div

           args.Panel.Controls.Add(LoadControl("~/ImageEditor/Examples/CustomDialogInsertImage/CustomInsertImageDialog.ascx"));

       }

   }
3. The user control should register a client-side class with the same name as the custom command. This client-side class should implement Telerik.Web.UI.RadImageEditor.IToolWidget interface with the following structure:
   
   Telerik.Web.UI.IToolWidget = function(){}

   Telerik.Web.UI.IToolWidget.prototype =

   {

       updateUI: function(){},     //updates the controllers (such us sliders, textboxes and etc.) on the ToolWidget

       get_name: function(){},     //the name of the tool widget used for identification

       onOpen: function(){},           //the event handler for the close event of the tool panel

       onClose: function(){}           //the event handler for the close event of the tool panel

   };

   Telerik.Web.UI.IToolWidget.registerInterface("Telerik.Web.UI.ImageEditor.IToolWidget");

In the example we are also inheriting a base class Telerik.Web.UI.ToolWidget which provides common methods like get_imageEditor() that returns a reference to the current ImageEditor's client-side object.