Extending Kendo UI Editor Functionality in Sitefinity

In my previous post I detailed a feature where users can upload files to the Sitefinity Document Library asynchronously. However, the interface for doing so was a bit basic. There was an HTML file input that automatically uploaded the selected file immediately. It worked, but the user wasn’t left with much to do with the link that was returned. Extending Kendo UI Editor functionality, however, can be used to make the return value more useful and make the whole user experience much better.

This post will show you how to take the feature and add it to the set of tools available for a Kendo UI Editor. We can re-use the code we developed in the previous post, altering the JavaScript and HTML some, while leaving the C# API controller the way it’s already written.

Hide the File Input and Add Textarea

Because we’ll be interacting with the Kendo UI Editor, we no longer need to present the file input to the user. We do still need it so users can select files, however. We also need a textarea that we’ll morph into a Kendo UI Editor. As such, our final required HTML will look like this:

Note that we’re using “visibility: hidden” instead of “display: none” because the file might not get sent otherwise. Both accomplish the same goal of removing the HTML file input from view.

Initialize the Kendo UI Editor

We’ll be modifying the JavaScript from the previous post when incorporating these changes. For convenience, here is the JavaScript from the last post:

The first thing we’ll do is declare a variable referencing our textarea HTML element, right below the other variable:

Then below the on(“change”) statement but still within our self-executing anonymous function, add the statement that transforms our textarea into a Kendo UI Editor. This initializes a Kendo UI editor and makes the specified set of toolbar icons appear across the top:

Adding the Custom Feature

Now we’ll start incorporating our custom functionality. We’ll accomplish this by adding a new object to the tools collection of the Kendo UI Editor and tell it to interact with our file selector input when clicked:

We trigger the “click” event of our file selector, which brings up the usual file selection dialog. This is how we get away with hiding the file input HTML element from the user.

To display an appropriate icon for our new tool, we can borrow an already-existing icon (in this case, a paperclip) from Kendo UI. This is accomplished by adding a simple CSS rule to our page (you can do this either inline, or in your site’s CSS):

The “uploadFile” part of the CSS class comes from the name we gave our tool in the tools JavaScript collection. Kendo UI automatically prepends “k-” to the class, so our style rule effects “.k-uploadFile” at the end of the day.

Here is what our editor looks like currently, with our custom tool appended to the end of the toolbar icons (the paperclip):

kendo-editor

Handling the Returned URL

At this point, you can click the new toolbar icon, select a file, and the process of uploading it and creating a new Document within Sitefinity will take place. All we need to do now is modify the original done() promise to insert the returned URL into our Kendo UI editor. We don’t want to simply append it, but would rather insert it where the user’s cursor currently is. This context-sensitive insert is a built-in feature of Kendo UI, and is accomplished easily:

In our function, we create a new hyperlink with the text “File” and supply the URL as the href. Then we get our Kendo UI Editor and exec the “inserthtml” command, passing our newly-formed hyperlink along. And we’re done! The file is now linked, and exists in the Sitefinity backend:

kendo-editor-with-file-link

uploaded-file-in-document-library

In my local site, the URL that “File” links to is http://localhost:12345/docs/default-source/my-document-library/file-to-upload-txt.txt?sfvrsn=0, which loads the text file as expected.

Putting it all Together

After extending Kendo UI editor functionality and implementing our new JavaScript to do so, here is what the final JavaScript for this post looks like:

Possibilities for Expansion

This is a bare-bones demonstration of how you can take a custom-developed feature and, by extending Kendo UI editor functionality, make it easily-accessible and useful to your users. There is plenty of room for expansion or improvement as your needs see fit. We could return the name of the file as well as the URL and use that as the text for the hyperlink, or even prompt the user for what they want to use for the hyperlink text, for instance. Overall, though, this should be enough to get you started to extending Kendo UI editor functionality!

The following two tabs change content below.