Header Ads

ASP.NET MVC5: Rich Text (WYSIWYG) Editor

An interactive website requires interactive components in it for the target audience to interact in a more user friendly way.
Getting long rich content kind of text from the target audience adds a responsibility towards the website to do half of the work for the user e.g. auto spell checker, allowing user to place inline images or links, content indentation etc. These features can be provided individually, but, it will become more cumbersome for the website developer to develop each and every single feature from scratch. For, such matter many amazing affordable rich text editor plugins are available for commercial use.

Today, I shall be demonstrating how to integrate a rich text editor into ASP.NET MVC5 environment. I will be using Summernote Rich Text (WYSIWYG) Editor. This particular plugin is simple to use and the best part that I like about it is that it allows inline images which by far I am at least unable to find at free of cost, simple to use and working inline image media in different plugins that I have evaluated.

Following are some prerequisites before you proceed further in this tutorial:

1) Knowledge of ASP.NET MVC5.
2) Knowledge of HTML.
3) Knowledge of JavaScript. 
4) Knowledge of Bootstrap. 
5) Knowledge of Jquery. 
6) Knowledge of C# Programming.

The running working solution source code is being developed in Microsoft Visual Studio 2015 Enterprise.

Download Now!

Now, let's begin.

1) Create new MVC web project name it "RichTextEditor".

2) In "Model" folder, create "RichTextEditorViewModel.cs" file and place the following code in it i.e.

...

public class RichTextEditorViewModel { [AllowHtml] [Display(Name = "Message")] public string Message { get; set; } }
...

In the above code, I have created a simple model with message property only. This variable will contain all the text that user will write inside the rich text editor. The important part here is the "[AllowHtml]" attribute, this will let the message variable save all html generated content by the rich text editor which includes any formatting or media content. The important point to be noted here that, we cannot use "[Require]" attribute here with rich text editor, we can however, achieve it easily via code when posting the content to controller, I am not going to show that here though.  

3) Create ''Home->Index.cshtml" file and replace it with the following code i.e.

@using RichTextEditor.Models  
 @model RichTextEditorViewModel  
 @{  
   ViewBag.Title = "ASP.NET MVC5: Rich Text Editor Plugin";  
 }  
 <h2>@ViewBag.Title.</h2>  
 <div class="row">  
   <div class="col-md-12">  
     <section id="loginForm">  
       @using (Html.BeginForm("Index", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))  
       {  
         @Html.AntiForgeryToken()  
         <h5>  
           <i class="fa fa-link" aria-hidden="true"></i>  
           <a href="http://summernote.org/">Summernote Rich Text WYSIWYG Editor</a>  
         </h5>  
         <hr />  
         <div class="form-group">  
           <label class="col-md-4 control-label">Message </label>  
           <div class="col-md-8">  
             <div class="input-group">  
               @Html.TextAreaFor(m => m.Message, new { rows = "20", style = "resize:none;width:400px;", placeholder = Html.DisplayNameFor(m => m.Message), @class = "form-control input-lg textarea-editor" })  
             </div>  
           </div>  
         </div>  
         @*<div class="form-group">  
             <div class="col-md-offset-2 col-md-10">  
               <input type="submit" value="Log in" class="btn btn-default" />  
             </div>  
           </div>*@  
       }  
     </section>  
   </div>  
 </div>  
 @section Scripts  
 {  
   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>  
   @Scripts.Render("~/bundles/Script-custom-editor")  
   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">  
 }  

 In the above code, I have created my textarea control and apply the Summernote Rich Text (WYSIWYG) Editor plugin. I have also, included in this page the reference JavaScript and CSS style files for this plugin.  

4) In "Scripts" folder create a new file and name it "script-custom-editor.js". Place following code into this JavaScript file i.e.

$(document).ready(function ()  
 {  
    // Initialize Editor   
   $('.textarea-editor').summernote(  
   {  
     height: 300,         // set editor height  
     minHeight: null,       // set minimum height of editor  
     maxHeight: null,       // set maximum height of editor  
     focus: true         // set focus to editable area after initializing summernote  
   });  
 });  

In the above code, I have attached the Summernote Rich Text (WYSIWYG) Editor plugin with my textarea HTML control, which will capture rich text from the end-user. I have used basic settings for the plugin.  

5) Now, execute the project and you will be able to see the following i.e.


Conclusion

In this tutorial, you are able to learn about the importance, usage and advantage of rich text editor. You will also, learn about using Summernote Rich Text (WYSIWYG) Editor plugin with ASP.NET MVC5.

44 comments:

  1. I do trust all of the concepts you’ve presented on your post. They’re really convincing and will definitely work. Still, the posts are too brief for newbies. May you please extend them a little from subsequent time?Also, I’ve shared your website in my social networks.
    Office Interiors in Chennai
    Home Interior Decorators in Chennai

    ReplyDelete
    Replies
    1. Thank you for your support. Your feedback is valuable to me. I will try my best. Just for info the blog is shifted to www.asmak9.com

      Delete
    2. Thank you for your support. Your feedback is valuable to me. I will try my best. Just for info the blog is shifted to www.asmak9.com

      Delete
  2. You might comment on the order system of the blog. You should chat it's splendid. Your blog audit would swell up your visitors. I was very pleased to find this site.I wanted to thank you for this great read!! seo

    ReplyDelete
  3. Admiring the time and effort you put into your blog and detailed information you offer!.. Restore old photos online

    ReplyDelete
  4. They're produced by the very best degree developers who will be distinguished for your polo dress creating. You'll find polo Ron Lauren inside exclusive array which include particular classes for men, women. National Macaroni Day

    ReplyDelete
  5. Excellent effort to make this blog more wonderful and attractive. Web Solutions company

    ReplyDelete
  6. They're produced by the very best degree developers who will be distinguished for your polo dress creating. You'll find polo Ron Lauren inside exclusive array which include particular classes for men, women. Price today Graco 4Ever 4-in-1 Convertible Car Seat

    ReplyDelete
  7. They're produced by the very best degree developers who will be distinguished for your polo dress creating. You'll find polo Ron Lauren inside exclusive array which include particular classes for men, women. private label manufacturers

    ReplyDelete
  8. I have a mission that I’m just now working on, and I have been at the look out for such information PhenQ Reviews

    ReplyDelete
  9. Took me time to understand all of the comments, but I seriously enjoyed the write-up. It proved being really helpful to me and Im positive to all of the commenters right here! Its constantly nice when you can not only be informed, but also entertained! I am certain you had enjoyable writing this write-up. autoblog wordpress website

    ReplyDelete
    Replies
    1. Thank you for the support!! Yes, I enjoy sharing my knowledge.

      Delete
  10. I’m happy I located this blog! From time to time, students want to cognitive the keys of productive literary essays composing. Your first-class knowledge about this good post can become a proper basis for such people. nice one AIO Download APK

    ReplyDelete
  11. I was taking a gander at some of your posts on this site and I consider this site is truly informational! Keep setting up.. visit site

    ReplyDelete
  12. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own Blog Engine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it. FNaF World Update 3 Download

    ReplyDelete
  13. Thank you everyone for all your support and feedback...

    ReplyDelete
  14. I’m happy I located this blog! From time to time, students want to cognitive the keys of productive literary essays composing. Your first-class knowledge about this good post can become a proper basis for such people. nice one top soccer prediction sites

    ReplyDelete
  15. Very nice blog and articles. I am realy very happy to visit your blog. Now I am found which I actually want. I check your blog everyday and try to learn something from your blog. Thank you and waiting for your new post. soccer prediction

    ReplyDelete
  16. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article. Today match prediction

    ReplyDelete
  17. I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read!! I definitely really liked every part of it and i also have you saved to fav to look at new information in your site. wedding photo editing services

    ReplyDelete
  18. I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post. vectorize image

    ReplyDelete
  19. Very nice blog and articles. I am realy very happy to visit your blog. Now I am found which I actually want. I check your blog everyday and try to learn something from your blog. Thank you and waiting for your new post. clipping path services

    ReplyDelete
  20. Most administrations will give you the alternative of choosing a specific mystic and coming back to a similar one again on the off chance that you reuse their administration so you don't need to rehash the data you give them and you can construct an appropriate association with the reader.read text aloud online

    ReplyDelete
  21. I don t have the time at the moment to fully read your site but I have bookmarked it and also add your RSS feeds. I will be back in a day or two. thanks for a great site. best wireless gaming keyboards

    ReplyDelete
  22. I am extremely delighted in for this web journal. Its a useful subject. It help me all that much to take care of a few issues. Its chance are so awesome and working style so rapid. dokument

    ReplyDelete
  23. In the event that the composed text doesn't sound right, this can be balanced as required and played back again to check the words are directly for the composed sentence.notevibes.com

    ReplyDelete
  24. Thank you very much for sharing such a useful article. Will definitely saved and revisit your site Tik Tok

    ReplyDelete
  25. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Anyway, I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info
    FNaF World Download

    ReplyDelete
  26. This is a great post. I like this topic. This site has lots of advantage. I found many interesting things from this site. It helps me in many ways. Thanks for posting this again.
    Corporate cleaning service
    pest control services
    Outsourcing manpower services
    security guard service
    Facility management service
    painting service in dhaka

    ReplyDelete
  27. Pretty good post. I just stumbled upon your blog

    and wanted to say that I have really enjoyed

    reading your blog posts. Anyway, I'll be

    subscribing to your feed and I hope you post

    again soon. Big thanks for the useful info
    FNaF

    World Download free

    ReplyDelete
  28. A good blog always comes-up with new and exciting information and while reading I have felt that this blog really has all those quality that qualify a blog to be a one.
    Photo editing service
    best clipping path services
    Image Masking Service
    Background Removal Services

    ReplyDelete
  29. Thanks For sharing valuable Information....

    Movie box is excellent application for them who love to enjoy
    their time with movies and TV series.There was a time when watching
    and downloading movies.
    movies box apk
    moviebox download android

    ReplyDelete
  30. This comment has been removed by a blog administrator.

    ReplyDelete
  31. Very nice blog and articles. I am realy very happy to visit your blog. Now I am found which I actually want. I check your blog everyday and try to learn something from your blog. Thank you and waiting for your new post. thanks

    ReplyDelete
  32. A round of applause for your mind blowing article. Much thanks to you. Fantastic.
    hitachi 1.5 ton 3 star split inverter ac

    ReplyDelete
  33. really infomative and eduvcative article thanks publisher for sharing this info with us massage gaming chair with footrest
    whatsaup flippzilla

    ReplyDelete
  34. Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. filmora 10 activation key

    ReplyDelete
  35. This is a piece of information. Keep up the good works

    ReplyDelete
  36. A thoughtful insight and ideas I will use on my blog. You have obviously spent a lot of time on this. Well done! whatsapp online tracker premium/mod apk

    ReplyDelete