Nucleus Powered Mitochondria

    ng-ck

    2.1.1 • Public • Published

    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.

    Install

    npm i ng-ck

    DownloadsWeekly Downloads

    91

    Version

    2.1.1

    License

    MIT

    Last publish

    Collaborators

    • jziggas