htmleditor-lib

AngularEditor

A simple native wysiwyg editor for Angular 6+

Getting Started

Installation

Install via [npm][npm] package manager

npm install htmleditor-lib

Usage

Import HTMLEditorLibModule

import { HttpClientModule} from '@angular/common/http';
import { HTMLEditorLibModule } from 'htmleditor-lib';
 
@NgModule({
  imports: [ HttpClientModule, HTMLEditorLibModule ]
})

Then in HTML

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

or for usage with reactive forms

<NgxMat-HTMLEditorLib formControlName="htmlContent" [config]="editorConfig">
</NgxMat-HTMLEditorLib>

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

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

where

import { AngularEditorConfig } from 'htmleditor-lib';
 
...
 
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",
      },
    ]
  };