cky-editor

A rich text editor for Angular 21 with a full document toolbar, editable tables, media embeds, find and replace, and Word/PDF export. It has no runtime dependencies beyond Angular and works with both template-driven and reactive forms.

Contents

• Features
• Requirements
• Installation
• Quick start
• API
• Theming
• Displaying saved content
• Keyboard shortcuts
• Security
• Browser support
• Development
• Changelog
• License

Features

Document

• Undo and redo (100 steps)
• HTML source view and read-only preview
• Import from .html, .txt and HTML-based .doc files
• Export to Word (.doc) and PDF, and print

Text formatting

• Headings H1 to H6, inline and block styles
• Font family, font size, font color and highlight
• Bold, italic, underline, strikethrough, superscript and subscript
• Change case (upper, lower, title), format painter, remove formatting

Paragraphs and lists

• Alignment, line height, indent and outdent
• Block quotes and code blocks
• Bulleted lists (disc, circle, square), numbered lists (decimal, alphabetic, roman), multi-level lists and to-do checklists

Tables

• Grid picker up to 10 x 10
• Insert rows above or below and columns left or right
• Toggle a header row; delete a row, column or the whole table
• Tab / Shift+Tab to move between cells

Insert

• Links, bookmarks, images (upload, paste or URL) and file attachments
• YouTube, Vimeo and MP4/WebM media
• Page breaks, horizontal lines, emoji and special characters
• Multi-column layouts and ready-made templates

Editing experience

• Find and replace with highlighted matches
• Clean paste from Microsoft Word and Google Docs
• Full-screen mode and a live word and character count

Requirements

| Package | Version | |---------|---------| | @angular/core, @angular/common, @angular/forms, @angular/platform-browser | ^21.0.0 |

Installation

npm install cky-editor

Quick start

Standalone component

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CkyEditorComponent } from 'cky-editor';

@Component({
  selector: 'app-article-form',
  imports: [FormsModule, CkyEditorComponent],
  template: `<cky-editor [(ngModel)]="content" />`,
})
export class ArticleFormComponent {
  content = '<p>Hello, world.</p>';
}

NgModule

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CkyEditorModule } from 'cky-editor';

@NgModule({
  imports: [FormsModule, CkyEditorModule],
})
export class ArticlesModule {}

Reactive forms

form = new FormGroup({
  description: new FormControl(''),
});

<form [formGroup]="form">
  <cky-editor formControlName="description" placeholder="Describe the role" />
</form>

Disabling the form control (form.controls.description.disable()) makes the editor read-only.

API

Selector

cky-editor

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | placeholder | string | 'Type or paste your content here…' | Text shown while the editor is empty | | minHeight | number | 260 | Minimum height of the editing area, in pixels | | documentTitle | string | 'document' | File name and title used by Word export, PDF export and print |

Value

The editor implements ControlValueAccessor. Its value is an HTML string; an empty editor reports ''.

Methods

Available through @ViewChild(CkyEditorComponent).

| Method | Description | |--------|-------------| | undo() / redo() | Step backward or forward through the edit history | | insertHtml(html: string) | Insert HTML at the caret | | insertText(text: string) | Insert plain text at the caret | | exportToWord() | Download the content as a .doc file | | exportToPDF() | Open the print dialog to save as PDF | | printContent() | Print the content | | toggleFullscreen() | Enter or leave full-screen mode |

Theming

The editor is styled through CSS custom properties. Override them on the editor element:

cky-editor .cky-editor {
  --cky-accent: #00bfa6;
  --cky-accent-soft: #e0f7f4;
  --cky-border: #ced4da;
  --cky-radius: 8px;
}

| Property | Default | Used for | |----------|---------|----------| | --cky-accent | #2563eb | Active buttons, links, focus rings, primary actions | | --cky-accent-soft | #e8efff | Active button and selected item backgrounds | | --cky-border | #ccced1 | Outer border, toolbar and input borders | | --cky-border-soft | #e4e6e9 | Dividers | | --cky-text | #1f2328 | Text and icons | | --cky-muted | #6b7280 | Secondary text | | --cky-hover | #f0f1f3 | Hover backgrounds | | --cky-surface | #ffffff | Editor and menu backgrounds | | --cky-toolbar | #fafafa | Toolbar and status bar background | | --cky-radius | 6px | Corner radius |

Displaying saved content

Tables, to-do lists, layouts and text styles use cky-* classes. Add the cky-content class to the element that renders saved HTML so it matches the editor:

<article class="cky-content" [innerHTML]="job.description"></article>

The stylesheet is registered when the editor component is loaded. On pages that render content without ever loading the editor, import the component once or copy the .cky-content rules into your global styles.

Angular's [innerHTML] binding removes inline style attributes, so font family, font size, colors, line height and alignment are dropped. To keep them, sanitize the HTML on your server and bind it with DomSanitizer.bypassSecurityTrustHtml.

Keyboard shortcuts

| Shortcut | Action | |----------|--------| | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Y, Ctrl/Cmd + Shift + Z | Redo | | Ctrl/Cmd + B, I, U | Bold, italic, underline | | Ctrl/Cmd + K | Insert or edit a link | | Ctrl/Cmd + F | Find and replace | | Tab, Shift + Tab | Next or previous table cell; indent or outdent a list item | | Esc | Leave full-screen mode |

Security

HTML that enters the editor through paste, file import or the source view is sanitized: scripts, styles, forms, event handler attributes, javascript: URLs and iframes from hosts other than YouTube and Vimeo are removed. Links opened in a new tab get rel="noopener noreferrer".

This protects the editing session only. Always sanitize submitted HTML on the server before storing or displaying it.

Browser support

The latest two versions of Chrome, Edge, Firefox and Safari. Match highlighting in find and replace uses the CSS Custom Highlight API and falls back to selecting the current match where it is unavailable.

Development

git clone https://github.com/developerchandan/cky-editor.git
cd cky-editor
npm install
npm run build          # outputs to dist/cky-editor

A demo application in demo/ consumes the built package the same way an npm user would:

cd demo
npm install
npm start              # http://localhost:4200

Rebuild the library (npm run build in the repository root) to see library changes in the demo.

Contributing

1. Fork the repository and create a branch from main.
2. Make your change and confirm npm run build succeeds.
3. Verify the change in the demo application.
4. Open a pull request describing the change and how you tested it.

Report bugs and request features through GitHub Issues.

Changelog

3.0.1

• Headings, lists, bold and links keep their styling in apps that use a CSS reset (such as Tailwind preflight)
• Choosing a font family or size with no text selected now applies it to the text you type next
• The published package contains only the build output, README and license

3.0.0

• Redesigned two-row toolbar with an SVG icon set; Font Awesome is no longer required
• Table editing: insert and delete rows and columns, header row toggle, cell navigation with Tab
• Added find and replace, format painter, change case, font family, superscript and subscript, bookmarks, file attachments, media embeds, code blocks, page breaks, emoji, special characters, layouts, templates, line height, list styles, multi-level and to-do lists, preview, import and full-screen mode
• Paste cleanup for Word and Google Docs; sanitization of pasted, imported and source-edited HTML
• Each toolbar action is a separate undo step
• The editor is now a standalone component; CkyEditorModule is still exported

Breaking changes

• The component selector is now <cky-editor> (previously <lib-cky-editor>)
• Removed CkyEditorService
• Removed the @fortawesome/fontawesome-free peer dependency
• Added @angular/platform-browser as a peer dependency

2.0.0

• Upgraded to Angular 21
• Added undo and redo, Word and PDF export, print and a word counter

1.0.0

• Initial release for Angular 16

License

MIT © Chandan Kumar