A simple native wysiwyg editor for Angular 6+
npm install angular-html-editorWorking code for this demo at stackblitz example
Install via [npm][npm] package manager
``bash`
npm install @raven/angular-editor --save
Import angular-editor module
`typescript
import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';
@NgModule({
imports: [ HttpClientModule, AngularEditorModule ]
})
`
Then in HTML
`html`
or for usage with reactive forms
`html`
if you using more than one editor on same page set id property
`html
`
where
`typescript
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`
[npm]: https://www.npmjs.com/
[demo]: https://angular-editor-wysiwyg.stackblitz.io/
[example]: https://stackblitz.com/edit/angular-editor-wysiwyg