Wednesday, 7 September 2016

Angular Text Editor in asp.net mvc5 web application

Leave a Comment
Hi every one welcome again thank yo for  comments and recommendations for previous post.In today's tutorial i am going to teach you How to integrate Angular Text Editor in asp.net mvc5 web application.This Text Editor is an angular plugin that can make a text area html element into Text Editor.This is WYWIWYS type of Text Editor.
In computing, a WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation. WYSIWYG is an acronym for "what you see is what you get".
Let see some of  my previous posts,
Now see how to implement Angular Text Editor in our asp.net mvc web application.
1.Create asp.net web application using empty mvc template.

Create a Controller

1.Right click on Controllers folder --> add --> Controller--> name it.
public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
2.Add View to the Index action method by right click on index action --> Add View --> name it --> add.
3.Add below reference files that are required for Angular Text editor.
<!--Angular Text Editor Reference files-->
<link href="http://jqueryte.com/css/jquery-te.css" rel="stylesheet"/>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.9/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://jqueryte.com/js/jquery-te-1.4.0.min.js"></script>

Add angular script code for Text Editor

4.Add below angular script to make text area as Text Editor.
5.Here,i am storing the text editor data in $scope.descriptionzone and displaying HTML output of the data in below Text Editor.
 function Controller($scope) {
        //object that stores the editor (textbox) data.
        $scope.descriptionzone = undefined;
        //resets the Editor data
        $scope.reset = function () {
            $scope.descriptionzone = null;
        }
    };

    angular.module('angularteexample', []).directive('angularte', function () {
        return {
            restrict: 'A',
            require: '^ngModel',
            link: function (scope, element, attrs, ngModel) {
                $(function () {
                    element.jqte({
                        // On focus show the toolbar
                        focus: function () {
                            scope.$apply(function () {
                                element.parents(".jqte").find(".jqte_toolbar").show();
                                element.parents(".jqte").click(function () { element.parents(".jqte").find(".jqte_toolbar").show(); });
                            });
                        },
                        // On blur hide the toolar
                        blur: function () {
                            scope.$apply(function () {
                                element.parents(".jqte").find(".jqte_toolbar").hide();
                            });
                        },
                        // On change refresh the model with the textarea value
                        change: function () {
                            scope.$apply(function () {
                                ngModel.$setViewValue(element.parents(".jqte").find(".jqte_editor")[0].innerHTML);
                            });
                        }
                    });
                    element.parents(".jqte").find(".jqte_toolbar").hide();
                });

                // On render refresh the textarea with the model value 
                ngModel.$render = function () {
                    element.parents(".jqte").find(".jqte_editor")[0].innerHTML = ngModel.$viewValue || '';
                };
            }
        }
    });

6.See the complete code of the Index below.

@{
    ViewBag.Title = "www.mitechdev.com";
}
<h3>Angular Text Editor in asp.net mvc5 application</h3>
<!--Angular Text Editor Reference files-->
<link href="http://jqueryte.com/css/jquery-te.css" rel="stylesheet"/>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.9/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://jqueryte.com/js/jquery-te-1.4.0.min.js"></script>

<script>
    function Controller($scope) {
        //object that stores the editor (textbox) data.
        $scope.descriptionzone = undefined;
        //resets the Editor data
        $scope.reset = function () {
            $scope.descriptionzone = null;
        }
    };

    angular.module('angularteexample', []).directive('angularte', function () {
        return {
            restrict: 'A',
            require: '^ngModel',
            link: function (scope, element, attrs, ngModel) {
                $(function () {
                    element.jqte({
                        // On focus show the toolbar
                        focus: function () {
                            scope.$apply(function () {
                                element.parents(".jqte").find(".jqte_toolbar").show();
                                element.parents(".jqte").click(function () { element.parents(".jqte").find(".jqte_toolbar").show(); });
                            });
                        },
                        // On blur hide the toolar
                        blur: function () {
                            scope.$apply(function () {
                                element.parents(".jqte").find(".jqte_toolbar").hide();
                            });
                        },
                        // On change refresh the model with the textarea value
                        change: function () {
                            scope.$apply(function () {
                                ngModel.$setViewValue(element.parents(".jqte").find(".jqte_editor")[0].innerHTML);
                            });
                        }
                    });
                    element.parents(".jqte").find(".jqte_toolbar").hide();
                });

                // On render refresh the textarea with the model value 
                ngModel.$render = function () {
                    element.parents(".jqte").find(".jqte_editor")[0].innerHTML = ngModel.$viewValue || '';
                };
            }
        }
    });
</script>
<div ng-app="angularteexample">
    <div ng-controller="Controller">
        <p>
            <!--Text Editor element-->
            <textarea angularte ng-model="descriptionzone"></textarea>
        </p>
        <p>Test: 
            <!--it shows the data we entered in Editor-->
            <!--Here it shows the Html output of the Editor data-->
            <div style="background-color:darkgreen;color:white;">{{descriptionzone}}</div>
        </p>
        <p>Click Reset button to reset the Editor: <button type="button" class="btn btn-default" ng-click="reset()">Reset Editor</button></p>
    </div>
</div>


7.For more information about this Angular TextEditor visit official page www.jqueryte.com.
8.See the output of the application.
Angular Text Editor in asp.net mvc5 web application

9.The below is html output of the text editor data.
10.when click on Reset Edior button the in editor is erased.
11.Downlaod the source code of the application Source Code (VS15).

Conclusion

I hope this tutorial is understandable and useful for every reader.Please comment if you suggest any modification to improve the quality of article.If you are not subscribed to this blog subscribe.follow on Social networks for daily awesome updates[Facebook,twitter,google plus].

0 comments:

Post a Comment