npm i ngx-editor
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { CommonModule } from "@angular/common"; import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; import { NgxEditorModule } from "ngx-editor"; @NgModule({ imports: [ CommonModule, BrowserModule, FormsModule, ReactiveFormsModule, NgxEditorModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core"; import { AbstractControl, FormControl, FormGroup } from "@angular/forms"; import { Editor } from "ngx-editor"; import jsonDoc from "./doc"; import plugins from "./plugins"; @Component({ selector: "app-root", templateUrl: "app.component.html", styleUrls: ["app.component.scss"], encapsulation: ViewEncapsulation.None }) export class AppComponent implements OnInit, OnDestroy { editordoc = jsonDoc; editor: Editor; form = new FormGroup({ editorContent: new FormControl(jsonDoc) }); get doc(): AbstractControl { return this.form.get("editorContent"); } ngOnInit(): void { this.editor = new Editor({ plugins, history: true, keyboardShortcuts: true, inputRules: true }); } ngOnDestroy(): void { this.editor.destroy(); } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <h2 class="title">Floating Menu</h2> <div class="content"> <form [formGroup]="form"> <div class="editor"> <ngx-editor [editor]="editor" formControlName="editorContent"> <ngx-editor-floating-menu [editor]="editor"></ngx-editor-floating-menu> </ngx-editor> </div> </form> </div> </div> |
FULL SOURCE CODE
