Post
Ask Question

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

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!


Similar Articles