Insert external image

[Rob]

Does a tool exist in the rad editor to insert an image (asking for an external URL) without the overhead of the image manager?

I have had a quick search in the forums and can't find any suggestions.

We are replacing two editors we use which can add in images with extenal URLs (e.g. flickr).
We don't allow image uploads to our site and many other editors add images in this way.

Kind regards,

Rob

[Rumen]

Hello Rob,

I think that you can use the InsertImage built-in browser dialog to insert images from external sites. You can fire the dialog from a custom button. Here is the 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>


You can see also the following articles on the subject:
Rich-Text Editing in Mozilla -> InsertImage
Controlling the Link Manager

Best regards,
Rumen
the Telerik team

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

[Rob]

Thanks for your suggestion.

This looks like it needs a little bit of work - it inserts images wherever you have focus, even outside of the editor window :).
It seems to be IE only, too.

I'll give it some more time, shame it doesn't exist in the editor as this would be useful (even the editor use don this post doesn't allow images to be referenced from external sources)

Kind regards,

Rob

[Rumen]

Hi Rob,

To fix the focus problem, fire the editor.setFocus(); method before the editor.get_document().execCommand("InsertImage", true, false); execution, e.g.

<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.setFocus();
        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

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

[Mojo]

This only works in Internet Explorer?

Thx
Mojo

[Tervel]

Hi Mojo,

You are correct - the InsertImage command is supported in both browsers, but it behaves a bit different.
In IE there is an option to have the browser display its own built-in InsertImage popup.
In FireFox there is no such dialog provided by the browser, and you will need to implement it yourself.
The base FireFox implementation of a rich-text editor available here demonstrates this.
E.g. if the browser is not IE, you should write code such as:

var imagePath = prompt('Enter Image URL:', 'http://');
if ((imagePath != null) && (imagePath != "")) {
      editor.get_document().execCommand('InsertImage', false, imagePath);

Sincerely yours,
Tervel
the Telerik team

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