Customizing ImageManager

[Christopher Blickley]

Hello,

I am working on incorporating RadEditor into a project.  In that project, all access to image files, documents, etc, passes through a GetFiles.aspx page, where that GetFiles.aspx page checks permissions before streaming the file to the browser.  Along with restricted permissions on the folders themselves, this ensures that nobody can browse directly to the files in question. 

This means that img tags in the page, must be something like this: <img src="getfiles.aspx?=imageurl.gif">.

This RadEditor is being integrated into a Wiki, so I may even want to output a custom Wiki markup tag insteadThis RadEditor is being integrated into a Wiki, so I may even want to output a custom Wiki markup tag instead

In RadEditor, I see two possible solutions.

1. Customize the link as it is pasted into the RadEditor after it is selected from the ImageEditor dialog.  Is there a way to do this? 
2. Make my own ImageEditor dialog.  I think I prefer this method since I may want to make some subtle changes to the dialog. If I go this route, is there a way to re-use some of the existing functionality, such as the image previewer and editor?  I know I can do the ExternalDialog thing and modify the .ascx files, but I'm not sure this gives me full control to completely retool things.  Is there a way to re-use some of the components in our own dialogs?  The FileManager is easy now since it it is it's own control, but I don't see anyway to reuse the other things like the ImagePreviewer and ImageEditor.

Thanks,
Chris

[Kevin]

Same questions here.  I need to override not just the image tag, but also quite a few other tags.  In general, when asset links are placed in the html (images, href links, flash, css, etc.) I need to override them to call an aspx script instead of the actual path and asset.

So I am reviewing the options: external dialogs, custom dialogs, my own version of the filebrowser, etc.

I am also thinking I'll need to create my own custom dialog as we want to throw in some stronger image gallery and keyword searching for images when browsing to insert.  But, in doing this we'll likely lose the nifty image editor stuff in Telerik.

Advice Telerik?

Thx

[Lini]

Hello guys,

The easiest way to change the image URL that comes out of the image manager is to override the client code that is called when the image manager is closed. To do that, you need to add a handler to the editor clientCommandExecuting event:

<script type="text/javascript">
function changeImageManager(editor,args)
{
        if (args.get_commandName() == "ImageManager")
        {
            var callbackFunction = function(sender, args)
            {
               //result holds the image element
                var result = args.get_value();
                editor.pasteHtml(Telerik.Web.UI.Editor.Utils.getOuterHtml(result), "ImageManager");
            };
            args.set_callbackFunction(callbackFunction);
        }
}
</script>
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="changeImageManager">
...

the "result" variable will hold the image element, returned from the dialog.

Kind regards,
Lini
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Mal]

Is there a way to do this from code?  For instance have the OnClientCommandExecuting event call to a vb.net code behind method?

I need to do some database updates whenever a file is inserted to a document for our CMS.  It uses a getfile.aspx type of senario to later on retrieve the information about the file such as the content version it belongs too etc..

This way I could then look at the on file delete event to ensure that the file doesn't belong to a version before the user can delete it.

[Lini]

Hi,

If you do not plan to change the URL of the inserted image and just want to mark it on the server, then you can do this simply by extending your image handler page (getfile.aspx). For example if the image URL is "getfile.aspx?filename=image1.jpg", you can use the client code below to make an AJAX request with the image url and append a special flag to tell the image handler that this image was just inserted in the editor - e.g. "getfile.aspx?filename=image1.jpg&inserted=true". The AJAX call will not affect the user and you will still insert the original image in the editor. The image handler will detect that you are using the inserted=true parameter and will mark the file as used.

Kind regards,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.