inserting/managing images

[Albert Shenker]

I am tasked with developing some funcitonality that will allow users to create snippets of web content. The snippets will contain standard html formatting elements and images. It seems that Rad Editor can accomplish a great deal of what I'm trying to do. I do have some questions about inserting images in the content, though.

1) The images are going to be stored in a central directory on the server, but not necessarily in the application folder structure. I assume its possible to set the loacation of the images folder anywhere on the server by using a virtual directory in the application, and this will allow the images dialog to function. Is there any way to specify the location of the image directory on a networked server, as opposed to the same server as the web application?

2) Because the applicaiton will contain a virtual directory, the specified url for an image will work, even if the image is in a directory which isn't in the application folder structure. However, in some cases we don't want the image urls to reference the web application and its domain. We have created a separate domain which points to the images folder... something like http://imagesrv.com/images/someimage.jpg. When an image is inserted in the editor using the images dialog, is there a way to specify that the  url should be an absolute url based on this pattern http://imagesrv.com/images/ + imageFileName as opposed to the default url which is used by the editor? As a side note, can the same be done when inserting links to files as opposed to images?

[Rumen]

Hello Albert,

Straight to the points:
1) The following KB articles could be helpful for this scenario:

Using RadFileExplorer with physical and shared folder's
and
Uploading images and files to a Shared Drive.

2) You can use the OnClientPasteHtml event of RadEditor and modify the URLs of the inserted images and links from the Image and Link Managers.

Best regards,
Rumen
the Telerik team

[Albert Shenker]

Thanks for the info. That worked great. One issue, though. By handling the OnClientPasteHtml event, I can re-write the img source when an image is inserted directly into the rad editor using the ImageManager. However, this doesn't seem to work when the user right clicks on the image and clicks to view the image properties dialog. This dialog contains a "Src" field where the user can type in the source or click on an icon to open the ImageManager. Ideally, I would like the src textbox to be disabled so the user could not just type in it. However, this is a secondary concern. The main concern is if they click on the imagemanager to select the image the src doesn't get re-written when the dialog is closed since, assumedly, the OnClientPasteHtml event doesn't fire when the IMage Properties dialog is closed. Can you tell me what event I can handle to rewrite the img Src when the Image Properties dialog is closed, or is there a way to rewrite the src when the iMageManger is closed from the Image Properties dialog and, ideally, make sure the image src field is not editable by the user?

[Albert Shenker]

Just as an addendum to my last post, it appears the right click menu option "Image Map Editor" also has a field where the user can specify or chose (using the Image Manager) the image src. As with the Image Properties dialog, I need to rewrite the src pror to these changes getting saved back to the editor.

[Rumen]

Hello Albert Shenker,

Yes, the OnClientPasteHtml element does not work with the Background Image Src control. I found two examples in my support tickets which demonstrates how to overwrite the callback functions of the ImageMap and Set Image Properties dialogs which could be helpful for your scenario. You should register the external dialogs files too in order to test the code below:

 \EditorDialogs\ImageMap.ascx file.

    Telerik.Web.UI.ImageDialogCaller.prototype.callImageDialog = function()
    {
        var callbackFunction = Function.createDelegate(this, function(sender, args)
        {
            //var img = args.get_value();
            var src = "";
            //if (img && img.getAttribute) src = img.getAttribute("src", 2);
            src = args.Result.getAttribute("src",2);
            if (src)
            {
                this._inputElement.value = src;
                this.raiseEvent("valueSelected");
            }
        });

        var editor = this._editor;
        var oldAdditionalQueryString = editor.get_dialogOpener().get_additionalQueryString();
        var selectedValue = this._inputElement.value;
        var selectedElement = null;
        if (selectedValue)
        {
            //random number is added to make the url unique and force the reload of the dialog.
            //this way we can ensure that the file will be selected when the dialog loads.
            var itemUrl = selectedValue;
            editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString + "&rndnum="+ (new Date()-100) + "&PreselectedItemUrl=" + encodeURIComponent(itemUrl));
            selectedElement = editor.get_document().createElement("img");
            selectedElement.setAttribute("src", itemUrl);
        }
        else
        {
            selectedElement = null;
        }

        var args = new Telerik.Web.UI.EditorCommandEventArgs("ImageManager", null, selectedElement);
        Telerik.Web.UI.Editor.CommandList._getDialogArguments(args, "IMG", editor, "ImageManager");
        editor.showDialog("ImageManager", args, callbackFunction);

        editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString);
    };

2) \EditorDialogs\SetImageProperties.ascx

Telerik.Web.UI.ImageDialogCaller.prototype.callImageDialog = function()
    {
        var callbackFunction = Function.createDelegate(this, function(sender, args)
        {
            //var img = args.get_value();
            var src = "";
            //if (img && img.getAttribute) src = img.getAttribute("src", 2);
            src = args.text;
            if (src)
            {
                this._inputElement.value = src;
                this.raiseEvent("valueSelected");
            }
        });

        var editor = this._editor;
        var oldAdditionalQueryString = editor.get_dialogOpener().get_additionalQueryString();
        var selectedValue = this._inputElement.value;
        var selectedElement = null;
        if (selectedValue)
        {
            //random number is added to make the url unique and force the reload of the dialog.
            //this way we can ensure that the file will be selected when the dialog loads.
            var itemUrl = selectedValue;
            editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString + "&rndnum="+ (new Date()-100) + "&PreselectedItemUrl=" + encodeURIComponent(itemUrl));
            selectedElement = editor.get_document().createElement("img");
            selectedElement.setAttribute("src", itemUrl);
        }
        else
        {
            selectedElement = null;
        }

        var args = new Telerik.Web.UI.EditorCommandEventArgs("ImageManager", null, selectedElement);
        Telerik.Web.UI.Editor.CommandList._getDialogArguments(args, "IMG", editor, "ImageManager");
        editor.showDialog("ImageManager", args, callbackFunction);

        editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString);
    };

   




Best regards,
Rumen
the Telerik team

[Albert Shenker]

I'm not quite following how to rerwrite the img src using the code you provided. In the OnClientPasteHTML event handler, I have the following code which rewrites the url:

 

var src = img.src;

 

var publicPath = '<%= Me.ParentPage.MyPublicStoragePath %>';
var fileServ = '<%= Me.ParentPage.MyFileServerUrl %>';

  var newSrc = fileServ + src.right(src.length - src.indexOf(publicPath) - publicPath.length);

The publicPath variable is the virtual path to the images root folder. The fielServ variable specifies the new absolute url to the images folder. So, the new image src is the new absolute url concatenated with the portion of the original source which is after the virtual root images folder. So you see, my page has code behind variables which specify both the virtual path to the root and the new absolute path to the root. 

1) How would I go about passing these values to the dialogs?

2) I'm not quite following how to rewrite the urls in the code provided. 

[Rumen]

Hi Albert,

Here is an example how to proceed:

The code below, which you should put under RadEditor's declaration, shows how to pass parameters to the dialogs from the main page (look the last row of the method):

Copy Code

Copy Code

Copy Code

Copy Code

Copy Code

Telerik.Web.UI.Editor.CommandList._getDialogArguments = function (argument, tagName, editor, commandName)
{
    if (!editor)
    {
        //return empty collections
        argument.Colors = [];
        argument.CssClasses = [];
        argument.CellCssClasses = [];
        argument.tableLayoutCssFile = "";
        argument.editor = null;
        return;
    }
    //Add colors
    argument.Colors = editor.get_colors();

    //Add css
    if ("TD" == tagName || "TH" == tagName || "TABLE" == tagName)
    {
        argument.CssClasses = editor.getCssArray("TABLE");
        argument.CellCssClasses = editor.getCssArray("TD");
        argument.tableLayoutCssFile = editor.get_tableLayoutCssFile(); //new adding support for the new CSS Class Layout tool in Table properties
    }
    else if ("A" == tagName || "BODY" == tagName || "IMG" == tagName)
    {
        argument.CssClasses = editor.getCssArray(tagName);
    }

    argument.editor = editor;

    //CUSTOM CODE HERE !!!
    //here you add the cutom parameter to the argument
    argument.serverPublicPath = "http://test.path";
}

After that you can obtain the paramether by modify the EditorDialogs/SetImageProperties.ascx:
1. Add global variable in the beginning of the file: ServerPublicPath = "";
2. Modify the clientInit method and obtain the custom parameter from the main page:

Copy Code

Copy Code

Copy Code

clientInit: function (clientParameters)
{
    ServerPublicPath = clientParameters.serverPublicPath;
        ...
}

3. Overwrite the $T.ImageDialogCaller.prototype._dialogCallbackFunction method so that you can update the returned by the Image Dialog Caller control src path (the path returned by the Image Manager to the Set Image Properties dialog):

Copy Code

Copy Code

Copy Code

var $ = $telerik.$;

var $T = Telerik.Web.UI;

$T.ImageDialogCaller.prototype._dialogCallbackFunction = function (sender, args)

{

  //here you use the public variable

    alert(ServerPublicPath);

    var img = args && args.get_value ? args.get_value() : null;

    var src = "";

    if (img && img.getAttribute) src = img.getAttribute("src", 2);

    if (src)

    {

        this._inputElement.value = src; //here modify the src path


        this.raiseEvent("valueSelected");

    }

}

Best regards,
Rumen
the Telerik team