Creating a WYSIWYG Editor using the kendoEditor function

An Editor can be created either by using a textarea or div element. In this recipe, we will create an Editor using a textarea element and show you the default tools available for formatting the data.

How to do it…

Let's first create a textarea element, specifying the number of rows, columns, and width:

<textarea id="editor" 
          row="20" 
          cols="80" 
          style="width: 700px;">
         
</textarea>

The next step is to use this textarea element and create an Editor by invoking the kendoEditor function:

$("#editor").kendoEditor();

The kendoEditor function is used to initialize textarea as an Editor widget. The Editor will now have a WYSIWYG interface, allowing the user to format the text.

How it works…

When you initialize the textarea element as an Editor by invoking the kendoEditor function, various tools are available in the toolset, as shown in the following screenshot:

The toolset bar is shown at the top of...