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

EditorFor Image Browser is encoding image url

6 Answers 119 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 15 Mar 2017, 03:30 PM

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.

 

 

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay
Telerik team
answered on 17 Mar 2017, 02:44 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Justin
Top achievements
Rank 1
answered on 17 Mar 2017, 03:06 PM

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.

0
Nikolay
Telerik team
answered on 21 Mar 2017, 12:47 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Greg
Top achievements
Rank 1
answered on 16 Apr 2018, 02:29 PM

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.

0
Nencho
Telerik team
answered on 18 Apr 2018, 11:00 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Greg
Top achievements
Rank 1
answered on 18 Apr 2018, 11:07 AM
Thank you, Nencho!
Tags
Editor
Asked by
Justin
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Justin
Top achievements
Rank 1
Greg
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or