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 of var 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.