@aviraliitk/smart-editor

SmartEditor

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

Getting Started

Installation

Install via [npm][npm] package manager

npm install @aviraliitk/smart-editor --save

Usage

Import smart-editor module

import { HttpClientModule} from '@angular/common/http';
import { SmartEditorModule } from '@aviraliitk/smart-editor';

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

Then in HTML

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

or for usage with reactive forms

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

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

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

where

import { SmartEditorConfig } from '@aviraliitk/smart-editor';

...

editorConfig: SmartEditorConfig = {
    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