While working on the web project where Rich content (html, css or images) is needed for a page, we require a good Rich Text Editor that is easy to implement, fast and reliable. There are many FREE RichTextEditor available online and one of them is TinyMCE. This WYSIWYG editor is available under
The good part of TinyMCE is, it is platform independent, and no .dll is required. Just plug and play. However implementing TinyMCE in ASP.NET MVC is a bit tricky.
Thanks to Manage NuGet Packages ... that makes it pretty easy to do all stuff without a lot of configuration settings.
Objective
The objective of this article is to explain how to implement TinyMCE WYSIWYG editor in ASP.NET MVC project.
Lets see how to implement TinyMCE in ASP.NET MVC
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.
Folder structure change after installing TinyMCE
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.
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.
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>
The Output Result
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",
Hope you liked this article, do not forget to share with your friends and colleagues. Do let me know your comments or suggestions if any to improve.
Keep learning and sharing!!!
Happy coding !