File and Image Browsers

The Editor provides a file-and-image browser to upload or insert images and hyperlinks into its content area.

Both dialogs consist of Address and Search fields, a File Browser panel which shows the available files, a File Upload, Create a New Folder, and Delete options. Additionally, the user can set the file-property section with the fields that are suitable for images, such as web address, alternate text, width and height, and for hyperlinks, such as web address and title.

<div id="vueapp" class="vue-app">
    <kendo-editor :value="htmlText"
                  style="height:280px"
                  :image-browser="imageBrowser"
                  :file-browser="fileBrowser">
        <kendo-editor-tool :name="'insertImage'"></kendo-editor-tool>
        <kendo-editor-tool :name="'insertFile'"></kendo-editor-tool>
    </kendo-editor>
</div>
Vue.use(EditorInstaller);

new Vue({
    el: "#vueapp",
    data: {
        htmlText: "<p>Some sample text.</p>",
        imageBrowser: {
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/ImageBrowser/Read",
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/ImageBrowser/Destroy",
                    type: "POST"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/ImageBrowser/Create",
                    type: "POST"
                },
                thumbnailUrl: "https://demos.telerik.com/kendo-ui/service/ImageBrowser/Thumbnail",
                uploadUrl: "https://demos.telerik.com/kendo-ui/service/ImageBrowser/Upload",
                imageUrl: "https://demos.telerik.com/kendo-ui/service/ImageBrowser/Image?path={0}"
            }
        },
        fileBrowser: {
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/FileBrowser/Read",
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/FileBrowser/Destroy",
                    type: "POST"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/FileBrowser/Create",
                    type: "POST"
                },
                uploadUrl: "https://demos.telerik.com/kendo-ui/service/FileBrowser/Upload",
                fileUrl: "https://demos.telerik.com/kendo-ui/service/FileBrowser/File?fileName={0}"
            }
        }
    }
})

In this article