ImageBrowser - How to get inserted image HTML?

[Josh]

We are using Kendo Image Browser to handle selecting and inserting images from our CDN. In one situation, though, we aren't using the editor as the image destination, but rather just a text area. I added a custom "select" event, and it fires, but I can't, for the life of me, get a handle on the image HTML, especially in Firefox. On the returned value, there is a property called sender, and sender at times, has container information that has the correct innerHTML. But probably 5-10 times, it doesn't have that info. I just want the HTML so I can insert it into my text area.

Is there a format/event that I should be using? Is this even possible?

Thanks in advance,
-Josh

[Dimo]

Hello Josh,

I am not sure which custom select event you are referring to, but generally, there is no suitable event, that can be intercepted to collect the generated image HTML output. You can generate the output yourself, based on the data in the popup textboxes (#k-editor-image-url and #k-editor-image-title).

You can use the approach demonstrated below. Its milestones include:

+ the execute event of the Editor - the handler checks whether an ImageBrowser dialog will open
+ the dataBound event of the ListView inside the ImageBrowser - the handler attaches a double-click handler on the image thumbnails
+ the mousedown event of the ImageBrowser Insert button

If you support touch devices as well, attach a touchend handler instead, when necessary. In addition, it is not a bad idea to detach all DOM event handlers once they are not needed. The Insert button mousedown handler can be detached in handleImageData. The thumbnails' dblclick handler can be detached in the listView's dataBinding event. This will ensure that you get no memory leaks if the web page is not refreshed for a long time and the ImageBrowser is used multiple times.

http://api.jquery.com/off/

function handleImageData(e) {
    var target = $(e.target);
    if (target.is(".k-dialog-insert") || target.closest(".k-tile")[0]) {
        var url = $("#k-editor-image-url").val(),
            alt = $("#k-editor-image-title").val();

        console.log("URL: " + url + " ; ALT: " + alt);
    }
}

function onExecute(e) {
    if (e.name == "insertimage") {
        setTimeout(function() {
            $(".k-imagebrowser").data("kendoImageBrowser").listView.bind("dataBound", function() {
                $(".k-imagebrowser").find(".k-tile").one("dblclick", handleImageData)
            });
            $(".k-imagebrowser-dialog .k-dialog-insert").one("mousedown", handleImageData);
        }, 1);
    }
}

$("#editor").kendoEditor({
    execute: onExecute
});

Regards,
Dimo
Telerik

[Josh]

Thank you, Dimo! I am going to give it a shot and will report back. When I refer to select.. I put an event "select" on my kendoEditor declaration, and it did fire when "Insert" was clicked, but I couldn't figure out what I needed to look at to get the image HTML.

[Josh]

This works great, but with one exception. I need this to also work in IE 8. We found most of the clients to be using it. I found the invalid argument that IE8 throws here.

We have version 2 and from kendo.web.min
do a.insertBefore(u,u.previousSibling),m.moveToElementText(u);

Empty anchor tag I believe is this in the final rendering taken from Chrome.
<a href="#" class="k-icon k-i-search k-search"></a>

Thanks

[Dimo]

Hi Josh,

I didn't understand what exactly happens and which is the invalid argument. Is the error caused by the Javascript code I sent previously? If not, then please provide a simple runnable demo.

Regards,
Dimo
Telerik

[Josh]

Different issue, but same Image Browser.

The code you supplied works great in FF and Chrome.

IE8 is the one receiving this error. I wouldn't mind so much but a good portion of our client base we found is using IE8. So this is different error not related to the code you supplied.

This error occurs as shown above within the kendo.web.min. There is an empty anchor tag, which is generated within the kendo code which is not available before hand.

The full class name of the element that is within the image browser is "k-icon k-i-search k-search". It appears to be within a feature that we are not using called search box and of course is not visible. Putting an 'if' that places an non-breaking-space within the kendo code can fix this but we want to avoid altering the kendo code. We are using version 2 as mentioned.

[Dimo]

Hi Josh,

I still do not understand what exactly the problem is, how it is reproduced, and how it is related to the initial discussion. The following demo works in IE8:

http://demos.telerik.com/kendo-ui/web/editor/imagebrowser.html

In order to avoid further message roundtrips and guesswork on my part, please provide a runnable example.

Regards,
Dimo
Telerik