Using Rich Text Editor (WYSIWYG) in ASP.NET MVC
Introduction:
In ASP.NET MVC forum I found some
question regarding a sample HTML Rich Text Box Editor(also
known as wysiwyg).So i decided to create a sample ASP.NET
MVC web application which will use a Rich Text Box Editor.
There are are lot of Html Editors are available, but for
creating a sample application, i decided to use
cross-browser WYSIWYG editor from
openwebware. In
this article I will discuss what changes needed to work this
editor with ASP.NET MVC. Also I had attached the sample
application for download at
http://www.speedfile.org/155076. Also note that I will only show the important features,
not discuss every feature in detail.
Description:
So Let's start create a sample
ASP.NET MVC application. You need to add the following
script files,
jquery-1.3.2.min.js
jquery_form.js
wysiwyg.js
wysiwyg-settings.js
wysiwyg-popup.js
Just put these files inside Scripts folder. Also put wysiwyg.css in your Content Folder and add the following folders in your project
addons
popups
Also create a empty folder Uploads to store the uploaded images. Next open wysiwyg.js and set your configuration
// Images Directory
this.ImagesDir =
"/addons/imagelibrary/images/";
// Popups Directory
this.PopupsDir =
"/popups/";
// CSS Directory
File
this.CSSFile = "/Content/wysiwyg.css";
Next create a simple View TextEditor.aspx inside View / Home Folder and add the folllowing HTML.
<%@ Page Language="C#"
Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TextEditor</title>
<script src="../../Scripts/wysiwyg.js"
type="text/javascript"></script>
<script src="../../Scripts/wysiwyg-settings.js"
type="text/javascript"></script>
<script type="text/javascript">
WYSIWYG.attach('text', full);
</script>
</head>
<body>
<% using (Html.BeginForm()){ %>
<textarea id="text" name="test2"
style="width:850px;height:200px;">
</textarea>
<input
type="submit" value="submit" />
<%} %>
</body>
</html>
Here i have just added a text area control and a submit button inside a form. Note the id of text area and WYSIWYG.attach function's first parameter is same and next to watch is the HomeController.cs
using System;
using
System.Collections.Generic;
using
System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
namespace HtmlTextEditor.Controllers
{
[HandleError]
public class
HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to
ASP.NET MVC!";
return
View();
}
public ActionResult About()
{
return View();
}
public
ActionResult TextEditor()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public
ActionResult TextEditor(string test2)
{
Session["html"] = test2;
return
RedirectToAction("Index");
}
public ActionResult
UploadImage()
{
if (Request.Files[0].FileName != "")
{
Request.Files[0].SaveAs(Server.MapPath("~/Uploads/" +
Path.GetFileName(Request.Files[0].FileName)));
return Content(Url.Content("~/Uploads/" +
Path.GetFileName(Request.Files[0].FileName)));
}
return
Content("a");
}
}
}
So simple code, just save the posted Html into Session. Here the parameter of TextArea action is test2 which is same as textarea control name of TextArea.aspx View. Also note ValidateInputAttribute is false, so it's up to you to defends against XSS. Also there is an Action method which simply saves the file inside Upload Folder.
I am uploading the file using Jquery Form Plugin. Here is the code which is found in insert_image.html inside addons folder,
function ChangeImage() {
var
myform=document.getElementById("formUpload");
$(myform).ajaxSubmit({success:
function(responseText){
insertImage(responseText);
window.close();
}
});
}
and here is the Index View which simply renders the html of Editor which was saved in Session
<%@ Page Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle"
ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent"
ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"])
%></h2>
<p>
To learn more about ASP.NET MVC visit <a
href="http://asp.net/mvc" title="ASP.NET MVC
Website">http://asp.net/mvc</a>.
</p>
<%if (Session["html"] !=
null){
Response.Write(Session["html"].ToString());
} %>
</asp:Content>
Summary:
Hopefully you will enjoy this
article. Just download the code and see the effect. From
security point, you must handle the XSS attack your self. I
had uploaded the sample application in
http://www.speedfile.org/155076