angular1-ckeditor
v1.0.3
Published
CKEditor directive for Angular 1.
Downloads
17
Readme
angular-ckeditor
CKEditor directive for Angular.
Remove Bower (cf https://github.com/rars/angular-ckeditor)
Install
### Using NPM
```sh
npm install angular-ckeditor
Note : obviously this plugin expects the presence of AngularJS and CKEditor.
Usage
Example
HTML:
<!-- Load files. -->
<script src="angular.js"></script>
<script src="ckeditor.js"></script>
<script src="angular-ckeditor.js"></script>
<div ng-controller="CkeditorCtrl">
<div ckeditor="options" ng-model="content" ready="onReady()"></div>
</div>
JavaScript:
angular.module('controllers.ckeditor', ['ckeditor'])
.controller('CkeditorCtrl', ['$scope', function ($scope) {
// Editor options.
$scope.options = {
language: 'en',
allowedContent: true,
entities: false
};
// Called when the editor is completely ready.
$scope.onReady = function () {
// ...
};
}]);
"ckeditor" directive
- "ckeditor" editor options. Accepts an Object.
- "ng-model" bound scope variable.
- "ready" (optional) callback called when the editor is completely ready. Accepts an Angular expression.
- "contenteditable" (optional) if set to true, inline editing mode is enabled
IMPORTANT NOTICE
Angular-ckeditor uses ng-model
. If you add an ng-if
on the element to whom this directive is attached, changes in the editor won't be forwarded to your code anymore, due to the extra scope created by ng-if
. A solution is to explicitely bypass the extra scope : ng-model="$parent.model"
. See http://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if
Advanced usage
getting internal ckeditor instance
Internally, CKEditor gives a name to its instances, either the id of the element it's on or automatic name (editor1, editor2...). If you plan to look for your instances programmatically via CKEditor.istances
, be sure to give them a unique id="..." (Beware of re-usable directives).
In a directive on the same element, you can also use :
link: function (scope, element) {
var ckeditorController = element.controller('ckeditor'); // angular-ckeditor controller
var ckeditorInstance = ckeditorController.instance;
See also
You may find this other directive useful : https://github.com/lemonde/angular-ckeditor-placeholder
License
MIT
Contributing
- clone repo
- ensure your editor is decent and pick up the
.editorconfig
and.jshintrc
files npm install
npm test
- add tests, add features
grunt
(to generate minified version)- send a PR
Thanks !