Implementing RichTextEditor or WYSIWYG (TinyMCE) in ASP.NET MVC

Step 1: Installing TinyMCE

First, right click your ASP.NET MVC project and select Manage NuGet Packages. and we get a dialogue box similar to below.

In the Search box in the top-right side, write tinymce and hit Enter key; this will give us all the components available through NuGet packages related with TinyMCE. Select TinyMCE.MVC and click Install button. It takes a while and installs this component in the project.

Step 2: Check whether TinyMCE installed correctly or not

This basically adds few folders, many sub folders and many files into the Scripts folder of the project that looks something like this

These all are mostly .js files that helps to create the WYSIWYG editor on the fly.

Apart form Scripts folder, it also adds a folder and few files into Views/Shared folder and it looks similar to below image.

In Shared folder, NuGet Packages basically creates templates that we are going to use for our database field that requires WYSIWYG editor. Notice that it has created two template files
– tinymce_full.cshtml -This is a template file that contains easily readable and understandable code along with comment for developer to easily understand.

– tinymce_full_compressed.cshtml – This is the same as above template file but compressed and optimized code for production use where no code alignment, proper comment is written. In the production environment, we should use this file.

Step 3: Changing Model for WYSIWYG field

Once all of the above is set up, its time to change the Model field a bit so that our database field that requires WYSIWYG editor uses this template.

Extra Namespaces to be used in the Model

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
[Required]
 [AllowHtml]
 [UIHint("tinymce_full_compressed")]
 [Display(Name = "Page Content")]
 public string PageContent { get; set; }

Notice that in above code snippet, my database field name is PageContent and we are adding two special extra attributes here.
AllowHtml -this attributes allows this field to accept HTML and plain text data.

[UIHint(“tinymce_full_compressed”)] – this attributes allows this field to use template from the /Views/Shared/EditorTempaltes folder.

Step 4: The View

In the view, no extra change is required. Just used it as if its a TextBox field and it will work.

<div class="editor-label">
 @Html.LabelFor(model => model.PageContent)
 </div>
 <div class="editor-field">
 @Html.EditorFor(model => model.PageContent)
 @Html.ValidationMessageFor(model => model.PageContent)
 </div>

Output

When we run the project and go to your view page, it looks like below. By default, it gives almost all functionality of the TinyMCE WYSIWYG editor and it looks like below.

If we want to customize features available in TinyMCE, we can go to the Template file under Views/Shared/EditorTemplates folder and change variable values as shown in the picture below (the variables that is bordered inside Yellow color).

That’s it, we are now equipped with WYSIWYG editor in ASP.NET MVC project. Start using them to write Rich content for the application.

How to bring more than one fields with WYSIWYG editor?

To bring more than one field with MCE WYSIWYG editor, add the field’s name in the elements variable separated by comma in the above code snippet, like this.

elements: "ObjectiveAnswer1, ObjectiveAnswer2, ObjectiveAnswer3, ObjectiveAnswer4",

*copied from

http://www.dotnetfunda.com/articles/show/2657/implementing-richtexteditor-or-wysiwyg-tinymce-in-aspnet-mvc

Leave a Reply

Your email address will not be published. Required fields are marked *