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.

MVC

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

MVC

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

MVC

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 -

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

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!