diff --git a/README.md b/README.md index 2f1a8dc..4bca481 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +[![Stories in Ready](https://badge.waffle.io/TylerGarlick/angular-redactor.png?label=ready&title=Ready)](https://waffle.io/TylerGarlick/angular-redactor) angular-redactor ================ @@ -7,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. @@ -36,13 +38,18 @@ With Options ``` +With Plugins +```html + +``` + You can pass options directly to Redactor by specifying them as the value of the `redactor` attribute. Global Options ```js angular.module('app', ['angular-redactor']) .config(function(redactorOptions) { - redactorOptions.buttons = ['formatting', '|', 'bold', 'italic']; + redactorOptions.buttons = ['formatting', '|', 'bold', 'italic']; }); ``` @@ -56,3 +63,9 @@ Bower Installation ```js bower install angular-redactor ``` + +NPM Installation +-------------- +```js +npm install angular-redactor +``` diff --git a/angular-redactor-2.js b/angular-redactor-2.js new file mode 100644 index 0000000..5db78cb --- /dev/null +++ b/angular-redactor-2.js @@ -0,0 +1,62 @@ +(function() { + 'use strict'; + + /** + * usage: + * + * 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; + }); + } + }; + } + }; + }]); +})(); \ No newline at end of file diff --git a/angular-redactor-9.x.js b/angular-redactor-9.x.js index f73ffbc..fe6e0c3 100644 --- a/angular-redactor-9.x.js +++ b/angular-redactor-9.x.js @@ -35,8 +35,7 @@ }, additionalOptions = attrs.redactor ? scope.$eval(attrs.redactor) : {}, - editor, - $_element = angular.element(element); + editor; angular.extend(options, redactorOptions, additionalOptions); @@ -51,14 +50,14 @@ // put in timeout to avoid $digest collision. call render() to // set the initial value. $timeout(function() { - editor = $_element.redactor(options); + editor = element.redactor(options); ngModel.$render(); }); ngModel.$render = function() { if(angular.isDefined(editor)) { $timeout(function() { - $_element.redactor('set', ngModel.$viewValue || ''); + element.redactor('set', ngModel.$viewValue || ''); scope.redactorLoaded = true; }); } diff --git a/angular-redactor.js b/angular-redactor.js index e69b359..5a106ae 100644 --- a/angular-redactor.js +++ b/angular-redactor.js @@ -35,8 +35,7 @@ }, additionalOptions = attrs.redactor ? scope.$eval(attrs.redactor) : {}, - editor, - $_element = angular.element(element); + editor; angular.extend(options, redactorOptions, additionalOptions); @@ -52,15 +51,19 @@ // put in timeout to avoid $digest collision. call render() to // set the initial value. $timeout(function() { - editor = $_element.redactor(options); + editor = element.redactor(options); ngModel.$render(); + element.on('remove',function(){ + element.off('remove'); + element.redactor('core.destroy'); + }); }); ngModel.$render = function() { if(angular.isDefined(editor)) { $timeout(function() { - $_element.redactor('code.set', ngModel.$viewValue || ''); - $_element.redactor('placeholder.toggle'); + element.redactor('code.set', ngModel.$viewValue || ''); + element.redactor('placeholder.toggle'); scope.redactorLoaded = true; }); } diff --git a/bower.json b/bower.json index 577f21b..36ca378 100644 --- a/bower.json +++ b/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 " @@ -24,7 +24,7 @@ "tests" ], "dependencies": { - "jquery": ">=2.0.0", + "jquery": "^2.0.0 || ^1.9.0", "angular": ">=1.2.0" }, "devDependencies": { diff --git a/demo/app.js b/demo/app.js index 7194100..485de1a 100644 --- a/demo/app.js +++ b/demo/app.js @@ -17,5 +17,5 @@ angular.module('app') $scope.changeContent = function () { $scope.content = "

Some bogus content

" } - $scope.content = "

This is my fawesome content

"; + $scope.content = "

This is my awesome content

"; }]); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index de2af31..79ada0d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,16 +5,17 @@ + + +
- - - + \ No newline at end of file diff --git a/demo/views/main.html b/demo/views/main.html index 147210a..97b79de 100644 --- a/demo/views/main.html +++ b/demo/views/main.html @@ -23,11 +23,11 @@

Demo

Air Option
- +
Markup
-      <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>
     
diff --git a/package.json b/package.json new file mode 100644 index 0000000..3f30e30 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "angular-redactor", + "version": "1.1.7", + "description": "Directive for redactor WYSIWYG editor", + "main": "angular-redactor.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/TylerGarlick/angular-redactor.git" + }, + "keywords": [ + "Redactor", + "WYSIWYG", + "Angular", + "Directives", + "Html5", + "Editor" + ], + "author": [ + "Tyler Garlick " + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/TylerGarlick/angular-redactor/issues" + }, + "homepage": "https://github.com/TylerGarlick/angular-redactor#readme" +}