Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Inserting images from a remote server

Inserting images from a remote server

Article Info

Rating: Not rated

Article information

Article relates to

 Telerik.Web.UI (v.2008.1.415+)

Created by

 Rumen Zhekov, Telerik

NOTE: Starting from version Q1 2010 (version 2010.1.309) RadEditor offers a new Insert Image dialog which is a light version of the Set Image Properties dialog and allows to insert images from the same or external domains. When enabled, its content is rendered on page load and as a result the content is immediately loaded when the diaolg is shown without any delay. You can test the new dialog in this live demo: Dialogs.

HOW-TO
Insert images from a remote server

DESCRIPTION
All RadEditor file browsers work with files located on the same web application in which the editor resides and that is why it is not possible to specify and insert an image from a remote location. This was done for a number of reasons, among which: unified code and behavior for all file managers, intuitive use, etc. Ability to specify an external location was more of a hack rather than a well-defined feature in the ImageManager.

SOLUTION
In case you wish to allow your users to insert external images, our suggestion is to implement a custom tool that fullfills that purpose. In IE and Firefox there is a special command that you can use to popup a special image dialog. It provides the ability to specify a remote URL and insert an image.

The following code demonstrates how to implement the InsertImage custom tool:

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
<script type="text/javascript">    
     function OnClientCommandExecuting(editor, args)    
     {                  
        var commandName = args.get_commandName();    
        if (commandName == "InsertImage")    
        {    
            editor.setFocus();  
                                                     
            //FireFox - will work only if there is selection of text, otherwise built-in browser command does not work  
            if (!document.all)  
            {                     
                var href = prompt("Enter a URL:", "http://");                         
                if (href) editor.get_document().execCommand("insertImage", false, href);    
            }      
            else editor.get_document().execCommand("InsertImage", true, false);                    
              
            //Cancel the further execution of the command to avoid error    
            args.set_cancel(true);                  
        }    
     }           
</script>   
<telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" Height="400px">    
    <Tools>   
        <telerik:EditorToolGroup>   
            <telerik:EditorTool Name="InsertImage" Text="InsertImage" />   
        </telerik:EditorToolGroup>                  
    </Tools>                        
</telerik:radeditor>  

Files

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.