Native WYSIWYG Editor For Angular

Description:

A simple yet highly customizable native WYSIWYG editor for your next Angular applications.

Installation:

# NPM
$ npm install @kolkov/angular-editor --save

Import Modules:

import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';
@NgModule({
  imports: [ HttpClientModule, AngularEditorModule ]
})

Basic Usage:

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

Possible configurations:

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']
  ]
};

Preview: