Extending Umbraco Contour, creating a custom field type (text area with spellchecker)

To continue the series on Umbraco Contour, in this post I’ll outline how I created a custom field type, a textarea that has a spell check option.

First I simply created a custom control that can be used in any project. The result looks like this:


I can hit the check spelling button and then I’ll get an overview of the words that are incorrect. When I click in a word I get a list of options I can choose from


Selecting one will update the word…

To create this I simply used jquery-spellchecker and this version

To be able to use this custom control as a Contour fieldtype I’ll need to create a custom fieldtype class  (inherit from Umbraco.Forms.Core.FieldType) and I’ll basicly wrap the custom control in this class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Umbraco.Forms.Core;
using System.Web.UI.WebControls;
using umb = umbraco;
namespace SpellCheckerTest.FieldType
    public class TextAreaWithSpellChecker : Umbraco.Forms.Core.FieldType
        public Control.TextAreaWithSpellChecker txt;
        public List<Object> Value;
            description = "Enter the culture")]
        public string Culture { get; set; }
        [Umbraco.Forms.Core.Attributes.Setting("Check spelling caption", 
            description = "Enter the caption")]
        public string CheckSpellingCaption { get; set; }
        [Umbraco.Forms.Core.Attributes.Setting("Loading caption", 
            description = "Enter the caption")]
        public string LoadingCaption { get; set; }
        [Umbraco.Forms.Core.Attributes.Setting("No mistakes caption", 
            description = "Enter the caption")]
        public string NoMistakesCaption { get; set; }
        public TextAreaWithSpellChecker()
            Id = new Guid("71A8189D-4A3E-4208-9EA8-32C2B138C024");
            Name = "TextArea With SpellChecker";
            Description = "Renders a TextArea With Spell Checker";
            Icon = "textarea.png";
            DataType = FieldDataType.LongString;
            txt = new Control.TextAreaWithSpellChecker();
            Value = new List<object>();
        public override WebControl Editor
                if (Value.Count > 0)
                    txt.Text = Value[0].ToString();
                txt.Culture = Culture;
                txt.CheckSpellingCaption = CheckSpellingCaption;
                txt.LoadingCaption = LoadingCaption;
                txt.NoMistakesCaption = NoMistakesCaption;
                return txt;
            set { base.Editor = value; }
        public override List<Object> Values
                if (txt.Text != "")
                return Value;
            set { Value = value; }
        public override string RenderPreview()
                "<textarea id=\"text-content\" rows=\"5\" cols=\"25\"></textarea>" +
                "<br/> <input type=\"button\" id=\"check-textarea\" value=\"Check Spelling\" />";
        public override string RenderPreviewWithPrevalues(List<object> prevalues)
            return RenderPreview();
        public override bool SupportsRegex
            get { return true; }


As you can see it’s pretty straight forward, setitng the editor to the custom control, returning the text property as value,… Also the custom control has several properties like culture, … If I want to be able to enter these in the form designer I’ll add some properties an mark them with the Umbraco.Forms.Core.Attributes.Setting attribute

The end result:


Download the sourcecode

To use the fieldtype, drop the assembly SpellCheckerTest.dll in the bin directory and the SpellChecker.aspx page in the /umbraco/plugins/contourspellcheckerfieldtype directory

4 Comments so far

  1. Anz on February 18th, 2011


    Thanks for the great post.. am working on a custom fieldtype based on this code.
    Can you please tell me whats the purpose of RenderPreview and RenderPreviewWithPrevalues functions?

    Best Regards,

  2. Anz on February 18th, 2011

    I am getting following error when I add this control to my Contour form..

    Method ‘SpellCheckerTest.FieldType.TextAreaWithSpellChecker.Check spelling caption’ not found.

    Please help..


  3. Anz on February 18th, 2011
  4. Your name on June 2nd, 2012

    Attractive portion of content. I simply stumbled upon your web site and in accession capital to claim that I get in fact loved account your blog posts. Any way I will be subscribing in your feeds or even I fulfillment you get entry to persistently fast.

Leave a Reply