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
I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.WE are providing AngularJs training in Velachery.
ReplyDeleteFor more details:AngularJs training in Velachery
The post you wrote which is full of informative content. I Like it very much. Keep on posting!!
ReplyDeletePHP Training in Chennai
PHP Course in Chennai
Python Training in Chennai
Java Training in Chennai
Software Testing Training in Chennai
PHP Training in Annanagar
PHP Training in Tambaram
Wonderful post about recent updates....
ReplyDeleteHadoop Training in Chennai
Android Training in Chennai
Selenium Training in Chennai
Digital Marketing Course in Chennai
JAVA Training in Chennai
German Classes in chennai
java training in adyar
"Very good post!!! Thanks for sharing with us. It is more useful for us...
ReplyDeleteDigital Marketing Training Course in Chennai | Digital Marketing Training Course in Anna Nagar | Digital Marketing Training Course in OMR | Digital Marketing Training Course in Porur | Digital Marketing Training Course in Tambaram | Digital Marketing Training Course in Velachery
"
Nice blog, very interesting to read
ReplyDeleteDigital Marketing Training Course in Chennai | Digital Marketing Training Course in Anna Nagar | Digital Marketing Training Course in OMR | Digital Marketing Training Course in Porur | Digital Marketing Training Course in Tambaram | Digital Marketing Training Course in Velachery