Skip to content

Commit 5ab846e

Browse files
shashikantu7shashikantu7
committed
Revert "Fixed: 3049"
This reverts commit c5855c1.
1 parent c5855c1 commit 5ab846e

File tree

3 files changed

+166
-70
lines changed

3 files changed

+166
-70
lines changed

‎demo/app.js‎

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,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-
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+
});

‎demo/index.html‎

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

46
<head>
5-
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
6-
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js'></script>
7-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
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>
861
<script src="../src/angular-froala.js"></script>
9-
<script src="../src/froala-sanitize.js"></script>
1062
<script src="app.js"></script>
11-
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/4.4.1/css/bootstrap-combined.min.css">
63+
<link rel="stylesheet" href="app.css">
1264
</head>
1365

14-
<body>
15-
16-
<div ng-controller="ctrl1">
17-
<button ng-click="formOpen = !formOpen">toggle form</button>
66+
<!-- define angular controller -->
1867

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>
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>
2274

23-
<button type="submit"> submit </button>
24-
</form>
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>
2581

26-
<div>{{content.text}}</div>
27-
</div>
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>
89+
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>
28103

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>
29109
</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>
117+
</div>
118+
<h4>Model Obj:</h4>
119+
<div>{{linkModel}}</div>
120+
</div>
121+
30122
</body>
31123

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

‎src/angular-froala.js‎

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

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

0 commit comments

Comments
 (0)