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.

HTML Code

<head>
    <title></title>
       <meta charset="utf-8" />
    <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css'>
    <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
    <style>
        .ta-editor {
  min-height: 300px;
  height: auto;
  overflow: auto;
  font-family: inherit;
  font-size: 100%;
}
    </style>
</head>
<body>
    <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" />
        <h4>Body</h4>
        <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>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js'></script>
    <script src="editorpage.js"></script>
</body>

</html>

 

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

 <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js'></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
        $http({
            url: "/Data/GetEmailContent",
            method: "GET",
            headers: { "Content-type": "application/json" }
        }).then(function (d) {
            $scope.htmlcontent = d.data[0].Contant;
            $scope.Subject = d.data[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
        $http({
            url: "/Data/SaveEmailContent",
            method: "POST",
            data : mc,
            headers: { "Content-type": "application/json" }
        }).then(function (d) {

        });

    }

    GetEmailContent();

});


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
                dbCtx.EmailContents.Add(ec);
                //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,
                                  }).ToList();


            }
            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 https://github.com/wanming/angular-editor



No comments:

Post a Comment

Others

You will like to read it