https://github.com/ChauhanShubham8758/ngx-pro-editor
ngx-pro-editor
https://github.com/ChauhanShubham8758/ngx-pro-editor
Last synced: 10 days ago
JSON representation
ngx-pro-editor
- Host: GitHub
- URL: https://github.com/ChauhanShubham8758/ngx-pro-editor
- Owner: ChauhanShubham8758
- Created: 2026-05-19T17:46:29.000Z (23 days ago)
- Default Branch: main
- Last Pushed: 2026-05-19T18:18:33.000Z (23 days ago)
- Last Synced: 2026-05-19T21:20:51.748Z (23 days ago)
- Language: TypeScript
- Size: 112 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-NPM.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-pro-editor - A feature-rich WYSIWYG editor for Angular with auto-save, special characters, and advanced formatting. (Third Party Components / Editors)
- awesome-angular - ngx-pro-editor - A feature-rich WYSIWYG editor for Angular with auto-save, special characters, and advanced formatting. (Third Party Components / Editors)
README
# NGX Pro Editor
**A powerful, feature-rich WYSIWYG editor for Angular applications**
[GitHub](https://github.com/ChauhanShubham8758/ngx-pro-editor) โข [Report Bug](https://github.com/ChauhanShubham8758/ngx-pro-editor/issues)
---
## โจ Features
### ๐ Rich Text Editing
- **Text Formatting**: Bold, Italic, Underline, Strikethrough, Superscript, Subscript
- **Fonts**: 12 font families with live preview
- **Font Sizes**: 18 sizes from 8px to 72px
- **Colors**: 60+ text colors and 32+ highlight colors
- **Alignment**: Left, Center, Right, Justify
- **Lists**: Bullet lists, Numbered lists, Indent/Outdent
### ๐จ Advanced Formatting
- **Line Spacing**: 6 preset options (1.0, 1.15, 1.5, 2.0, 2.5, 3.0)
- **Letter Spacing**: 5 spacing options from Tight to Widest
- **Text Transform**: UPPERCASE, lowercase, Capitalize
- **Text Shadows**: 5 shadow effects with live preview
- **Block Formats**: Headings (H1-H6), Blockquote, Code Block
### ๐ผ๏ธ Media & Content
- **Images**: Upload, resize with drag handles, position control
- **Links**: Insert/edit with new tab option
- **Tables**: Create, edit, add/delete rows/columns, styling options
- **File Attachments**: Upload and attach files with icons
- **Horizontal Rules**: Insert dividers
### ๐ค Special Characters
- **200+ Characters** organized in categories:
- Symbols: ยฉ, ยฎ, โข, ยง, ยถ, โ , โก, โข, arrows, checkmarks, stars
- Emojis: ๐ ๐ ๐ โค๏ธ โญ ๐ฅ and 90+ more
- Math: ฮฑ, ฮฒ, ฯ, ฮฃ, โซ, โ, โ, โ , โ
- Currency: $, โฌ, ยฃ, ยฅ, โน, โฟ
### ๐พ Auto-Save
- Automatic saving to localStorage
- Configurable save intervals
- Draft recovery on page reload
- Visual save indicator
### ๐ฑ Responsive Preview
- **Mobile Preview** (375px)
- **Tablet Preview** (768px)
- **Desktop Preview** (1200px)
- Live content preview in device frames
### ๐ค Export Options
- **Print**: Direct print with formatted output
- **Print Preview**: Preview before printing
- **Export to PDF**: Browser's print-to-PDF functionality
### ๐ Find & Replace
- Case-sensitive search
- Regular expression support
- Find next/previous
- Replace single or all occurrences
### โจ๏ธ Keyboard Shortcuts
- `Ctrl+B`: Bold
- `Ctrl+I`: Italic
- `Ctrl+U`: Underline
- `Ctrl+Z`: Undo
- `Ctrl+Y`: Redo
- `Ctrl+F`: Find & Replace
### ๐จ Themes
- Dark theme (default)
- Light theme
- Customizable via CSS variables
---
## ๐ฆ Installation
```bash
npm install ngx-pro-editor
```
### Required Dependencies
Add Material Icons to your `index.html`:
```html
```
---
## ๐ Quick Start
### Basic Usage
```typescript
import { Component } from '@angular/core';
import { NgxProEditorComponent } from 'ngx-pro-editor';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgxProEditorComponent],
template: `
`
})
export class AppComponent {
editorConfig = {
placeholder: 'Start typing...',
minHeight: 400,
autoSave: true,
theme: 'dark'
};
onSave(html: string) {
console.log('Content saved:', html);
}
onContentChange(html: string) {
console.log('Content changed:', html);
}
}
```
### With Auto-Save
```typescript
editorConfig = {
placeholder: 'Write your content...',
minHeight: 500,
autoSave: true,
autoSaveInterval: 30000, // Save every 30 seconds
autoSaveKey: 'my-editor-draft',
theme: 'dark'
};
```
### With Image Upload
```typescript
editorConfig = {
placeholder: 'Start typing...',
minHeight: 400,
imageUploadHandler: async (file: File) => {
const formData = new FormData();
formData.append('image', file);
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
const data = await response.json();
return data.url; // Return image URL
},
maxImageSize: 5 * 1024 * 1024 // 5MB
};
```
---
## โ๏ธ Configuration
### EditorConfig Interface
```typescript
interface EditorConfig {
// Basic Settings
placeholder?: string; // Default: 'Start typing...'
minHeight?: number; // Default: 400
maxHeight?: number; // Optional
initialContent?: string; // Initial HTML content
autoFocus?: boolean; // Default: false
spellcheck?: boolean; // Default: true
theme?: 'dark' | 'light'; // Default: 'dark'
// Auto-Save
autoSave?: boolean; // Default: false
autoSaveInterval?: number; // Default: 30000 (30 seconds)
autoSaveKey?: string; // Default: 'ngx-pro-editor-autosave'
// Image Upload
imageUploadHandler?: (file: File) => Promise;
maxImageSize?: number; // Default: 5242880 (5MB)
// File Upload
fileUploadHandler?: (file: File) => Promise;
maxFileSize?: number; // Default: 10485760 (10MB)
}
```
---
## ๐ฏ Component API
### Inputs
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `config` | EditorConfig | DEFAULT_EDITOR_CONFIG | Editor configuration |
| `initialValue` | string | '' | Initial HTML content |
| `title` | string | 'Document' | Document title |
### Outputs
| Output | Type | Description |
|--------|------|-------------|
| `save` | EventEmitter | Emitted when save button is clicked |
| `htmlChange` | EventEmitter | Emitted on every content change |
### Methods
```typescript
// Get current HTML content
getHTML(): string
// Set HTML content programmatically
setHTML(html: string): void
// Clear auto-saved draft
clearAutoSave(): void
```
### Usage Example
```typescript
import { Component, ViewChild } from '@angular/core';
import { NgxProEditorComponent } from 'ngx-pro-editor';
@Component({
template: `
Get Content
Clear Draft
`
})
export class MyComponent {
@ViewChild('editor') editor!: NgxProEditorComponent;
config = { autoSave: true };
initialContent = '
Hello World!
';
onSave(html: string) {
// Save to backend
}
getContent() {
const html = this.editor.getHTML();
console.log(html);
}
clearDraft() {
this.editor.clearAutoSave();
}
}
```
---
## ๐จ Theming
### Using Built-in Themes
```typescript
// Dark theme (default)
config = { theme: 'dark' };
// Light theme
config = { theme: 'light' };
```
### Custom Styling
Override CSS variables in your global styles:
```css
:root {
--color-primary: #4f46e5;
--color-primary-hover: #4338ca;
--bg-editor: #1a1a2e;
--text-primary: #ffffff;
--border-default: #2d2d3a;
}
```
---
## ๐ธ Screenshots
### Editor Interface
### Responsive Preview
### Special Characters
---
## ๐ง Advanced Usage
### Complete Example
```typescript
import { Component, ViewChild } from '@angular/core';
import { NgxProEditorComponent, EditorConfig } from 'ngx-pro-editor';
@Component({
selector: 'app-editor',
standalone: true,
imports: [NgxProEditorComponent],
template: `
`
})
export class EditorComponent {
@ViewChild('editor') editor!: NgxProEditorComponent;
editorConfig: EditorConfig = {
placeholder: 'Start writing your content...',
minHeight: 500,
autoFocus: true,
spellcheck: true,
theme: 'dark',
// Auto-save configuration
autoSave: true,
autoSaveInterval: 30000,
autoSaveKey: 'my-editor-draft',
// Image upload
imageUploadHandler: this.uploadImage,
maxImageSize: 5 * 1024 * 1024,
// File upload
fileUploadHandler: this.uploadFile,
maxFileSize: 10 * 1024 * 1024
};
initialContent = '
Welcome to NGX Pro Editor!
';
async uploadImage(file: File): Promise {
// Your upload logic here
const formData = new FormData();
formData.append('image', file);
const response = await fetch('/api/upload/image', {
method: 'POST',
body: formData
});
const data = await response.json();
return data.url;
}
async uploadFile(file: File): Promise {
// Your upload logic here
const formData = new FormData();
formData.append('file', file);
const response = await fetch('/api/upload/file', {
method: 'POST',
body: formData
});
const data = await response.json();
return data.url;
}
onSave(html: string) {
console.log('Saving content:', html);
// Save to your backend
}
onContentChange(html: string) {
console.log('Content changed');
}
}
```
---
## ๐ Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
---
## ๐ Changelog
See [CHANGELOG.md](https://github.com/ChauhanShubham8758/ngx-pro-editor/blob/main/CHANGELOG.md) for version history.
---
## ๐ค Contributing
Contributions are welcome! Please read our [Contributing Guide](https://github.com/ChauhanShubham8758/ngx-pro-editor/blob/main/CONTRIBUTING.md) for details.
---
## ๐ License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/ChauhanShubham8758/ngx-pro-editor/blob/main/LICENSE) file for details.
---
## ๐ฌ Support
- ๐ง Email: chauhanshubham19765@gmail.com
- ๐ [Report Issues](https://github.com/ChauhanShubham8758/ngx-pro-editor/issues)
- ๐ก [Feature Requests](https://github.com/ChauhanShubham8758/ngx-pro-editor/issues/new)
- ๐ [Documentation](https://github.com/ChauhanShubham8758/ngx-pro-editor)
---
## โญ Show Your Support
If you find this project useful, please consider giving it a star on GitHub!
[](https://github.com/ChauhanShubham8758/ngx-pro-editor)
---
## ๐ Acknowledgments
- Built with [Angular](https://angular.io/)
- Icons by [Material Icons](https://fonts.google.com/icons)
- Font by [Inter](https://rsms.me/inter/)
---
**Made with โค๏ธ for the Angular community**
[NPM](https://www.npmjs.com/package/ngx-pro-editor) โข [GitHub](https://github.com/ChauhanShubham8758/ngx-pro-editor) โข [Issues](https://github.com/ChauhanShubham8758/ngx-pro-editor/issues)