Inserting External Images

[Brian]

I'm trying to find a way to insert an external image in the rad editor. I would like to be able to say "insert image..." and then just give it a url to the image. Is this possible? I see a work around of inserting any image, and then editing the properties of it and changing the source location to the url of the image i want, but this is somewhat tedious.

-Brian

[Rumen]

Hi Brian,

The "Set Image Properties"  dialog does allow to change the URL of an existing image to an image from a remote server. You can easily test this in our online demos, e.g.
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/Default/DefaultCS.aspx

In case you wish to allow your users to insert external images, my suggestion would be to implement a custom tool that fullfills that purpose. Please refer to the following example how you can implement a custom tool
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/CustomTools/DefaultCS.aspx

In IE there is a special command that you can use to popup a special image dialog. In the following forum thread there is an implementation of this custom command:
http://www.telerik.com/community/forums/thread/b311D-bagath.aspx

In FireFox you can implement similar behavior using a prompt box, as outlined in the old Mozilla Midas demo available here:
http://www.mozilla.org/editor/midasdemo/

You can combine the IE and FF solutions in one generic cross-browser solution.


Regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark]

Does anyone have a code example of this? I can't seem to get it to work.

[Rumen]

Hi Mark,

Please, try the following code:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:radeditor runat="server" ID="RadEditor1"  
     OnClientCommandExecuting="OnClientCommandExecuting"
     Height="400px"> 
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="InsertImage" Text="InsertImage" />
            </telerik:EditorToolGroup>               
        </Tools>                     
    </telerik:radeditor>
<script type="text/javascript"> 
 function OnClientCommandExecuting(editor, args) 
 {               
    var commandName = args.get_commandName(); 
    if (commandName == "InsertImage") 
    { 
        editor.get_document().execCommand("InsertImage", true, false);                 
        //Cancel the further execution of the command to avoid error 
        args.set_cancel(true);               
    } 
 }        
</script>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center