Nibble

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 asp.net project. The result looks like this:

image

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

 image

Selecting one will update the word…

To create this I simply used jquery-spellchecker and this asp.net version http://forums.asp.net/t/1519923.aspx

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;
 
        [Umbraco.Forms.Core.Attributes.Setting("Culture", 
            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
        {
            get
            {
                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
        {
            get
            {
                if (txt.Text != "")
                {
                    Value.Clear();
                    Value.Add(txt.Text);
                }
                return Value;
            }
            set { Value = value; }
        }
 
        public override string RenderPreview()
        {
            return 
                "<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

    Hi,

    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,
    Anz

  2. Anz on February 18th, 2011

    Hi,
    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..

    Regards,
    Ansar

  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