A simple native wysiwyg editor for Angular 6+, 7+, adapted from @kolkov/angular-editor v0.13.1

Usage no npm install needed!

<script type="module">
  import sedlanAngularEdit from 'https://cdn.skypack.dev/@sedlan/angular-edit';



A simple native wysiwyg editor for Angular 6+, 7+


Demo is here demo

Working code for this demo at stackblitz example

Getting Started


Install via npm package manager

npm install @sedlan/angular-edit --save


Import angular-editor module

import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@sedlan/angular-edit';

  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>


import { AngularEditorConfig } from '@sedlan/angular-edit';


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