Friday, March 6, 2015

Configure TinyMCE editor in ASP.NET MVC5

TinyMCE editor is one of the most popular opensource online editor. Its very simple to add TinyMCE editor in your ASP.NET application. In your ASP.NET MVC5 application go to TOOLS>Library Package Manager>Package Manager Consolee write Install-Package TinyMCE then press enter. It will download TinyMCE editor in your application. To see the full feature or demo of TinyMCE editor go to this link TinyMCE demo
Now we will add a controller in name TinyMCEController in the project.

public class TinyMCEController : Controller
{
    //
    // GET: /TinyMCE/
    public ActionResult Index()
    {
       return View();
    }

    // An action that will accept Html Content
    [HttpPost]
    public ActionResult Index(TinyMCEContent model)
    {
       return View();
    }
}

I have to add another model class that is TinyMCEContent class in the model.

    public class TinyMCEContent
    {
        // This attributes allows your HTML Content to be sent up
        [AllowHtml]
        public string HtmlContent { get; set; }

        public TinyMCEContent()
        {

        }
    }

Now we need a view to display the TinyMCE editor. So now we will create a folder name TinyMCE inside Views. I will create index views(index.cshtml) right click mouse in TinyMCE folder. Check following image if you have any confusion.
Now we are ready for setting the TinyMCE editor. I have written following code for displaying TinyMCE editor in the index.cshtml file.
When you click the button Save, it will post the content of the editor in [HttpPost] method. The TinyMCE editor will be look like following when you run the solution.
Is n't it so simple to add TinyMCE editor in ASP.NET MVC application? :)

No comments:

Post a Comment

Search This Blog

Visitor Counter