If not, it would be nice in a future version, this way I can wrap my images in an HTML snippet for styling when I click Insert Image.
Just a thought.
10 Answers, 1 is accepted
The ImageBrowser exposes the following events:
change - triggered when the user selects (clicks on) an image thumbnail
apply - triggered when the user confirms (double-clicks on) an image thumbnail
error - triggered when a read or upload ajax request fails
These events are primarily intended for internal use, but you can add handlers too, using the standard approach:
Please be aware that the Editor's ImageBrowser widget does not exist on the page until the Image dialog is opened.
The ImageBrowser client object is attached to the div.k-imagebrowser element.
I get an error saying the event doesn't exist when using the MVC wrappers.
I want to use the events to wrap the img tag with additional HTML elements for styling, etc. Is this possible using the Change event? Or any of these events?
You should bind the event using the widget's bind() method, as described at
The method can be used after the image dialog is displayed, i.e. you can attach a click handler to a.k-insertImage, then use setTimeout (the exact value does not matter) to wait for the ImageBrowser widget to be created, obtain reference to the widget and bind the new handler.
I'm using an uploaded demo by Rosen from this support post, http://www.kendoui.com/forums/kendo-ui-web/editor/implementing-image-browser-for-editor.aspx, and I'm trying to get the ImageBrowser Change event to work and I'm having no luck.
At the bottom of this post are the few lines of code I've added to the example to see if the change event is firing (externally) and it doesn't seem to be. It was mentioned that these events are meant to be used internally by the Image Browser, so maybe that's why I can't reach them.
What I want to doWhat I would like to be able to do is open the ImageBrowser, select an image, and then have HTML code inserted that is more than simply the "img" tag. I would like to have some custom HTML inserted such as PrettyPhoto HTML with the image information, so I don't have to manually enter all that code for each image in the post.
So the inserted code might look like this:
Can you let me know if there is any way of doing what I want to do?
Here's my modified code of the demo example:
My additions are lines 3-5 and line 23. My alert doesn't fire.
Any help here is appreciated.
It seems that you have totally ignored my instructions, which are just above your last post. Is there anything unclear about them?
I did NOT ignore your instructions, it was a mistake on my part that I missed your post.
I have been able to get a click event to work on the ImageBrowser dialog Insert button, but now I need to know how to get information for the selected item. I was not able to get the value of the selected item using this example, but modified for the image browser.
I need access to these values:
- the image file name
- the Alt text
Can you show me how to access these values? Then I would need to know the best way to insert my custom HTML into the selection point in the editor.
Once the ImageBrowser change event is fired, you can retrieve the selected item by its CSS class - k-state-selected. Note that this class is used by other widgets as well, so you will need an appropriate selector / expression to retrieve the selected image. The filename is placed inside a <strong> element inside the selected element.
Although you can easily see it in the browser DOM inspector, here is a sample of the HTML markup of a single ImageBrowser item, which in this case is also selected.
Inserting content in the Editor via code is achieved via the Editor's exec method with an inserthtml command name. This is demonstrated at:
I got it to work in my project where I can select an image in the ImageBrowser from the list of images and get the image name and the alt text that I enter into the text box. The image browser still places the standard image HTML into the editor.
Is there a way to prevent this? I want to put in my HTML for the image that looks like this:
My HTML will use prettyPhoto so I can click on a thumbnail image and then view an larger image. Any help is appreciated.
You have two options:
1. Use a custom image insertion tool with a custom Kendo UI Window popup, which contains a standalone ImageBrowser inside. You already know how to handle ImageBrowser events, so when the user picks a file, use the Editor's exec() method to perform an inserthtml command with any HTML that you like.
2. Use your current implementation, subscribe to the ImageBrowser's apply event, locate the newly inserted image in the Editor's body (e.g. by its URL), and modiy the DOM, according to your preferences, just like you would do that with a regular HTML markup on the page. You will need to use setTimeout, because the image is still not present in the Editor's content area at the time the apply event is fired.
Did you succeed in what you wanted to do?
I would appreciate it very much if you can upload an example because I'm in the same situation. (maybe for the code library?)