0.16.4 • Published 4 years ago
@arkaghosh024/angular-editor v0.16.4
AngularEditor
A simple native wysiwyg editor for Angular 6+, 7+ forked from @kolkov/angular-editor https://www.npmjs.com/package/@kolkov/angular-editor This is a more limited version for personal use. Install from @kolkov's repository for the full featured version.
Demo
Demo is here demo
Working code for this demo at stackblitz example
Getting Started
Installation
Install via npm package manager
npm install @arkaghosh024/angular-editor --save
Usage
Import angular-editor
module
import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@arkaghosh024/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 '@arkaghosh024/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