This is a migrated thread and some comments may be shown as answers.

Insert external image

5 Answers 199 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 2
Rob asked on 29 Aug 2008, 02:12 PM
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

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 29 Aug 2008, 02:34 PM
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.
0
Rob
Top achievements
Rank 2
answered on 29 Aug 2008, 04:04 PM
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
0
Rumen
Telerik team
answered on 29 Aug 2008, 04:14 PM
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.
0
Mojo
Top achievements
Rank 1
answered on 05 Jan 2009, 06:26 AM
This only works in Internet Explorer?

Thx
Mojo
0
Tervel
Telerik team
answered on 05 Jan 2009, 02:34 PM
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.
Tags
Editor
Asked by
Rob
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Rob
Top achievements
Rank 2
Mojo
Top achievements
Rank 1
Tervel
Telerik team
Share this question
or