Comment implémenter NgxEditor sur Angular

/
Solutions techniques
/
Comment implémenter NgxEditor sur Angular

Comment implémenter NgxEditor sur Angular

Angular, NgxEditor, Wysiwyg
Développement front-end

Installation NgxEditor

npm install ngx-editor --save
# or
yarn add ngx-editor

Sur le fichier app.module.ts ajouter ce code

import { NgxEditorModule } from 'ngx-editor';

@NgModule({
  imports: [NgxEditorModule],
})
export class AppModule {}

Composant HTML

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [ngModel]="html"
    [editable]="true"
    [placeholder]="Type here..."
  ></ngx-editor>
</div>

Composant Typescript

import { Editor, Toolbar } from 'ngx-editor';

export class EditorComponent implements OnInit, OnDestroy {
  editor: Editor;
  html: '';
  toolbar: Toolbar = [
    ["bold", "italic"],
    ["underline", "strike"],
    ["blockquote"],
    ["ordered_list", "bullet_list"],
    [{ heading: ["h5", "h6"]}],
    ["align_left", "align_justify"]
  ];

  ngOnInit(): void {
    this.editor = new Editor();
  }

  // make sure to destory the editor
  ngOnDestroy(): void {
    this.editor.destroy();
  }
}