Skip to content
/ ng-ck Public

An Angular 1 Component for CKEditor

License

Notifications You must be signed in to change notification settings

jziggas/ng-ck

Repository files navigation

npm GitHub license Standard - JavaScript Style Guide Build Status

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#<RELEASE_VERSION>

Usage

  • Add ng-ck as a dependency to your app module (e.g. angular.module('myApp', ['ngCk']);)
  • Add the directive to your template: <ng-ck ng-model="content"></ng-ck>

Configuration

  • A default set of toolbar options are provided by ngCkConfigProvider with editor buttons that are capable of passing through Angular's $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:

    <ng-ck ng-model="content" config="myConfig"></ng-ck>
    

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

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

Beerpay Beerpay