Skip to content

Commit c5855c1

Browse files
shashikantu7shashikantu7
committed
Fixed: 3049
1 parent cf2e116 commit c5855c1

File tree

3 files changed

+70
-166
lines changed

3 files changed

+70
-166
lines changed

‎demo/app.js‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,45 @@
1-
// add the module with global defaults for froala
2-
var myApp = angular.module('myApp', ['froala']).
3-
value('froalaConfig', {
4-
toolbarInline: false,
5-
placeholderText: 'Edit Your Content Here!'
6-
});
7-
8-
// create the controller and inject Angular's $scope
9-
myApp.controller('mainController', function($scope) {
10-
11-
$scope.titleOptions = {
12-
placeholderText: 'Add a Title',
13-
charCounterCount: false,
14-
toolbarInline: true,
15-
events: {
16-
'contentChanged':function(e, editor) {
17-
console.log('content changed',$scope.titleOptions.froalaEditor.html.get());
18-
},
19-
'initialized': function(editor) {
20-
console.log('initialized', this);
21-
}
22-
}
23-
};
24-
25-
$scope.initialize = function(initControls) {
26-
$scope.initControls = initControls;
27-
$scope.deleteAll = function() {
28-
initControls.getEditor().html.set('34434');
29-
};
30-
};
31-
32-
$scope.myTitle = '<span style="font-family: Verdana,Geneva,sans-serif; font-size: 30px;">My Document\'s Title</span><span style="font-size: 18px;"></span></span>';
33-
$scope.sample2Text = '';
34-
$scope.sample3Text = 'Check out the <a href="https://www.froala.com/wysiwyg-editor">Froala Editor</a>';
35-
36-
$scope.imgModel = {src: 'image.jpg'};
37-
38-
$scope.buttonModel = {innerHTML: 'Click Me'};
39-
40-
$scope.inputModel = {placeholder: 'I am an input!'};
41-
$scope.inputOptions = {
42-
angularIgnoreAttrs: ['class', 'ng-model', 'id', 'froala']
43-
}
44-
45-
$scope.initializeLink = function(linkInitControls) {
46-
$scope.linkInitControls = linkInitControls;
47-
};
48-
$scope.linkModel = {href: 'https://www.froala.com/wysiwyg-editor'}
49-
50-
});
1+
var myApp = angular.module('app', ['froala']).value('froalaConfig', {
2+
placeholderText: 'Edit...',
3+
});
4+
5+
myApp.controller('ctrl1', function($scope, $locale) {
6+
$scope.formOpen = false;
7+
$scope.content = {text: null};
8+
9+
$scope.addContent = function (form) {
10+
console.log("submit");
11+
console.log($scope.content);
12+
console.log(form);
13+
14+
if (form) {
15+
form.$setPristine();
16+
form.$setUntouched();
17+
}
18+
$scope.content = angular.copy({});
19+
$scope.formOpen = false;
20+
}
21+
22+
23+
$scope.name = 'hello';
24+
25+
$scope.myHtml = '<h1>Hello World</h1>';
26+
27+
$scope.froalaOptions = {
28+
key: '<%=ConfigurationSettings.AppSettings["FroalaKey"]%>',
29+
enter: FroalaEditor.ENTER_BR,
30+
autofocus: true,
31+
attribution: false,
32+
quickInsertEnabled: false,
33+
immediateAngularModelUpdate: true,
34+
events: {
35+
'initialized': function () {
36+
console.log('init')
37+
},
38+
'destroy': function () {
39+
console.log('destroy')
40+
},
41+
42+
}
43+
};
44+
});
45+

‎demo/index.html‎

Lines changed: 19 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,32 @@
1-
<!DOCTYPE html>
2-
3-
<!-- define angular app -->
4-
<html ng-app="myApp">
1+
<!doctype html>
2+
<html ng-app="app">
53

64
<head>
7-
<meta charset="utf-8">
8-
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
9-
10-
<!-- Include Froala Editor styles -->
11-
<link rel="stylesheet" href="../node_modules/froala-editor/css/froala_editor.min.css" />
12-
<link rel="stylesheet" href="../node_modules/froala-editor/css/froala_style.min.css" />
13-
14-
<!-- Include Froala Editor Plugins styles -->
15-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/char_counter.css">
16-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/code_view.css">
17-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/colors.css">
18-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/emoticons.css">
19-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/file.css">
20-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/fullscreen.css">
21-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/image_manager.css">
22-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/image.css">
23-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/line_breaker.css">
24-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/table.css">
25-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/video.css">
26-
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/special_characters.css">
27-
<link rel="stylesheet" href="../node_modules/froala-editor/css/third_party/font_awesome.min.css">
28-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
29-
30-
<!-- Include Froala Editor -->
31-
<script src="../node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>
32-
33-
<!-- Include Froala Editor Plugins -->
34-
<script src="../node_modules/froala-editor/js/plugins/align.min.js"></script>
35-
<script src="../node_modules/froala-editor/js/plugins/char_counter.min.js"></script>
36-
<script src="../node_modules/froala-editor/js/plugins/code_beautifier.min.js"></script>
37-
<script src="../node_modules/froala-editor/js/plugins/code_view.min.js"></script>
38-
<script src="../node_modules/froala-editor/js/plugins/colors.min.js"></script>
39-
<script src="../node_modules/froala-editor/js/plugins/emoticons.min.js"></script>
40-
<script src="../node_modules/froala-editor/js/plugins/entities.min.js"></script>
41-
<script src="../node_modules/froala-editor/js/plugins/file.min.js"></script>
42-
<script src="../node_modules/froala-editor/js/plugins/font_family.min.js"></script>
43-
<script src="../node_modules/froala-editor/js/plugins/font_size.min.js"></script>
44-
<script src="../node_modules/froala-editor/js/third_party/font_awesome.min.js"></script>
45-
<script src="../node_modules/froala-editor/js/plugins/fullscreen.min.js"></script>
46-
<script src="../node_modules/froala-editor/js/plugins/image.min.js"></script>
47-
<script src="../node_modules/froala-editor/js/plugins/image_manager.min.js"></script>
48-
<script src="../node_modules/froala-editor/js/plugins/inline_style.min.js"></script>
49-
<script src="../node_modules/froala-editor/js/plugins/line_breaker.min.js"></script>
50-
<script src="../node_modules/froala-editor/js/plugins/link.min.js"></script>
51-
<script src="../node_modules/froala-editor/js/plugins/lists.min.js"></script>
52-
<script src="../node_modules/froala-editor/js/plugins/paragraph_format.min.js"></script>
53-
<script src="../node_modules/froala-editor/js/plugins/paragraph_style.min.js"></script>
54-
<script src="../node_modules/froala-editor/js/plugins/quote.min.js"></script>
55-
<script src="../node_modules/froala-editor/js/plugins/save.min.js"></script>
56-
<script src="../node_modules/froala-editor/js/plugins/table.min.js"></script>
57-
<script src="../node_modules/froala-editor/js/plugins/video.min.js"></script>
58-
<!-- End Froala -->
59-
60-
<script src="../bower_components/angular/angular.min.js"></script>
5+
<link href='https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
6+
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/js/froala_editor.pkgd.min.js'></script>
7+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
618
<script src="../src/angular-froala.js"></script>
9+
<script src="../src/froala-sanitize.js"></script>
6210
<script src="app.js"></script>
63-
<link rel="stylesheet" href="app.css">
11+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/4.4.1/css/bootstrap-combined.min.css">
6412
</head>
6513

66-
<!-- define angular controller -->
67-
68-
<body ng-controller="mainController">
69-
<h1>Angular adapter for the Froala WYSIWYG editor</h1>
70-
<div class="sample">
71-
<h2>Sample 1: Inline Edit</h2>
72-
<div froala="titleOptions" ng-model="myTitle"></div>
73-
</div>
74-
75-
<div class="sample">
76-
<h2>Sample 2: Full Editor</h2>
77-
<textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
78-
<h4>Rendered Content:</h4>
79-
<div froala-view="sample2Text"></div>
80-
</div>
14+
<body>
15+
16+
<div ng-controller="ctrl1">
17+
<button ng-click="formOpen = !formOpen">toggle form</button>
8118

82-
<div class="sample">
83-
<h2>Sample 3: Manual Initialization</h2>
84-
<button class="manual" ng-click="initControls.initialize()">Initialize Editor</button>
85-
<button ng-click="initControls.destroy()" ng-show="initControls.getEditor() != null">Close Editor</button>
86-
<button ng-click="deleteAll()" ng-show="initControls.getEditor() != null">Delete All</button>
87-
<div id="froala-sample-3" froala froala-init="initialize(initControls)" ng-model="sample3Text"></div>
88-
</div>
19+
<div ng-if="formOpen">
20+
<form name="form" class="css-form" novalidate enctype="multipart/form-data" ng-submit="addContent(form)">
21+
<textarea froala="froalaOptions" ng-model="content.text"></textarea>
8922

90-
<div class="sample">
91-
<h2>Sample 4: Editor on 'img' tag</h2>
92-
<img froala ng-model="imgModel" />
93-
<h4>Model Obj:</h4>
94-
<div>{{imgModel}}</div>
95-
</div>
96-
97-
<div class="sample">
98-
<h2>Sample 5: Editor on 'button' tag</h2>
99-
<button froala ng-model="buttonModel"></button>
100-
<h4>Model Obj:</h4>
101-
<div>{{buttonModel}}</div>
102-
</div>
23+
<button type="submit"> submit </button>
24+
</form>
10325

104-
<div class="sample">
105-
<h2>Sample 6: Editor on 'input' tag</h2>
106-
<input froala="inputOptions" ng-model="inputModel" />
107-
<h4>Model Obj:</h4>
108-
<div>{{inputModel}}</div>
109-
</div>
110-
111-
<div class="sample">
112-
<h2>Sample 7: Editor on 'a' tag. Manual Initialization</h2>
113-
<button class="manual" ng-click="linkInitControls.initialize()">Initialize Editor</button>
114-
<button ng-click="linkInitControls.destroy()" ng-show="linkInitControls.getEditor() != null">Close Editor</button>
115-
<div>
116-
<a froala froala-init="initializeLink(initControls)" ng-model="linkModel">Froala Editor</a>
26+
<div>{{content.text}}</div>
11727
</div>
118-
<h4>Model Obj:</h4>
119-
<div>{{linkModel}}</div>
120-
</div>
12128

29+
</div>
12230
</body>
12331

124-
</html>
32+
</html>

‎src/angular-froala.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,12 @@
149149
}
150150
}
151151

152-
element.bind('$destroy', function() {
153-
if (element) {
154-
ctrl.froalaEditor.destroy();
155-
element = null;
156-
}
152+
if (!element) {
153+
return;
154+
}
155+
element.bind('$destroy', function () {
156+
ctrl.froalaEditor.destroy();
157+
element = null;
157158
});
158159
};
159160

0 commit comments

Comments
 (0)