Lightweight Rich Text Editor Control in ASP.NET MVC 2 – Part 2

The last post I made was the most basic way of getting that RTE control rendered in ASP.NET MVC. I explored it more and have found a more appropriate way of doing this.

Below is the class for TextEditor Control. I have added two methods TextEditor and TextEditorFor with 2 overloads each. TextEditorFor methods takes expression as input and renders the control deducing name from expression also if the input model contains value in it, control is initialized with that value.

/// <summary>
/// Html helper extension for a rich text editor element
/// </summary>
public static class TextEditorExtention
{
	/// <summary>
	/// Returns a rich text editor element by using the specified HTML helper and the name of the form field.
	/// </summary>
	/// <param name="htmlHelper">The HTML helper instance that this method extends.</param>
	/// <param name="name">The name of the form field and the <see cref="System.Web.Mvc.ViewDataDictionary" /> key that is used to look up the validation errors.</param>
	/// <param name="value">The value to be set in the rich text editor element.</param>
	/// <returns></returns>
	public static MvcHtmlString TextEditor(this HtmlHelper htmlHelper, string name, string value = "")
	{
		return htmlHelper.TextEditor(name, (object)null, value);
	}

	/// <summary>
	/// Returns a rich text editor element by using the specified HTML helper, the name of the form field and the HTML attributes.
	/// </summary>
	/// <param name="htmlHelper">The HTML helper instance that this method extends.</param>
	/// <param name="name">The name of the form field and the <see cref="System.Web.Mvc.ViewDataDictionary" /> key that is used to look up the validation errors.</param>
	/// <param name="htmlAttributes">An object that contains the HTML attributes for the element. The attributes are retrieved through reflection by examining the properties of the object. The object is typically created by using object initializer syntax.</param>
	/// <param name="value">The value to be set in the rich text editor element.</param>
	/// <returns></returns>
	public static MvcHtmlString TextEditor(this HtmlHelper htmlHelper, string name, object htmlAttributes, string value = "")
	{
		return htmlHelper.TextEditor(name, new RouteValueDictionary(htmlAttributes), value);
	}

	/// <summary>
	/// Returns a rich text editor element by using the specified HTML helper, the name of the form field and the HTML attributes.
	/// </summary>
	/// <param name="htmlHelper">The HTML helper instance that this method extends.</param>
	/// <param name="name">The name of the form field and the <see cref="System.Web.Mvc.ViewDataDictionary" /> key that is used to look up the validation errors.</param>
	/// <param name="htmlAttributes">An object that contains the HTML attributes for the element. The attributes are retrieved through reflection by examining the properties of the object. The object is typically created by using object initializer syntax.</param>
	/// <param name="value">The value to be set in the rich text editor element.</param>
	/// <returns></returns>
	public static MvcHtmlString TextEditor(this HtmlHelper htmlHelper, string name, IDictionary<String, Object> htmlAttributes, string value = "")
	{
		var tagBuilder = new TagBuilder("textarea");
		tagBuilder.MergeAttributes(htmlAttributes);
		tagBuilder.MergeAttribute("name", name, true);
		tagBuilder.MergeAttribute("class", "rte", true);
		tagBuilder.GenerateId(name);

		if (!string.IsNullOrEmpty(value))
		{
			tagBuilder.SetInnerText(value);
		}

		ModelState modelState;
		if (htmlHelper.ViewData.ModelState.TryGetValue(name, out modelState))
		{
			if (modelState.Errors.Count > 0)
			{
				tagBuilder.AddCssClass(HtmlHelper.ValidationInputCssClassName);
			}
		}

		string textArea = tagBuilder.ToString(TagRenderMode.Normal);
		return MvcHtmlString.Create(@"<script type=""text/javascript"">
							$(document).ready(function () {
								var arr = $('.rte1').rte({
									css: ['default.css'],
									controls_rte: rte_toolbar,
									controls_html: html_toolbar
								});

								$('.rte').rte({
									css: ['default.css'],
									width: 450,
									height: 200,
									controls_rte: rte_toolbar,
									controls_html: html_toolbar
								}, arr);
							});
							</script>" + textArea);
	}

	/// <summary>
	/// Returns a rich text editor element by using the specified HTML helper and the name of the form field as an expression.
	/// </summary>
	/// <typeparam name="TModel">The type of the model.</typeparam>
	/// <typeparam name="TValue">The type of the value.</typeparam>
	/// <param name="htmlHelper">The HTML helper instance that this method extends.</param>
	/// <param name="expression">The expression that resolves to the name of the form field and the <see cref="System.Web.Mvc.ViewDataDictionary" /> key that is used to look up the validation errors.</param>
	/// <param name="value">The value to be set in the rich text editor element.</param>
	/// <returns></returns>

	public static MvcHtmlString TextEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, string value = "")
	{
		return htmlHelper.TextEditorFor<TModel, TValue>(expression, (object)null, value);
	}

	/// <summary>
	/// Returns a rich text editor element by using the specified HTML helper and the name of the form field as an expression.
	/// </summary>
	/// <typeparam name="TModel">The type of the model.</typeparam>
	/// <typeparam name="TValue">The type of the value.</typeparam>
	/// <param name="htmlHelper">The HTML helper instance that this method extends.</param>
	/// <param name="expression">The expression that resolves to the name of the form field and the <see cref="System.Web.Mvc.ViewDataDictionary" /> key that is used to look up the validation errors.</param>
	/// <param name="htmlAttributes">An object that contains the HTML attributes for the element. The attributes are retrieved through reflection by examining the properties of the object. The object is typically created by using object initializer syntax.</param>
	/// <param name="value">The value to be set in the rich text editor element.</param>
	/// <returns></returns>
	public static MvcHtmlString TextEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, object htmlAttributes, string value = "")
	{
		return htmlHelper.TextEditorFor<TModel, TValue>(expression, new RouteValueDictionary(htmlAttributes), value);
	}

	/// <summary>
	/// Returns a rich text editor element by using the specified HTML helper and the name of the form field as an expression.
	/// </summary>
	/// <typeparam name="TModel">The type of the model.</typeparam>
	/// <typeparam name="TValue">The type of the value.</typeparam>
	/// <param name="htmlHelper">The HTML helper instance that this method extends.</param>
	/// <param name="expression">The expression that resolves to the name of the form field and the <see cref="System.Web.Mvc.ViewDataDictionary" /> key that is used to look up the validation errors.</param>
	/// <param name="htmlAttributes">An object that contains the HTML attributes for the element. The attributes are retrieved through reflection by examining the properties of the object. The object is typically created by using object initializer syntax.</param>
	/// <param name="value">The value to be set in the rich text editor element.</param>
	/// <returns></returns>
	public static MvcHtmlString TextEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, IDictionary<String, Object> htmlAttributes, string value = "")
	{
		var name = ExpressionHelper.GetExpressionText(expression);
		object model = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).Model;
		if (string.IsNullOrEmpty(value))
		{
			value = model.ToString();
		}

		return htmlHelper.TextEditor(name, htmlAttributes, value);
	}
}

We can use it as follows

<%= Html.TextEditor("txtContent") %>
<%= Html.TextEditorFor(model => model.Content) %>

You can download Lightweight Rich Text Editor plug-in from here.

Advertisements

About Utkarsh Puranik

Software Engineer by Profession, Gamer by Nature, Techy by Attitude and a Good Person at Heart
This entry was posted in Technology and tagged , , , . Bookmark the permalink.

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