Template HTML Preview is now editable

static/js/app/gophish.js

@@ -1,11 +1,5 @@
 var app = angular.module('gophish', ['ngTable', 'ngResource', 'ui.bootstrap']);
 
-app.filter('unsafe', function($sce) {
-    return function(val) {
-        return $sce.trustAsHtml(val);
-    };
-});
-
 app.factory('CampaignService', function($resource) {
     return $resource('/api/campaigns/:id?api_key=' + API_KEY, {
         id: "@id"
@@ -296,4 +290,37 @@ app.controller('TemplateCtrl', function($scope, TemplateService, ngTableParams)
             $scope.mainTableParams.reload();
         });
     }
-})
+})
+
+// Example provided by http://docs.angularjs.org/api/ng/type/ngModel.NgModelController
+app.directive('contenteditable', function() {
+    return {
+      restrict: 'A', // only activate on element attribute
+      require: '?ngModel', // get a hold of NgModelController
+      link: function(scope, element, attrs, ngModel) {
+        if(!ngModel) return; // do nothing if no ng-model
+ 
+        // Specify how UI should be updated
+        ngModel.$render = function() {
+          element.html(ngModel.$viewValue || '');
+        };
+ 
+        // Listen for change events to enable binding
+        element.on('blur keyup change', function() {
+          scope.$apply(read);
+        });
+        read(); // initialize
+ 
+        // Write data to the model
+        function read() {
+          var html = element.html();
+          // When we clear the content editable the browser leaves a <br> behind
+          // If strip-br attribute is provided then we strip this out
+          if( attrs.stripBr && html == '<br>' ) {
+            html = '';
+          }
+          ngModel.$setViewValue(html);
+        }
+      }
+    };
+  });

templates/templates.html

@@ -83,7 +83,7 @@
                         <div class="tab-pane" id="template_html">
                             <textarea rows="10" class="form-control" ng-model="template.html" placeholder="HTML"></textarea>
                         </div>
-                        <div class="tab-pane" id="template_preview" ng-bind-html="template.html | unsafe"></div>
+                        <div class="tab-pane" id="template_preview" ng-model="template.html" contenteditable></div>
                     </div>
                     <fieldset disabled>
                         <div class="form-group" style="margin-top:15px">