Kendo Editor

Kendo Editor Wrapper for ASP.NET MVC

Overview:

This is the seventh post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely Editor. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is Editor Wrapper?

First lets understand what is a Editor control all about. The Editor allows users to create rich text content by means of a WYSIWYG interface. The generated widget value is comprise of XHTML markup.

imageFig 1: Kendo Editor

The Editor Wrapper for ASP.NET MVC is a server side wrapper for Kendo UI Editor which is a JavaScript based widget.

Basic Usage:

In order to use the kendo editor on any web page, we will use the Editor wrapper available as part part of the Kendo Wrappers for ASP.NET MVC. Following is the code for the basic usage where in we just instantiate the kendo editor and give it a name while setting the width & height.

Note that you need to set the Name for the editor. Other wise we will be issued a InvalidOperation exception at runtime which will say “Name cannot be blank”. Following is the screen shot of the output:

image

Fig 2: Kendo Editor Basic Usage

Tools Bar:

The top bar on the editor is known as Tools bar. By default the editor will display the basic necessary tools without we explicitly specifying them. The editor supports the following tool options:

1. Bold 13. InsertUnorderedList
2. Italic 14. InsertOrderedList
3. Underline 15. Indent
4. Strikethrough 16. Outdent
5. FontName 17. FormatBlock
6. FontSize 18. CreateLink
7. FontColor 19. Unlink
8. BackColor 20. InsertImage
9. JustifyLeft 21. SubScript
10. JustifyCenter 22. SuperScript
11. JustifyRight
12. JustifyFull

Table 1: Tool Bar Configuration Option

So here is the code to get all the tools on the tool bar:

Here is the output of the above code changes:

image

Fig 3: All Tools on the Tool Bar

Note: In order to get all the tools we just added Subscript() and Superscript() options. That is because, editor control will default add tools from 1 to 20 in the above table. So we just added missing tools. If you want to keep only some tools on the tool bar, you will need to first clear the tools and then add the tool option you want. Following code will add only FontName, FontSize, ForeColor and BackColor to the tool bar:

Here is the output of the above code changes:

image

Fig 4: Custom Options in Tool Bar

Custom Tool Bar Options:

So far we saw the default tool bar options available in Kendo. What if we want to have a custom tool bar option. Lets say we want to provide a button to draw a horizontal rule in the editor – it can be done by making use of the CustomButton() support in the editor. Here is the code to do that:

Here is the output of the above code changes:

image

Fig 5: Custom Button in Tool Bar

Adding Snippets:

Snippets are short piece of text and can be anything. For e.g. an email signature is a text snippet we normally create and store in our mail programs. The mail programs inserts the signature whenever we compose new mail. Similarly Kendo Editor provides ability to create snippets and enable end users to pick the snippet to insert as text. Following is the code:

Here is the output of the above code changes:

image

Fig 6: Snippets Feature

Custom Styling of content:

So far we have seen some of the core functionality of the editor. Another awesome feature of editor is the support for custom styling to the content. You can pretty much define your own style classes and within the editor provide it like a drop down option. Editor supports Styles() option to provide the custom style. Here is the code to achieve this:

If you look at the code what we have done is, created 3 styles for the demo sake and created a new stylesheet named editorStyles.css. We use the Styles() options to add the custom styles and use the Stylesheets() option to add reference to EditorStyles.css. Note the styling Kendo has added to Styles drop down. while setting it up – we just had given a text value pair for a style. Kendo applies the style for the drop down item – neat I say. Here is the output of the above code changes:

image

Fig 7: Custom Styling of content

Handling client side events:

Kendo widgets being client side controls, we have very rich API support on the client side. One of the API feature is that of client side event handling. Editor supports the following events:

  • change – Fires when Editor is blurred and its content has changed
  • execute – Fires when an Editor command is executed
  • paste – Fires before when content is pasted in the Editor
  • select – Fires when the Editor selection has changed

Here is the code to hook on to the client events for the editor:

Here is the output of the above code changes:

image

Fig 8: JavaScript Event Handling

Accessing Editor from client side:

As mentioned in the previous section all Kendo widgets support a rich API and once instantiated we can grab the control at runtime. Here is the JavaScript code do that:

As you can see, on document ready we grab the element which has the id kEditor and then use jquery’s data() method to get the Kendo Editor component. After that we set the content of the editor using the value() method. The client side API support a rich set of methods, properties and events. For a complete API listing, check out our docs page: Kendo Editor API.

Summary:

In this post we looked at one more wrapper namely Editor. It is very easy to work with Editor ASP.NET MVC wrapper and with just couple of lines we have a fully working editor set up. Also we saw how the control supports a rich set of client side API to work with. Hope this post helps you with your endeavor on Kendo Editor.

Advertisements

5 thoughts on “Kendo Editor Wrapper for ASP.NET MVC

  1. Pingback: Dew Drop – March 27, 2013 (#1,515) | Alvin Ashcraft's Morning Dew

  2. Hi Lohit

    I want to bring the TableEditing option as well to the editor. In the site, it just says “.TableEditing()” but in VS 2010, i’m not seeing this option, how to achieve this with asp.net?. Also when i tried to have the same kind of order, as we see in the KendoUI Editor demo page for “all options”, i’m not able to get Formatting option as well. I’m new to asp.net, so please guide me here.

    Regards
    Malarvannan.S

  3. Hi Lohit,

    I to am getting an error (“…toolfactory does not contain a definition for TableEditing…”)when attempting to use load the Table tools. I’m using VS 2013 Ultimate and am getting an error in my MVC4 .cshtml view when I add “.TableEditing()” to my editor. The version of Kendo I’m using is 2013.3.1316.

    Regards
    James S.

  4. Pingback: Top 5 Blog Posts of 2014 | telerik helper

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s