CKB Editor Angular

A 100% FREE, modern, feature-rich WYSIWYG text editor for Angular applications. No hidden charges, no license required, fully open for commercial use.

⚠️ Important Note on Package Naming

Package Name: ckb-editor-angular Component Name: TextEditorAvComponent Selector:

The component retains the name

TextEditorAvComponent from its original release as text-editor-av. The package was republished as ckb-editor-angular for better npm visibility. Always install ckb-editor-angular - it's the official and maintained version.

✅ Why Choose CKB Editor?

💯 100% FREE – No hidden charges, no premium version

📝 Full Commercial Use – No license required

🚀 Lightweight – Small bundle size, fast loading

🎨 Modern UI – Clean, intuitive interface

🔧 Easy Integration – Simple setup with Angular 12+

🌟 Feature Rich – Everything you need out of the box

Key Features

📄 Export to PDF/DOCX

📊 Tables Support

💻 Code Blocks with Syntax Highlighting

😊 Emoji Support

🌙 Dark Mode

💾 Auto-save Functionality

✔️ Spell Check

📱 Responsive Design

📦 Installation

Step 1: Install the Package

  npm install ckb-editor-angular --save
  

Step 2: Import the Module

Add TextEditorAvComponent to your module imports:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

// Import the Editor Component
import { TextEditorAvComponent } from 'ckb-editor-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    TextEditorAvComponent  // ✅ Add as standalone component
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Note: TextEditorAvComponent is a standalone component, so you import it directly in the imports array.

Step 3: Use in Your Component

Template (HTML)

<!-- app.component.html -->
<av-text-editor
  formControlName="content"
  placeholder="Write your content here..."
  [autoSaveEnabled]="false"
  [showStatusBar]="true"
  [spellcheck]="true"
  (contentChange)="onContentChange($event)">
</av-text-editor>

📌 Angular Compatibility

This package supports Angular 12+

👨‍💻 Author

Abhishek Rout