AngularJS - CK Editor

A simple, native and easy-to-use WYSIWYG / Rich Text editor built in AngularJS.

Table of contents

• Demo
• Getting started
• API
• Want to Contribute?
• Collection of Other Components
• Changelog
• Credits
• License
• Keywords

Demo

Getting Started

Installation

Install via npm package manager

npm install angular-weblineindia-ck-editor --save

Usage

Import angular-editor module

import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from 'angular-weblineindia-ck-editor';

@NgModule({
  imports: [ HttpClientModule, AngularEditorModule ]
})

Then in HTML

<angular-editor
  [placeholder]="'Enter text here...'"
  [(ngModel)]="htmlContent"
></angular-editor>

or for usage with reactive forms

<angular-editor
  formControlName="htmlContent"
  [config]="editorConfig"
></angular-editor>

if you using more than one editor on same page set id property

<angular-editor
  id="editor1"
  formControlName="htmlContent1"
  [config]="editorConfig"
></angular-editor>
<angular-editor
  id="editor2"
  formControlName="htmlContent2"
  [config]="editorConfig"
></angular-editor>

where

import { AngularEditorConfig } from "@kolkov/angular-editor";

editorConfig: AngularEditorConfig = {
  editable: true,
  spellcheck: true,
  height: "auto",
  minHeight: "0",
  maxHeight: "auto",
  width: "auto",
  minWidth: "0",
  translate: "yes",
  enableToolbar: true,
  showToolbar: true,
  placeholder: "Enter text here...",
  defaultParagraphSeparator: "",
  defaultFontName: "",
  defaultFontSize: "",
  fonts: [
    { class: "arial", name: "Arial" },
    { class: "times-new-roman", name: "Times New Roman" },
    { class: "calibri", name: "Calibri" },
    { class: "comic-sans-ms", name: "Comic Sans MS" }
  ],
  customClasses: [
    {
      name: "quote",
      class: "quote"
    },
    {
      name: "redText",
      class: "redText"
    },
    {
      name: "titleText",
      class: "titleText",
      tag: "h1"
    }
  ],
  uploadUrl: "v1/image",
  uploadWithCredentials: false,
  sanitize: true,
  toolbarPosition: "top",
  toolbarHiddenButtons: [["bold", "italic"], ["fontSize"]]
};

For ngModel to work, you must import FormsModule from @angular/forms, or for formControlName, you must import ReactiveFormsModule from @angular/forms

API

Inputs

| Input | Type | Default | Required | Description | | ----------- | --------------------- | ---------------- | -------- | -------------------------------------------------- | | id | string | - | no | Id property when multiple editor used on same page | | [config] | AngularEditorConfig | default config | no | config for the editor | | placeholder | string | - | no | Set custom placeholder for input area | | tabIndex | number | - | no | Set Set tabindex on angular-editor |

Outputs

| Output | Description | | ---------- | ----------------------------------------------- | | (html) | Output html | | (viewMode) | Fired when switched visual and html source mode | | (blur) | Fired when editor blur | | (focus) | Fired when editor focus |

Methods

| Name | Description | | ----- | -------------------------- | | focus | Focuses the editor element |

Other

| Name | Type | Description | | ------------------- | ------------- | ---------------------------------------------- | | AngularEditorConfig | configuration | Configuration for the AngularEditor component. |

Configuration

| Input | Type | Default | Required | Description | | ------------------------- | --------------- | ------- | -------- | ------------------------------------------------------------------- | | editable | bolean | true | no | Set editing enabled or not | | spellcheck | bolean | true | no | Set spellchecking enabled or not | | translate | sting | yes | no | Set translating enabled or not | | sanitize | bolean | true | no | Set DOM sanitizing enabled or not | | height | string | auto | no | Set height of the editor | | minHeight | string | 0 | no | Set minimum height of the editor | | maxHeight | string | auto | no | Set maximum height of the editor | | width | string | auto | no | Set width of the editor | | minWidth | string | 0 | no | Set minimum width of the editor | | enableToolbar | bolean | true | no | Set toolbar enabled or not | | showToolbar | bolean | true | no | Set toolbar visible or not | | toolbarPosition | string | top | no | Set toolbar position top or bottom | | placeholder | string | - | no | Set placeholder text | | defaultParagraphSeparator | string | - | no | Set default paragraph separator such as p | | defaultFontName | string | - | no | Set default font such as Comic Sans MS | | defaultFontSize | string | - | no | Set default font size such as 1 - 7 | | uploadUrl | string | - | no | Set image upload endpoint https://api.exapple.com/v1/image/upload | | uploadWithCredentials | bolean | false | no | Set passing or not credentials in the image upload call | | fonts | Font[] | - | no | Set array of available fonts [{name, class},...] | | customClasses | CustomClass[] | - | no | Set array of available fonts [{name, class, tag},...] | | outline | bolean | true | no | Set outline of the editor if in focus | | toolbarHiddenButtons | string[][] | - | no | Set of the array of button names or elements to hide |

toolbarHiddenButtons: [
  [
    "undo",
    "redo",
    "bold",
    "italic",
    "underline",
    "strikeThrough",
    "subscript",
    "superscript",
    "justifyLeft",
    "justifyCenter",
    "justifyRight",
    "justifyFull",
    "indent",
    "outdent",
    "insertUnorderedList",
    "insertOrderedList",
    "heading",
    "fontName"
  ],
  [
    "fontSize",
    "textColor",
    "backgroundColor",
    "customClasses",
    "link",
    "unlink",
    "insertImage",
    "insertVideo",
    "insertHorizontalRule",
    "removeFormat",
    "toggleEditorMode"
  ]
];

Want to Contribute?

• Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
• Fork it.
• Create new branch to contribute your changes.
• Commit all your changes to your branch.
• Submit a pull request.

Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

angular-weblineindia-ck-editor is inspired by @kolkov/angular-editor.

License

MIT

Keywords

angular-editor, angular-native-editor, angularjs-wysiwyg, ck-editor, angular-wysiwyg-editor, wysiwyg-editor, angularjs-rich-text-editor, rich-text-editor