Search
Sponsor
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Tue, 21-Oct-2014 Authors
Vivek.Ramapuram
250
All Time Authors
Sourav.Kayal
39750
SheoNarayan
38050
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

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

SheoNarayan
Posted by under ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 15576 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 5 out of 5
2 vote(s)
In this article, We are going to learn how to implement RichTextEditor or WYSIWYG editor TinyMCE in ASP.NET MVC application.

Introduction


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 GNU LESSER GENERAL PUBLIC LICENSE that can be treated as free.

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
  1. tinymce_full.cshtml -This is a template file that contains easily readable and understandable code along with comment for developer to easily understand.

  2. 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.
  1. AllowHtml -this attributes allows this field to accept HTML and plain text data.

  2. [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 !

Page copy protected against web site content infringement by Copyscape
About the Author

SheoNarayan

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Microsoft_MVP,Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com

Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan
Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Posted by: Rclancyr on: 7/29/2014 | Points: 25

I also can't see the editor. Would it be possible to provide your source code?

Posted by: Mohsin1122 on: 10/21/2014 | Points: 25

how to get the content of tinymce in jquery
help me


Login to post response

Comment using Facebook(Author doesn't get notification)