|
1 | | -(function(window, angular, jQuery, undefined) { |
| 1 | +(function(window, angular, undefined) { |
2 | 2 | 'use strict'; |
3 | 3 |
|
4 | 4 | angular.module('froala', []) |
|
17 | 17 | froalaOptions: '=froala', |
18 | 18 | initFunction: '&froalaInit' |
19 | 19 | }; |
20 | | - |
| 20 | + |
21 | 21 | froalaConfig = froalaConfig || {}; |
22 | 22 |
|
23 | 23 | // Constants |
|
30 | 30 | require: 'ngModel', |
31 | 31 | scope: scope, |
32 | 32 | link: function(scope, element, attrs, ngModel) { |
33 | | - if (jQuery) element = jQuery(element); |
34 | | - |
| 33 | + // Create a blur event to update the data of ngModel |
| 34 | + element.on('blur', function () { |
| 35 | + ngModel.$setViewValue(element.innerHTML.text()) |
| 36 | + }); |
| 37 | + |
| 38 | + |
35 | 39 | var specialTag = false; |
36 | 40 | if (SPECIAL_TAGS.indexOf(element.prop("tagName").toLowerCase()) != -1) { |
37 | 41 | specialTag = true; |
|
77 | 81 | else { |
78 | 82 | if (ctrl.editorInitialized) { |
79 | 83 | // Set HTML. |
80 | | - element.froalaEditor('html.set', ngModel.$viewValue || '', true); |
81 | | - |
| 84 | + element.froalaEditor.html.set(ngModel.$viewValue || '') |
82 | 85 | //This will reset the undo stack everytime the model changes externally. Can we fix this? |
83 | | - element.froalaEditor('undo.reset'); |
84 | | - element.froalaEditor('undo.saveStep'); |
| 86 | + element.froalaEditor.undo.reset(); |
| 87 | + element.froalaEditor.undo.saveStep(); |
85 | 88 | } |
86 | 89 | } |
87 | 90 | }; |
|
91 | 94 | return true; |
92 | 95 | } |
93 | 96 |
|
94 | | - if (ctrl.editorInitialized) { |
95 | | - return element.froalaEditor('node.isEmpty', jQuery('<div>' + value + '</div>').get(0)); |
96 | | - } |
97 | | - |
98 | 97 | return true; |
99 | 98 | }; |
100 | 99 | }; |
|
105 | 104 | froalaInitOptions = (froalaInitOptions || {}); |
106 | 105 | ctrl.options = angular.extend({}, defaultConfig, froalaConfig, scope.froalaOptions, froalaInitOptions); |
107 | 106 |
|
108 | | - ctrl.registerEventsWithCallbacks('froalaEditor.initializationDelayed', function() { |
| 107 | + ctrl.registerEventsWithCallbacks('initializationDelayed', function() { |
109 | 108 | ngModel.$render() |
110 | 109 | }); |
111 | 110 |
|
112 | | - ctrl.registerEventsWithCallbacks('froalaEditor.initialized', function () { |
| 111 | + ctrl.registerEventsWithCallbacks('initialized', function () { |
113 | 112 | ctrl.editorInitialized = true; |
114 | 113 | ngModel.$render() |
115 | 114 | }) |
|
122 | 121 | } |
123 | 122 | } |
124 | 123 |
|
125 | | - element.innerHTML = |
126 | | - ctrl.froalaElement = element.froalaEditor(ctrl.options).data('froala.editor').$el; |
127 | | - ctrl.froalaEditor = angular.bind(element, element.froalaEditor); |
128 | | - ctrl.initListeners(); |
| 124 | + ctrl.froalaEditor = element.froalaEditor = new FroalaEditor('#'+element.attr('id'),ctrl.options); |
| 125 | + element.innerHTML = ctrl.froalaElement = ctrl.froalaEditor.$el[0]; |
| 126 | + ctrl.initListeners(); |
129 | 127 |
|
130 | 128 | //assign the froala instance to the options object to make methods available in parent scope |
131 | 129 | if (scope.froalaOptions) { |
|
136 | 134 |
|
137 | 135 | ctrl.initListeners = function() { |
138 | 136 | if (ctrl.options.immediateAngularModelUpdate) { |
139 | | - ctrl.froalaElement.on('froalaEditor.keyup', function() { |
| 137 | + ctrl.registerEventsWithCallbacks('keyup', function() { |
140 | 138 | scope.$evalAsync(ctrl.updateModelView); |
141 | 139 | }); |
142 | 140 | } |
143 | 141 |
|
144 | | - element.on('froalaEditor.contentChanged', function() { |
| 142 | + ctrl.registerEventsWithCallbacks('contentChanged', function() { |
145 | 143 | scope.$evalAsync(ctrl.updateModelView); |
146 | 144 | }); |
147 | 145 |
|
148 | 146 | element.bind('$destroy', function() { |
149 | 147 | if (element) { |
150 | | - element.froalaEditor('destroy'); |
| 148 | + element.froalaEditor.destroy(); |
151 | 149 | element = null; |
152 | 150 | } |
153 | 151 | }); |
|
176 | 174 | } |
177 | 175 | modelContent = attrs; |
178 | 176 | } else { |
179 | | - var returnedHtml = element.froalaEditor('html.get'); |
| 177 | + var returnedHtml = element.froalaEditor.html.get(); |
180 | 178 | if (angular.isString(returnedHtml)) { |
181 | 179 | modelContent = returnedHtml; |
182 | 180 | } |
|
191 | 189 | ctrl.registerEventsWithCallbacks = function(eventName, callback) { |
192 | 190 | if (eventName && callback) { |
193 | 191 | ctrl.listeningEvents.push(eventName); |
194 | | - element.on(eventName, callback); |
| 192 | + if(!ctrl.options.events){ |
| 193 | + ctrl.options.events = {}; |
| 194 | + } |
| 195 | + ctrl.options.events[eventName] = callback; |
195 | 196 | } |
196 | 197 | }; |
197 | 198 |
|
|
201 | 202 | initialize: ctrl.createEditor, |
202 | 203 | destroy: function() { |
203 | 204 | if (_ctrl.froalaEditor) { |
204 | | - _ctrl.froalaEditor('destroy'); |
| 205 | + _ctrl.froalaEditor.destroy(); |
205 | 206 | _ctrl.editorInitialized = false; |
206 | 207 | } |
207 | 208 | }, |
|
232 | 233 | } |
233 | 234 | }; |
234 | 235 | }]); |
235 | | -})(window, window.angular, window.jQuery); |
| 236 | +})(window, window.angular); |
0 commit comments