Editors
NGX Editor Official link Preview link
Installation
npm install ngx-editor
ngx-editor.component.html
<ngx-editor [editor]="editor" [ngModel]="html" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
ngx-editor.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Editor, NgxEditorModule } from 'ngx-editor';
@Component({
selector: 'app-ngx-editor',
standalone: true,
imports: [CommonModule, FormsModule, NgxEditorModule],
templateUrl: './ngx-editor.component.html',
styleUrl: './ngx-editor.component.scss'
})
export class NgxEditorComponent {
public editor: Editor;
public html = '';
ngOnInit(): void {
this.editor = new Editor();
}
ngOnDestroy(): void {
this.editor.destroy();
}
}
Uninstalling Package
npm uninstall ngx-editor
MDE Editor Official link Preview link
Installation
npm i @kolkov/angular-editor
mde-editor.component.html
<angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></angular-editor>
mde-editor.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AngularEditorModule } from '@kolkov/angular-editor';
@Component({
selector: 'app-mde-editor',
standalone: true,
imports: [CommonModule, AngularEditorModule, FormsModule],
templateUrl: './mde-editor.component.html',
styleUrl: './mde-editor.component.scss'
})
export class MdeEditorComponent {
public htmlContent = '';
constructor() { }
ngOnInit(): void {
}
}
Uninstalling Package
npm uninstall @kolkov/angular-editor