Sunday, 15 January 2017

Angularjs rich text editor

Simple steps to use wysiwyg angularjs rich text edit. It is very simple in look and as well simple to implement.  Just follow the step by step way as given below to implement for AngularJs.


You can the editor like below. Sample screen Click here


In Example will demonstrate you how to Save, Send and  get the saved mail in editor.


1.       You have database which contain the three colums as below,

2.       Use below HTML code to get the Subject, Email content and save of email Content button.


       <meta charset="utf-8" />
    <link rel='stylesheet prefetch' href=''>
    <link rel='stylesheet prefetch' href=''>
        .ta-editor {
  min-height: 300px;
  height: auto;
  overflow: auto;
  font-family: inherit;
  font-size: 100%;
    <div ng-app="textAngularTest" ng-controller="wysiwygeditor" style="padding:20px">
        <h3>Send Mail</h3>
        <h4>Mail</h4> <input type="text" ng-model="Subject" class="form-control" />
        <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
        <!--<h3>Raw HTML in a text area</h3>
        <textarea ng-model="htmlcontent" style="width: 100%"></textarea>-->
        <button ng-click="SaveEmailContent()">Save</button>
    <script src=''></script>
    <script src=''></script>
    <script src=''></script>
    <script src="editorpage.js"></script>



3.       Below URL is use to call the editor for your application

 <script src=''></script>

4.       Code for editorpage.js
Below code is for getting the saved email or to Save the new email.

Javascript (Angularjs) Code
var app =  angular.module("textAngularTest", ['textAngular']);

app.controller('wysiwygeditor', function ($scope, $http) {

    // Get the save email from database
    var GetEmailContent = function () {
        /// Calling the controller by Ajax method
            url: "/Data/GetEmailContent",
            method: "GET",
            headers: { "Content-type": "application/json" }
        }).then(function (d) {
            $scope.htmlcontent =[0].Contant;
            $scope.Subject =[0].Subject;


    /// Save or send the email
    $scope.SaveEmailContent = function () {
        var mc = {};
        mc.Contant = $scope.htmlcontent;
        mc.Subject = $scope.Subject;
        /// Calling the controller by Ajax method
            url: "/Data/SaveEmailContent",
            method: "POST",
            data : mc,
            headers: { "Content-type": "application/json" }
        }).then(function (d) {





5.       Backed or controller  c# code to call the DB method, we used the Entity framform to save or to fetch the records from the database.
To know how entity framework works please follow the below link.

Email content model
  public class MailContent
        public string Subject { get; set; }
        public string Contant { get; set; }

Saving and getting the email
public class DataController : Controller

        // Save email
        public JsonResult SaveEmailContent(MailContent mc)

            EmailContent ec = new EmailContent();
            ec.EmailContent1 = mc.Contant;
            ec.Subject = mc.Subject;

            int id = 0;
            //create DBContext object
            using (var dbCtx = new entitydata.TestEntities1())
                //Add email content
                //update the save content
                id = dbCtx.SaveChanges();
            return new JsonResult { Data = id, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        // Get email
        public JsonResult GetEmailContent()

            List<MailContent> mc = new List<MailContent>();
            //create DBContext object
            using (var dbCtx = new entitydata.TestEntities1())
                //Get email content
                mc = (from ec in dbCtx.EmailContents
                                  select new MailContent
                                      Contant = ec.EmailContent1,
                                      Subject = ec.Subject,

            return new JsonResult { Data = mc, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

6.       You will get the Application like.

Thanks for below Git hub link help me to create that sample code


  1. I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.WE are providing AngularJs training in Velachery.
    For more details:AngularJs training in Velachery