Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Redactor II support #63

Merged
merged 1 commit into from
Feb 24, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.


Expand Down Expand Up @@ -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
Expand Down
62 changes: 62 additions & 0 deletions angular-redactor-2.js
Original file line number Diff line number Diff line change
@@ -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);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come you removed the code that keeps the custom callback function that you can pass in on initialization? It would also have to be updated with redactor's new callback structure, but here's the updated code.

// prevent collision with the constant values on callbacks.change
var callbacks = additionalOptions.callbacks || redactorOptions.callbacks;
if (callbacks && callbacks.change) {
    options = {
        callbacks: {
          change: function(value) {
              updateModel.call(this, value);
              callbacks.change.call(this, value);
          }
        }
    }
}

// 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;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing the code that hides the placeholder. The new method in redactor is placeholder.hide

});
}
};
}
};
}]);
})();
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -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 <tjgarlick@gmail.com>"
Expand Down
2 changes: 1 addition & 1 deletion demo/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>";
}]);
7 changes: 4 additions & 3 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions demo/views/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>