Added froala-view directive to support displaying all froala features

Author: cgallarno

README.md

@@ -13,7 +13,6 @@ This repository contains bindings for the latest version of the Froala Editor (v
 
 3. Load Froala WYSIWYG editor (and all desired plugins), jQuery and the angular-froala files into your project
 	- src/angular-froala.js
-	- src/froala-sanitize.js
 
 ## Usage
 
@@ -105,9 +104,17 @@ The object received by the function will contain the following methods:
 
 Checkout the demo file to see a working example.
 
-###Displaying Html
+<!-- ### Displaying Html -->
 
-Using `ng-bind-html` will render your html on the page but the default angular-sanitize.js will strip out all style tags. Remedy this by including `froala-sanitize.js` instead. example: `<div class="fr-view" ng-bind-html="myHtml"></div>`
+![screenshot 2016-02-25 16 47 15](https://cloud.githubusercontent.com/assets/597735/13335505/774c0a76-dbdf-11e5-94c5-b0eb9c5b4923.png)
+
+To display content created with the froala editor use the froala-view directive.
+if `myHtml` is your model, then the following will render your content.
+```html
+	<div froala-view="myHtml"></div>
+```
+
+If you are using the old `ng-bind-html` that will continue to work however it still requires froala-sanitize.js to be use and not all of froala is supported with it. The update directive does __not__ require froala-sanitize.
 
 Congrats all is done!
 

demo/app.js

@@ -1,5 +1,5 @@
 	// add the module with global defaults for froala
-	var myApp = angular.module('myApp', ['ngSanitize', 'froala']).
+	var myApp = angular.module('myApp', ['froala']).
 	value('froalaConfig', {
 		toolbarInline: false,
 		placeholderText: 'Edit Your Content Here!'
@@ -14,7 +14,7 @@
 			toolbarInline: true,
 			events: {
 				'froalaEditor.initialized': function() {
-					console.log('initialized')
+					console.log('initialized');
 				}
 			}
 		};

demo/index.html

@@ -60,7 +60,6 @@
   <script src="../bower_components/angular/angular.min.js"></script>
 
   <script src="../src/froala-sanitize.js"></script>
-  <script src="../src/angular-froala.js"></script>
   <script src="app.js"></script>
   <link rel="stylesheet" href="app.css">
 </head>
@@ -77,7 +76,7 @@ <h2>Sample 1: Inline Edit</h2>
       <h2>Sample 2: Full Editor</h2>
       <textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
       <h4>Rendered Content:</h4>
-      <div class="fr-view" ng-bind-html="sample2Text"></div>
+      <div froala-view="sample2Text"></div>
     </div>
 
     <div class="sample">

src/angular-froala.js

@@ -1,6 +1,6 @@
 angular.module('froala', []).
-value('froalaConfig', {}).
-directive('froala', ['froalaConfig', function (froalaConfig) {
+value('froalaConfig', {})
+.directive('froala', ['froalaConfig', function (froalaConfig) {
     "use strict"; //Scope strict mode to only this directive
     var generatedIds = 0;
     var defaultConfig = { immediateAngularModelUpdate: false};
@@ -132,4 +132,21 @@ directive('froala', ['froalaConfig', function (froalaConfig) {
             ctrl.init();
         }
     };
+}])
+.directive('froalaView', ['$sce', function ($sce) {
+	return {
+		restrict: 'ACM',
+		scope: {
+			content: '=froalaView'
+		},
+		link: function (scope, element) {
+			element.addClass('fr-view');
+			scope.$watch('content', function (nv) {
+				if (nv || nv === ''){
+					var explicitlyTrustedValue = $sce.trustAsHtml(nv);
+					element.html(explicitlyTrustedValue.toString());
+				}
+			});
+		}
+	};
 }]);

test/angular-froala.spec.js

@@ -3,7 +3,9 @@ describe("froala", function () {
     var $compile;
     var $rootScope;
     var element = null;
+    var view = null;
     var elementHtml = null;
+    var viewHtml = null;
     var froalaEditorStub = null;
     var froalaEditorOnStub = null;
     var froalaEditorOffStub = null;
@@ -19,6 +21,7 @@ describe("froala", function () {
 
         froalaConfig.placeholderText = 'Placeholder';
         elementHtml = "<div froala='froalaOptions' ng-model='content'></div>";
+        viewHtml = "<div froala-view='content'></div>";
     }));
 
     var compileElement = function (extraSetup) {
@@ -31,6 +34,10 @@ describe("froala", function () {
         element = $compile(elementHtml)($rootScope);
     };
 
+    var compileViewElement = function () {
+    	view = $compile(viewHtml)($rootScope);
+    };
+
     var setupFroalaEditorStub = function () {
         froalaEditorStub = sinon.stub();
         froalaEditorOnStub = sinon.stub();
@@ -289,4 +296,13 @@ describe("froala", function () {
         //
 
     });
+
+		it('Sets the view to the value of the model', function () {
+				$rootScope.content = '<i>New Text</i>';
+
+				compileViewElement();
+				$rootScope.$digest();
+
+      	expect(view.html()).toEqual("<i>New Text</i>");
+		});
 });