angular-html-editor

A simple native wysiwyg editor for Angular 6+

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-html-editor
0.11.24 years ago4 years agoMinified + gzip package size for angular-html-editor in KB

Readme

AngularEditor
A simple native wysiwyg editor for Angular 6+

Demo

Demo is here demodemo
Working code for this demo at stackblitz example

Getting Started

Installation

Install via npmnpm package manager
npm install @raven/angular-editor --save

Usage

Import angular-editor module
import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-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: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    uploadUrl: 'v1/images', // if needed
    customClasses: [ // optional
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: "titleText",
        class: "titleText",
        tag: "h1",
      },
    ]
  };

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