[Solved] Use URL for image instead of "image manager"

[Dako -]

Hi,

First I want to give compliments about the amazing products telerik delivers. I'm using the Silverlight controls for a while and since I'm so satisfied I decided to use the radcontrols asp.net ajax as well.

At the moment I'm implementing the editor radcontrol in my website.

Everything is working fine, although I have one little question.
Is there a simple way to create some kind of text box in which I can put my image URL, instead of using the default image manager for inserting images? Something like the properties window, after right clicking an image.
If this is possible how am I able to do this, without to much trouble?

Looking forward for a reply.

With kind regards,

Dako

[Rumen]

Hi Dako -,

Here is an example which demonstrates how to override the SetImageProperties command and if the selection is not an image to insert a temporary image and open the Set Image Properties dialog:

<telerik:radeditor runat="server" ID="RadEditor1">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
    <Content>
        Sample content<img alt="" src="Images/NDK.jpg">Sample content
    </Content>
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="setImageProperties" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:radeditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList.SetImageProperties = function(commandName, editor, commandArgs)
    {
        var currentImage = editor.getSelectedElement();

        if (currentImage.nodeName.toLowerCase() != "img")
        {
            editor.pasteHtml("<img src=' ' id='tempId'>");
            var currentImage = editor.get_document().getElementById('tempId');
            currentImage.removeAttribute("id");
        }
        var argument = new Telerik.Web.UI.EditorCommandEventArgs("SetImageProperties", null, currentImage);
        Telerik.Web.UI.Editor.CommandList._getDialogArguments(argument, "IMG", editor, commandName);

        //backwards compatibility support
        argument.Element = currentImage;

        //NEW: Developer Callback Function support
        var callbackFunction = Telerik.Web.UI.Editor.CommandList.getCallbackFunction(commandArgs, function(sender, args)
        {
            if (currentImage && currentImage.parentNode)
            {
                //replace the old image with the new (cloned) one
                currentImage.parentNode.replaceChild(args.get_value ? args.get_value() : args.Result, currentImage);
            }
            else
            {
                //old mechanism - remove if not needed
                editor.pasteHtml(Telerik.Web.UI.Editor.Utils.getOuterHtml(args.get_value ? args.get_value() : args.Result), commandName);
            }
        });

        editor.showDialog("ImageProperties", argument, callbackFunction);
        return false;
    };
</script>

You can also see another approach on how to insert images by just specifying their urls in this KB article: Inserting images from a remote server. The insertImage dialog in the KB article allows to insert images from remote locations.

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dako -]

Great, this is perfect.
Thank you very much.

With kind regards,

Dako