Angular Form Editor Module implement

     

A simple native WYSIWYG/Rich Text editor for Angular 6-17.
Step 1: Create an Angular application using the following command.

ng new angularEditor

Step 2: After creating your project folder i.e. angularEditor, move to it using the following command.

cd angularEditor

Creating Angular application & module installation:
Step 3: Install via npm package manager.

npm install @kolkov/angular-editor --save

Step 4: create mew component using the following command.

ng g c editor

Step 5: import angular-editor module
If you are using angular version <= 16 then use given code in module.ts file

import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';

@NgModule({
  imports: [ HttpClientModule, AngularEditorModule ]
})

If you are using angualr 17 then use given code in component.ts file

import { FormsModule } from '@angular/forms';
import { AngularEditorConfig, AngularEditorModule } from '@kolkov/angular-editor';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [HttpClientModule, AngularEditorModule, FormsModule],
  templateUrl: './editor.component.html',
  styleUrl: './editor.component.css'
})

Step 6: Go to html file and copy & paste given code.

<angular-editor [placeholder]='Enter text here ...' [(ngModel)]='htmlContent'></angular-editor>

or for usage with reactive forms

<angular-editor formControlName='htmlContent' [config]='editorConfig'></angular-editor>

of if you are using more than one editor on same page then set id property

<angular-editor formControlName='htmlContent1' [config]='editorConfig'></angular-editor>
<angular-editor formControlName='htmlContent2' [config]='editorConfig'></angular-editor>

Step 7: Go to ts file and copy & paste given code.

htmlContent : any ="";

or for usage with reactive forms

import { AngularEditorConfig } from '@kolkov/angular-editor';

editorConfig: AngularEditorConfig = {
    editable: true,
      spellcheck: true,
      height: 'auto',
      minHeight: '200px',
      maxHeight: 'auto',
      width: 'auto',
      minWidth: '0',
      translate: 'yes',
      enableToolbar: true,
      showToolbar: true,
      placeholder: 'Enter text here...',
      defaultParagraphSeparator: '',
      defaultFontName: '',
      defaultFontSize: '',
      fonts: [
        {class: 'arial', name: 'Arial'},
        {class: 'times-new-roman', name: 'Times New Roman'},
        {class: 'calibri', name: 'Calibri'},
        {class: 'comic-sans-ms', name: 'Comic Sans MS'}
      ],
      customClasses: [
      {
        name: 'quote',
        class: 'quote',
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: 'titleText',
        class: 'titleText',
        tag: 'h1',
      },
    ],
    uploadUrl: 'v1/image',
    uploadWithCredentials: false,
    sanitize: true,
    toolbarPosition: 'top',
    toolbarHiddenButtons: [
      [
        'undo',
        'redo',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'subscript',
        'superscript',
        'justifyLeft',
        'justifyCenter',
        'justifyRight',
        'justifyFull',
        'indent',
        'outdent',
        'insertUnorderedList',
        'insertOrderedList',
        'heading',
        'fontName'
      ],
      [
        'fontSize',
        'textColor',
        'backgroundColor',
        'customClasses',
        'link',
        'unlink',
        'insertImage',
        'insertVideo',
        'insertHorizontalRule',
        'removeFormat',
        'toggleEditorMode'
      ]
    ]
};

NOTE:- You can customize configuration for editorConfig.

Input Type Default Required Description
editable boolean true no Set editing enabled or not
spellcheck boolean true no Set spellchecking enabled or not
translate string yes no Set translating enabled or not
sanitize bolean true no Set DOM sanitizing enabled or not
height string auto no Set height of the editor
minHeight string 0 no Set minimum height of the editor
maxHeight string auto no Set maximum height of the editor
width string auto no Set width of the editor
minWidth string 0 no Set minimum width of the editor
enableToolbar bolean true no Set toolbar enabled or not
showToolbar bolean true no Set toolbar visible or not
toolbarPosition string top no Set toolbar position top or bottom
placeholder string – no Set placeholder text
defaultParagraphSeparator string – no Set default paragraph separator such as p
defaultFontName string – no Set default font such as Comic Sans MS
defaultFontSize string – no Set default font size such as 1 – 7
uploadUrl string – no Set image upload endpoint https://api.exapple.com/v1/image/upload and return response with imageUrl key. {“imageUrl” : }
upload function – no Set image upload function
uploadWithCredentials bolean false no Set passing or not credentials in the image upload call
fonts Font[] – no no Set array of available fonts [{name, class},…]
customClasses CustomClass[] – no Set array of available fonts [{name, class, tag},…]
outline bolean true no Set outline of the editor if in focus
toolbarHiddenButtons string[][] – no Set of the array of button names or elements to hide

toolbarHiddenButtons: [

  [
    'undo',
    'redo',
    'bold',
    'italic',
    'underline',
    'strikeThrough',
    'subscript',
    'superscript',
    'justifyLeft',
    'justifyCenter',
    'justifyRight',
    'justifyFull',
    'indent',
    'outdent',
    'insertUnorderedList',
    'insertOrderedList',
    'heading',
    'fontName'
  ],
  [
    'fontSize',
    'textColor',
    'backgroundColor',
    'customClasses',
    'link',
    'unlink',
    'insertImage',
    'insertVideo',
    'insertHorizontalRule',
    'removeFormat',
    'toggleEditorMode'
  ]
]
Step 8: Run your application using following command
ng serve

Run http://localhost:4200

Download Complete Code.

That’s all.