Insert external image

6 posts, 0 answers
  1. Rob
    Rob avatar
    34 posts
    Member since:
    Nov 2007

    Posted 29 Aug 2008 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 29 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    34 posts
    Member since:
    Nov 2007

    Posted 29 Aug 2008 Link to this post

    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
  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 29 Aug 2008 Link to this post

    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.
  6. Mojo
    Mojo avatar
    10 posts
    Member since:
    Oct 2006

    Posted 05 Jan 2009 Link to this post

    This only works in Internet Explorer?

    Thx
    Mojo
  7. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 05 Jan 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017