https://github.com/jziggas/ng-ck
An Angular 1 Component for CKEditor
https://github.com/jziggas/ng-ck
angular angularjs ckeditor ckeditor4 javascript rich-text rich-text-editor wysiwyg wysiwyg-editor
Last synced: 8 months ago
JSON representation
An Angular 1 Component for CKEditor
- Host: GitHub
- URL: https://github.com/jziggas/ng-ck
- Owner: jziggas
- License: mit
- Created: 2017-01-26T03:52:16.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-10T17:05:14.000Z (about 9 years ago)
- Last Synced: 2025-07-01T06:54:33.590Z (9 months ago)
- Topics: angular, angularjs, ckeditor, ckeditor4, javascript, rich-text, rich-text-editor, wysiwyg, wysiwyg-editor
- Language: JavaScript
- Size: 34.2 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ng-ck)
[](https://raw.githubusercontent.com/jziggas/ng-ck/master/LICENSE)
[](http://standardjs.com/)
[](https://travis-ci.org/jziggas/ng-ck)
# ng-ck
ng-ck is an Angular 1 Component wrapper for the WYSIWIG rich text editor CKEditor.
## Requirements
- Angular 1.6+
- CKEditor 4.6+
## Installation
via NPM:
`npm i ng-ck --save`
via Bower:
`bower install --save https://github.com/jziggas/ng-ck#`
## Usage
- Add ng-ck as a dependency to your app module (e.g. `angular.module('myApp', ['ngCk']);`)
- Add the directive to your template: ``
## Configuration
- A default set of toolbar options are provided by `ngCkConfigProvider` with editor buttons that are capable of passing through Angular's [$sanitize](https://docs.angularjs.org/api/ngSanitize/service/$sanitize) service.
- You can use `ngCkConfigProvider` to overwrite the default configuration object in an `app.config` block:
```
app.config(['ngCkConfigProvider', function(ngCkConfigProvider) {
let config = {
language: 'ru',
toolbar: ['Cut', 'Copy', 'Paste'],
removePlugins: 'elementspath'
}
// Use this to overwrite the default configuration object
ngCkConfigProvider.set(config)
// Or merge your own configuration object into the default configuration
ngCkConfigProvider.merge(config)
}])
```
- Or you can pass a configuration object, per instance of the editor, to overwrite the default configuration:
```
```
## Bindings
ng-ck has callback bindings available for all of the events that occur on an editor instance.
The callback attributes follow a format of `on-camel-cased-event="myCallback(event, editor)"` and return the event that occured as well as the editor object.
For example, the `'instanceReady'` event would be `on-instance-ready="myCallback(event, editor)"` and `'doubleclick'` would be `on-doubleclick=myCallback(event, editor)`
The list of events can be found at the [CKEDITOR.editor Documentation](http://docs.ckeditor.com/#!/api/CKEDITOR.editor)
The following attributes are also available:
- `checkTextLength: '`
- Validates ngModel against the length of text in the editor.
- Default `undefined`
- `config: ''`
- Configuration object passed to CKEditor. Overwrites the default configuration provided by `ngCkConfigProvider`.
- `maxLength: ''`
- Checks against the length of html in the editor. Can be configured to check the length of text instead via `checkTextLength`.
- Updates ngModel validity.
- Default `undefined`.
- `minLength: ''`
- Checks against the length of html in the editor. Can be configured to check the length of text instead via `checkTextLength`.
- Updates ngModel validity. Default `undefined`.
- `readOnly: ''`
- Sets the [readOnly](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) property of the editor. Default `undefined`.
- `required: ''`
- Updates ngModel validity. Default `undefined`.
- `onContentChanged: '&?'`
- CKEditor's `'change'` event gets triggered on a variety of actions that take place and not just when the content changes. This callback lets you know when a change in content has actually taken place.
- `on-content-changed="onContentChanged(editor, html, text)"`
## Contribution
- Pull requests welcome.
## Support
[](https://beerpay.io/jziggas/ng-ck)
[](https://beerpay.io/jziggas/ng-ck)