Learn MVC Using Angular Summernote

4 Min Read 272 Views

Introduction

This article demonstrates how to learn MVC using Angular Summernote in Visual Studio 2017.

Following are the steps you can use to create an Angular file upload in Angular in MVC:

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

Create MVC Project

Open the visual studio 2017.

MVC

Go to New menu >Click New and Project. Now it will open New Project Window.

MVC

You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in the “Solution name” text box and click OK.

MVC

One more window should appear. Select the MVC Template in this pop-up and click OK. Now start cropping the image.

Configure Angular Summernote

You can download the plugin from:

Open the _Layout.cshtml and refer the JavaScript file from our 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 name you have given it.

<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']);

Work in Angular Summernote

“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 the Summernote directive where you want to use the Summermote editor. Note that when the scope is destroyed the directive will be destroyed

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

<summernote><span style="font-weight: bold;">This is initial text.</span>
</summernote>
 Summernote’s options can be specified as attributes.

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 the F5 button and run the application. Now it will appear in the browser and you will see the result.

Output 1

MVC

Output 2

MVC

You will get the above result if you use the removeMedia button in popover, like below:

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

Conclusion

In this article, we have seen learned MVC using Summernote. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

Tags: