TextEditor Angular Library

A standalone Angular WYSIWYG text editor with:

• Bold, Italic, Underline
• Text Alignment: Left, Center, Right, Justify
• Ordered & Unordered Lists
• Insert Table
• Insert Image
• Color Picker
• HTML View Toggle

Installation

Install via npm:

npm install @azarudeen-ahamed/text-editor

Usage (Standalone Component)
------------------------------------------------------------------
import { Component } from '@angular/core';
import { TextEditorComponent } from '@azarudeen-ahamed/text-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TextEditorComponent],
  template: `
    <h1>My Custom Editor</h1>
    <lib-text-editor [(content)]="htmlContent"></lib-text-editor>
    <hr>
    <h3>Preview:</h3>
    <div [innerHTML]="htmlContent"></div>
  `
})

Usage (NgModule)
------------------------------------------------------------------
export class AppComponent {
  htmlContent = '<p>Hello World!</p>';
}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TextEditorComponent } from '@azarudeen-ahamed/text-editor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, TextEditorComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Only needed if Angular complains about unknown elements
  bootstrap: [AppComponent]
})
export class AppModule {}

Example in HTML
------------------------------------------------------------------
<lib-text-editor [(content)]="myHtmlData"></lib-text-editor>
<div [innerHTML]="myHtmlData"></div>