Learn MVC : Using Angular Summer Note

Introduction

This article demonstrates how to use Angular Summer Note in Visual Studio 2017. Following the below steps, you can use Angular summer note in MVC.

• Create MVC Project
• Configure Angular Summer Note
• Work in Angular Summer Note

Create MVC Project

Open Visual Studio 2017.



Go to New menu > click New & project. Now, it will open "New Project" window.



You can select ASP.NET Web Application on Framework 4.5. Enter the name of project in “Solution name” textbox, then click OK button.



One more window should appear. Select MVC Template in this popup & click OK. Now, start cropping image.

Configure Angular Summer Note

You can download the plug-in from -

• Bootstrap
• Moment
• Angular Summer Note
• Summer Note

Open the _Layout.cshtml and must refer the .js file from downloaded folder to this view page

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script src="~/Scripts/bootstrap.min.js"></script>
 <script src="~/PlugIn/moment/min/moment-with-locales.min.js"></script>
 <script src="~/PlugIn/bootstrap/js/tooltip.js"></script>
 <link href="~/PlugIn/summernote/dist/summernote.css" rel="stylesheet" />
 <script src="~/PlugIn/summernote/dist/summernote.js"></script>
 <script src="~/PlugIn/angular/angular.min.js"></script>
 <script src="~/PlugIn/angular-summernote/dist/angular-summernote.js"></script>
 <script src="~/PlugIn/angular-ui-router/release/angular-ui-router.js"></script>

Link your angular configurable file, whatever you given name

<script src="~/App/App.module.js"></script>
<script src="~/App/App.config.js"></script>
<script src="~/App/PDFController.js"></script>

Angular Module

You will need to include the module as a dependency on your application.

var summernote = angular.module('summernote', ['ui.router', 'summernote']);

If you have any doubt in configuration, visit the following of my articles

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report
• Learn MVC Using Angular Pie Chart
• Learn MVC Using Angular Flot Chart
• Learn MVC Using Angular xEditable
• Learn MVC Using Angular Idle
• Learn MVC Using Angular Wizard
• Learn MVC Using Angular - Maps
• Learn MVC Using Angular Bootstrap Nav Tree
• Learn MVC Using Angular Image Crop
• Learn MVC Using Angular UI Select
• Learn MVC Using Angular File Upload
• Learn MVC Using Angular UI Calender
• Learn MVC Using Angular PDF File Viewer

Work in Angular Summer Note

“summernote” is my angular module name .so I have added the “ng-app”

<div class="container body-content" ng-app="summernote">
        @RenderBody()
</div>

Html Code

<div class="panel panel-default" ng-controller="FormInputController" >

        <form method="get" action="/" novalidate="" class="form-horizontal">
            <fieldset>
                <div class="form-group">

                    <div class="col-sm-12">
                        <summernote ng-model="htmlContent" height="280"></summernote>

                        <summernote airmode="" ng-model="htmlContent" class="well reader-block"></summernote>
                    </div>
                </div>
            </fieldset>
        </form>
</div>

You can use summernote directive where you want to use summer note editor and when the scope is destroyed the directive will be destroyed

If you put markups in the directive, the markups used as initial text.

<summernote><span style="font-weight: bold;">This is initial text.</span></summernote>

 

Summer note’s options can be specified as attribute

Height

<summernote height="300"></summernote>

Focus

<summernote focus></summernote>

Angular Controller

Initiate the variable

angular

    .module(' summernote ')
    .controller('FormInputController', FormInputController);
function FormInputController($scope) {

    $scope.htmlContent = '<h2>Hi</h2><p> Your are in angular summer note session</p>';

}

Click F5 button and Run the Application. Now it will appear in the browser & see the result.

Output 1



Summer note is default editing also

Output 2



If you use the removeMedia button in popover, like below

<summernote airMode config="options" on-media-delete="mediaDelete(target)"></summernote>

Conclusion

 If you have any queries, please discuss with me via comments section.

Happy Coding!