Package Exports
- @atoze/angular-editor
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@atoze/angular-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
AngularEditor
A simple native wysiwyg editor for Angular 6+, 7+
Demo
Demo is here demo
Working code for this demo at stackblitz example
Getting Started
Installation
Install via npm package manager
npm install @kolkov/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