EditorFor Image Browser is encoding image url

[Justin]

Hi, i'm using the MVC wrapper for the EditorFor and when i try to select an image that is in nested folders the path i'm getting back has the "/" encoded as %2F.

so if i selected an image that was in a folder 1 or more levels down,

If my root is http://test.test.com/images

and i selected

http://test.test.com/images/Accounts/image.png

I would get

http://test.test.com/images/Accounts%2Fimage.png

I can find all sorts of examples for the Kendo UI version of the editor, where you have to specify a function that will return the url in order for it not to be encoded but nothing for the MVC wrapper.

 

Html.Kendo()
.EditorFor(x => x.Page)
.Messages(m => m.InsertHtml("Insert Snippet"))
.Tools(t => t
    .ViewHtml()
    .Snippets(s => {
        foreach (var control in controls)
        {
            s.Add(control.FieldLabel, GetControlSnippet(control));
        }
    })
    .CustomButton(x => x.Name("maximize").Exec("maximize"))
).ImageBrowser(imageBrowser => imageBrowser
    .Image("http://test.test.com/images/{0}")
    .Read("Read", "ImageBrowser")
    .Destroy("Destroy", "ImageBrowser")
    .Upload("Upload", "ImageBrowser")
    .Thumbnail("Thumbnail", "ImageBrowser")
)
.Encode(false)

 

Can you please help? i've been banging my head against my desk trying to find a solution for what seems to be a simple problem.

 

 

 

[Nikolay]

Hi,

I have researched it and did not find a solution. The option for specifying a function for modifying the url is missing in MVC wrappers. So far I can suggest you to modify the image src at some later stage. The script below will change the image src before it is inserted into the editor.

<script>
    var insertImage = kendo.ui.editor.ImageCommand.fn.insertImage;
    kendo.ui.editor.ImageCommand.fn.insertImage = function (img, range) {
        this.attributes.src = this.attributes.src.replace(/%2F/g, "/");
        insertImage.call(this, img, range);
    }
</script>

I have also logged it for fixing. Here you can track and comment it (https://github.com/telerik/kendo-ui-core/issues/2920).

Regards,
Nikolay
Telerik by Progress

[Justin]

Thanks!

If i wanted to run that replace script when the Image is selected in the Image Browser is there an event i could use for that?

I would like to avoid any confusion when the user selects an image and the url in the "Web Address" text box is different than the URL that is inserted into the html.

[Nikolay]

Hi,

You can use the click event of the images and modify the URL input. Here is the code snippet:

<script>
    $(document).on("click", ".k-imagebrowser>ul.k-tiles>li.k-tile", function(e) {
        var input = $("#k-editor-image-url")[0];
        if (input && /%2F/.test(input.value)) {
          input.value = input.value.replace(/%2F/g, "/");
        }
    });
</script>

Regards,
Nikolay
Telerik by Progress

[Greg]

I am using the Tile-Click workaround, and appreciate it. Thank you.

I see there has been no progress on the logged issue (#2920). I add my desire to see this fixed.

The fix should allow for optional encoding. Those using urls with the "/path?image={0}" format will need encoding while the rest will not.

[Nencho]

Hello Greg,

I have increased the priority of the bug. Also, I have added the comment that you've made about the expectation of this fix as well.

Regards,
Nencho
Progress Telerik

[Greg]

Thank you, Nencho!