Use ngx-simple-text-editor in Angular 18

In this walk, you will learn how to implement and configure ngx-simple-text-editor in Angular 18. Ngx-simple-text-editor is very lightweight compared to some other text editors.

A text editor is a commonly required tool for any web project. We are going to configure and implement ngx-simple-text-editor.

Please refer following link: https://www.npmjs.com/package/ngx-simple-text-editor?activeTab=readme

ngx-simple-text-editor is a free open source text editor which has the following features.

Ngx-simple-text

Undo
Redo
Remove Format
Bold
Italics
Underline
Strikethrough
Left align
Center align
Right align
Ordered List
Unordered List
Indent
Outdent
Subscript
Superscript
Font Size
Create Link
Unlink
Add Image
Font Colour

First Create Project called text editor.

Text editor

To Open a project.

Command

CD TEXTEDITOR <enter>
CODE. <enter>

Example

Example

Switch back to the command window to install the CKEditor plugin.

Command

npm install ngx-simple-text-editor

Example

CMD

Now, we are going to configure ngx-simple-text-editor in the app.component.

Open the app.component.ts file to update with the following code.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgxSimpleTextEditorModule } from 'ngx-simple-text-editor';
import { EditorConfig, ST_BUTTONS } from 'ngx-simple-text-editor';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgxSimpleTextEditorModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'texteditor';
  content = '';

  config: EditorConfig = {
    placeholder: 'Type something...',
    buttons: ST_BUTTONS,
  };

  subbtn() {
    alert(this.content);
  }
}

Open the app.component.html file, remove the existing code, and update with the following code.

<st-editor [(ngModel)]="content" [config]="config"></st-editor>
<button type="submit" (click)="subbtn()">Submit</button>
<router-outlet></router-outlet>
<p style="width: 300px;">{{ content }}</p>

Now add CSS file reference in the Angular.json file under the architectàbuildàstyles section.

"node_modules/@fortawesome/fontawesome-free/css/all.css"

Refer to the following image.

Refer img

Now, run the project with the following command.

ng serve --open

Output

Full HTML code of the above output.

<div><br></div>

<div><b><font size="6">Hello,</font></b></div>

<div>
  <font size="6"><b>Underline:</b>& </font>
  <u style="font-size: xx-large;">How are you?</u>
  <br>
</div>

<div>
  <b style="font-size: xx-large;"><strike>Line not required</strike></b>
  <br>
</div>

<div>
  <span style="font-size: xx-large;">Left Align Text</span>
  <br>
</div>

<div style="text-align: center;">
  <font size="6">Center Align Text</font>
</div>

<div style="text-align: right;">
  <font size="6">Right Align Text</font>
</div>

<div>
  <b style="font-size: xx-large;">Subscript: </b>
  <span style="font-size: xx-large;">H</span>
  <sub>2</sub>
  <span style="font-size: xx-large;">O</span>
  <br>
</div>

<div>
  <font size="6">
    <b>Superscript: </b>30<sup>th</sup> July 2024
  </font>
</div>

<div>
  <b><font size="6">Display Image:</font></b>
  <br>
</div>

<div>
  <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31">
  <font size="6"><br></font>
</div>

<div><br></div>

<div><b><font size="6">Link:</font></b></div>

<div>
  <a href="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31">
    <font size="6">https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31</font>
  </a>
  <br>
</div>

Now above code, you can send to api / database table after encoding.

ngx-simple text-editor implemented successfully.

Happy coding!