Kendo UI Editor – A FreeTextBox Replacement

The Kendo UI Editor is simple to use and easy to implement. I found it to be a great FreeTextBox replacement, the editor that I’ve used in the past.

Here are a few reasons:

  • Kendo editor is configured client-side in the JavaScript
  • Kendo editor doesn’t rely on a server side control on the page, allows more control of what’s rendered
  • No need to recompile when a configuration change is made to the Kendo editor

Kendo UI Editor (JSFiddle)

FreeTextBox – Set default font and size

When using the FreeTextBox HTML editor, the default font styles have to be set in the stylesheet specified in the DesignModeCss property.

FreeTextBox - Set default font and size

In my case I created a stylesheet and saved it as /App_Themes/Default/FreeTextBox.css, with the following:

body
{
font-family:Georgia;
font-size:14pt;
}

Then I set the DesignModeCss property:

<uc:FreeTextBox ID="ucFreeTextBox" DesignModeCss = "~/App_Themes/Default/FreeTextBox.css" Runat="server" />

And that’s it.

FreeTextBox – FontFacesMenuList , FontFacesMenuNames, FontSizesMenuList, FontSizesMenuNames

I was able to change the font-family and font size drop down lists, see example below using VB.NET.

<FTB:FreeTextBox runat="server" ID="ftb" />
Dim fontFaces() As String = {"Time New Roman", "Georgia", "Arial", "Tahoma", "Wingdings"}
Dim fontFaceNames() As String = {"Time", "Georgia", "Arial", "Tahoma", "Wingdings"}
ftb.FontFacesMenuList = fontFaces
ftb.FontFacesMenuNames = fontFaceNames

Note: The list of font sizes available are 1-7, the default is 3.

Dim fontSizes() As String = {"1", "2", "3", "4", "5", "6", "7"} 
Dim fontSizeNames() As String = {"8", "10", "12", "14", "16", "18", "20"}
ftb.FontSizesMenuList = fontSizes
ftb.FontSizesMenuNames = fontSizeNames

5