Merge pull request #63 from osulyanov/master

Added Redactor II support

Author: Tyler Garlick

README.md

@@ -8,6 +8,7 @@ Angular Redactor is an angular directive for the Redactor editor.  http://impera
 Important Changes
 --------------
 
+There is an additional file (angular-redactor-2) for Redactor II.
 As of version 1.1.0, there is an additional file (angular-redactor-9.x) has been added to accommodate the the 9.x version of redactor, the angular-redactor.js will support the latest version of redactor.
 
 
@@ -37,6 +38,11 @@ With Options
 <textarea ng-model="content" redactor="{buttons: ['formatting', '|', 'bold', 'italic']}" cols="30" rows="10"></textarea>
 ```
 
+With Plugins
+```html
+<textarea ng-model="content" redactor="{plugins: ['source']}" cols="30" rows="10"></textarea>
+```
+
 You can pass options directly to Redactor by specifying them as the value of the `redactor` attribute.
 
 Global Options

angular-redactor-2.js

@@ -0,0 +1,62 @@
+(function() {
+    'use strict';
+
+    /**
+     * usage: <textarea ng-model="content" redactor></textarea>
+     *
+     *    additional options:
+     *      redactor: hash (pass in a redactor options hash)
+     *
+     */
+
+    var redactorOptions = {};
+
+    angular.module('angular-redactor', [])
+        .constant('redactorOptions', redactorOptions)
+        .directive('redactor', ['$timeout', function($timeout) {
+            return {
+                restrict: 'A',
+                require: 'ngModel',
+                link: function(scope, element, attrs, ngModel) {
+
+                    // Expose scope var with loaded state of Redactor
+                    scope.redactorLoaded = false;
+
+                    var updateModel = function updateModel(value) {
+                            // $timeout to avoid $digest collision
+                            $timeout(function() {
+                                scope.$apply(function() {
+                                    ngModel.$setViewValue(value);
+                                });
+                            });
+                        },
+                        options = {
+                            callbacks: {
+                                change: updateModel
+                            }
+                        },
+                        additionalOptions = attrs.redactor ?
+                            scope.$eval(attrs.redactor) : {},
+                        editor;
+
+                    angular.extend(options, redactorOptions, additionalOptions);
+
+                    // put in timeout to avoid $digest collision.  call render()
+                    // to set the initial value.
+                    $timeout(function() {
+                        editor = element.redactor(options);
+                        ngModel.$render();
+                    });
+
+                    ngModel.$render = function() {
+                        if(angular.isDefined(editor)) {
+                            $timeout(function() {
+                                element.redactor('code.set', ngModel.$viewValue || '');
+                                scope.redactorLoaded = true;
+                            });
+                        }
+                    };
+                }
+            };
+        }]);
+})();

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-redactor",
   "main": "angular-redactor.js",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "homepage": "https://github.com/TylerGarlick/angular-redactor",
   "authors": [
     "Tyler Garlick <[email protected]>"

demo/app.js

@@ -17,5 +17,5 @@ angular.module('app')
       $scope.changeContent = function () {
         $scope.content = "<h1>Some bogus content</h1>"
       }
-      $scope.content = "<p>This is my fawesome content</p>";
+      $scope.content = "<p>This is my awesome content</p>";
     }]);

demo/index.html

@@ -5,16 +5,17 @@
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
     <link rel="stylesheet" href="redactor/redactor.css"/>
     <script src="redactor/redactor.js"></script>
+    <script src="redactor/source.js"></script>
 </head>
 <body>
 <div class="container">
     <div ng-view></div>
 </div>
-<script src="../bower_components/angular/angular.js"></script>
-<script src="../bower_components/angular-route/angular-route.js"></script>
-<script src="../angular-redactor.js"></script>
+<script src="../angular-redactor-2.js"></script>
 <script src="app.js"></script>
 </body>
 </html>

demo/views/main.html

@@ -23,11 +23,11 @@ <h1>Demo</h1>
   <div class="panel-heading">Air Option</div>
   <div class="panel-body">
     <div class="form-group">
-      <textarea ng-model="content" redactor="{air: true}" cols="30" rows="10"></textarea>
+      <textarea ng-model="content" redactor="{air: true, plugins: ['source']}" cols="30" rows="10"></textarea>
     </div>
     <strong>Markup</strong>
     <pre>
-      &lt;textarea ng-model="content" redactor="{air: true}" cols="30" rows="10"&gt;&lt;/textarea&gt;
+      &lt;textarea ng-model="content" redactor="{air: true, plugins: ['source']}" cols="30" rows="10"&gt;&lt;/textarea&gt;
     </pre>
   </div>
 </div>