Lägg in en Wysiwyg-editor i ASP.NET MVC 2
Något som är väldigt vanligt på webbsidor (speciellt i CMS) är att man vill ha en Wysiwyg-editor på sidan för att enkelt kunna redigera sidorna och låta redaktörerna anpassa utseendet på texten samt lägga in bilder och annat.
När man vill lägga in en sådan så kan man ladda ned den och lägga in den på de ställen där det passar. Det kan dock krävas en del jobb, samtidigt som man kan behöva lägga in den på flera ställen. Dessutom så finns det en risk för att det kan bli onödigt mycket jobb för att vara säker på att den fortfarande fungerar om den byts ut.
Så hur kan man lösa det här på ett enkelt sätt?
UIHint används som bekant av både ASP.NET Dynamic Data och ASP.NET MVC 2 för att anpassa hur olika egenskaper skrivs ut på sidan. Man kan genom att ändra i en user control enkelt byta ut kontroller och vara säker på att de fortfarande fungerar. Jag kommer att gå igenom hur vi kan använda detta för att enkelt få till en Wysiwyg-editor istället för vanliga text-fält.
Först och främst så skall vi använda oss utav en modell kallad ”Customer” (surprise!). Den kommer att ha två egenskaper, ett id för att identifiera den aktuella kunden och sedan ”Information”, vilket kommer att vara en sträng med HTML där vi har information om kunden.
namespace Wysiwyg.Models
{
public partial class Customer
{
public int Id { get; set; }
public string Information { get; set; }
}
}
Vi kommer även att ha en CustomerController. Vid skapandet väljer vi att få med de extra metoderna för att skapa, editera och ta bort. Vi har även med en metod här som används för att fylla på med lite dummy-data.
public List<Customer> GetCustomers()
{
return new List<Customer>() {
new Customer() {
Id = 1,
Information = "Hej 1"
},
new Customer() {
Id = 2,
Information = "Hej 2"
},
new Customer() {
Id = 3,
Information = "Hej 3"
}
};
}
Om vi nu skapar upp en Index-sida och en Edit-sida som vi fyller med informationen från GetCustomers() så kommer vi att kunna se informationen om dem och få möjligheten att få upp ett redigeringsformulär.
Formuläret ser dock rätt tråkigt ut i dess standardutförande:
Det vi vill ha istället för en enkel textruta är en Wysiwyg-editor där man skall kunna använda HTML för att snygga till texten.
Vi börjar med att skapa upp en EditorTemplate för det. Det gör vi genom att skapa upp en ASP.NET MVC User Control vid namn Wysiwyg.ascx och som vi lägger i Views\Shared\EditorTemplates. Vill vi ha en template för vanlig visning så lägger vi istället våra user controls i en mapp kallad DisplayTemplates.
Den nyskapade filen kommer att ha det här innehållet:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<%= Html.TextArea("Information", Model }) %>
Vi behöver även lägga till ett attribut på Information-fältet i en metadata-klass. Skapa upp en ny partiell klass till Customer som ser ut i stil med det här:
using System.ComponentModel.DataAnnotations;
namespace Wysiwyg.Models
{
[MetadataType(typeof(Customer_Metadata))]
public partial class Customer
{
class Customer_Metadata
{
[UIHint("Wysiwyg")]
public string Information { get; set; }
}
}
}
Går vi in på sidan nu så kommer vi istället att ha en text-area, vilket är en bra början. Vi kan nu lägga till text på flera rader, men vi har fortfarande inget Wysiwyg-läge, så hur får vi dit det?
Först och främst så laddar vi ned CKEditor 3.0 (det hette tidigare FCKEditor, men bytte namn då det är alldeles för likt ett ord som också innehåller bokstäverna FCK ;-)). Det hittar vi här:
När det är nedladdat så lägger vi ckeditor-mappen i roten för får webbapplikation.
Nu behöver vi ändra lite i vår EditorTemplate för att få fram CKEditor istället för vår TextArea. Jag kommer att använda exempel-filerna som finns med i CKEditor, men ni kan lika gärna skapa egna för att kunna anpassa utseendet mer. För mer information om vad som går att göra så rekommenderar jag att ni kollar igenom exemplen som följer med, samt kollar igenom dokumentationen som finns på CKEditors hemsida.
Den modifierade versionen av Wysiwyg.ascx ser ut så här:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="/ckeditor/_samples/sample.js" type="text/javascript"></script>
<link href="/ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<%= Html.TextArea("Information", Model, new { @class = "ckeditor" }) %>
Jag har två referenser till js-filer och en till en css-fil här. Jag har även satt klassen för textarean till ”ckeditor”.
Om vi nu kollar på sidan igen så kommer vi att se en stor förändring:
Genom att sätta [UIHint(”Wysiwyg”)] på valfritt fält i någon klass så kan vi alltså få in en Wysiwyg-editor direkt på sidan utan något strul alls.
Om vi postar formuläret nu så kommer vi dock att få ett felmeddelande på grund av ValidateRequest i ASP.NET. För att slippa detta så måste vi sätta ValidateInput till false på de controllers som man skall kunna posta HTML till. Det här är för att vara säker på att ingen postar HTML där det inte är meningen att man ska kunna göra det.
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public ActionResult Edit(int id, FormCollection collection)
När det här är gjort så kommer vi att kunna använda vår Wysiwyg-editor som om det vore vilken kontroll som helst på sidan.
Vem har sagt att programmering är svårt? :-)
Exemplet i artikeln finns att ladda ned här: