Get Reference to Child Widgets
The ImageBrowser and FileBrowser components of the Editor internally use the Kendo UI Upload, ListView, and DropDownList widgets.
The following example demonstrates how to obtain these client-side objects of the widget.
The FileBrowser-related code is identical to the ImageBrowser one except for:
- To attach the
click
handler, use the.k-i-file-add
CSS class instead of the.k-i-image
one. - Use
var fileBrowser = $(".k-filebrowser").data("kendoFileBrowser");
instead ofvar imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
.
Important
If you are using the 2017 R1 version or later, use the
.k-insertFile
and.k-insertImage
classes to get the button elements.
To attach events with bind()
or to perform other customizations that may not be otherwise supported, use the API calls of the ListView, Upload and DropDownList widget objects after they are available.
The following transport
configurations are over-simplified and invalid.
Example
<textarea name="editor" id="editor"></textarea>
<script>
$(function(){
// initialize the Editor. When using Kendo UI server wrappers, the following statement will be auto-generated
$("#editor").kendoEditor({
tools: [
"insertImage",
"insertFile"
],
imageBrowser: {
transport: {
read: "foo",
create: "foo",
uploadUrl: "foo"
}
},
fileBrowser: {
transport: {
read: "foo",
create: "foo",
uploadUrl: "foo"
}
}
});
// example start
// retrieve the Editor widget object
var editor = $("#editor").data("kendoEditor");
// attach a click handler on the tool button, which opens the ImageBrowser dialog
editor.toolbar.element.find(".k-i-image").parent().click(function(){
// a setTimeout is required, otherwise the ImageBrowser widget will still not be initialized
setTimeout(function(){
// retrieve the ImageBrowser widget object
var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
console.log(imageBrowser);
// retrieve the ListView widget object
var listView = imageBrowser.listView;
console.log(listView);
// retrieve the Upload widget object
var upload = imageBrowser.upload;
console.log(upload);
// retrieve the DropDownList widget object
var dropdownlist = imageBrowser.arrangeBy;
console.log(dropdownlist);
});
});
// attach a click handler on the tool button, which opens the FileBrowser dialog
editor.toolbar.element.find(".k-i-file-add").parent().click(function(){
// a setTimeout is required, otherwise the FileBrowser widget will still not be initialized
setTimeout(function(){
// retrieve the ImageBrowser widget object
var fileBrowser = $(".k-filebrowser").data("kendoFileBrowser");
console.log(fileBrowser);
// retrieve the ListView widget object
var listView = fileBrowser.listView;
console.log(listView);
// retrieve the Upload widget object
var upload = fileBrowser.upload;
console.log(upload);
// retrieve the DropDownList widget object
var dropdownlist = fileBrowser.arrangeBy;
console.log(dropdownlist);
});
});
});
</script>
See Also
- Editor JavaScript API Reference
- How to Insert HTML Content via Custom Popup Tools
- How to Set Caret Position
- How to Show Editor in Full Screen
- How to Use Inline Editor inside Windows
For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.