Angular Rich Text Editor Component for NG VUI Library
npm install @ng-vui/editorA powerful, feature-rich WYSIWYG editor component for Angular 20+ with advanced formatting tools, media support, and modern standalone architecture.
- โ
Standalone Component - Modern Angular 20+ standalone architecture
- โ
Rich Text Editing - Bold, italic, underline, strikethrough, lists, alignment
- โ
Advanced Formatting - Headers, text colors, highlights, font sizes
- โ
Media Management - Image upload, resize, and storage service
- โ
Link Management - Create, edit, and remove hyperlinks
- โ
Table Support - Insert and format tables
- โ
Code Blocks - Syntax highlighting for code
- โ
Undo/Redo - Full history management
- โ
Customizable Toolbar - Configure available tools
- โ
HTML Output - Clean, semantic HTML output
- โ
Reactive Forms - Full Angular Forms integration (ngModel, FormControl)
- โ
TypeScript - Complete type safety and IntelliSense
- โ
Responsive Design - Mobile-friendly interface
``bash`
npm install @ng-vui/editor
Peer Dependencies:
- Angular 14+ (@angular/core, @angular/common, @angular/forms)
- TypeScript 4.7+
Built with modern Angular patterns:
- Standalone Component - No NgModules required
- Media Storage Service - Configurable media upload and management
- Type Safety - Full TypeScript interfaces and types
- Reactive Forms - Complete Angular Forms integration
`typescript
import { NgVuiEditorComponent, MediaStorageService } from '@ng-vui/editor';
@Component({ Welcome to the rich text editor!
selector: 'app-example',
standalone: true,
imports: [NgVuiEditorComponent, FormsModule],
template:
[placeholder]="'Start typing...'"
[readonly]="false"
(contentChange)="onContentChange($event)"
(mediaUpload)="onMediaUpload($event)">
})
export class EditorExampleComponent {
content = '
onContentChange(newContent: string) {
console.log('Content changed:', newContent);
}
onMediaUpload(event: any) {
console.log('Media uploaded:', event);
}
}
`
`typescript
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@Component({
standalone: true,
imports: [NgVuiEditorComponent, ReactiveFormsModule],
template:
})
export class ReactiveFormExample {
editorForm = new FormGroup({
content: new FormControl('Default content
')
});
}
`$3
`typescript
import { MediaStorageService, MediaUploadResult } from '@ng-vui/editor';@Injectable()
export class CustomMediaStorage implements MediaStorageService {
async uploadMedia(file: File): Promise {
// Your custom upload logic
const formData = new FormData();
formData.append('file', file);
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
return {
url: result.url,
alt: file.name,
width: result.width,
height: result.height
};
}
async deleteMedia(url: string): Promise {
// Your custom delete logic
return true;
}
}
`๐ง API Reference
$3
#### Inputs
| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
placeholder | string | 'Enter text...' | Placeholder text when editor is empty |
| readonly | boolean | false | Makes the editor read-only |
| height | string | '300px' | Fixed height for editor content area |
| maxLength | number | undefined | Maximum character limit |#### Outputs
| Event | Type | Description |
|-------|------|-------------|
|
contentChange | string | Emitted when content changes |
| mediaUpload | MediaUploadResult | Emitted when media is uploaded |
| focus | void | Emitted when editor gains focus |
| blur | void | Emitted when editor loses focus |#### Methods
| Method | Description |
|--------|-------------|
|
getContent() | Returns current HTML content |
| setContent(html: string) | Sets HTML content |
| insertHTML(html: string) | Inserts HTML at cursor position |
| focus() | Focuses the editor |
| clear() | Clears all content |$3
`typescript
interface MediaStorageService {
uploadMedia(file: File): Promise;
deleteMedia(url: string): Promise;
}interface MediaUploadResult {
url: string;
alt?: string;
width?: number;
height?: number;
}
`๐จ Styling & Theming
The editor uses Tailwind CSS classes by default. You can customize the appearance by overriding CSS classes:
`css
/ Custom editor styling /
.ng-vui-editor {
--editor-border: #e5e7eb;
--editor-bg: #ffffff;
--toolbar-bg: #f9fafb;
--button-hover: #e5e7eb;
}.ng-vui-editor .toolbar {
background: var(--toolbar-bg);
}
.ng-vui-editor .content-area {
background: var(--editor-bg);
border-color: var(--editor-border);
}
`๐งช Testing
`typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgVuiEditorComponent } from '@ng-vui/editor';describe('NgVuiEditorComponent', () => {
let component: NgVuiEditorComponent;
let fixture: ComponentFixture;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [NgVuiEditorComponent]
});
fixture = TestBed.createComponent(NgVuiEditorComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should update content', () => {
const testContent = '
Test content
';
component.setContent(testContent);
expect(component.getContent()).toContain('Test content');
});
});
`๐ค Contributing
1. Fork the repository
2. Create a feature branch:
git checkout -b feature/my-feature
3. Commit changes: git commit -am 'Add my feature'
4. Push to branch: git push origin feature/my-feature
5. Submit a pull request๐ License
MIT ยฉ VUI
๐ Related Packages
-
@ng-vui/ng-vui-grid - Advanced data grid component
- @ng-vui/text-input - Text input component
- @ng-vui/textarea - Textarea component
- @ng-vui/select-input - Select dropdown component
- @ng-vui/multi-select - Multi-select dropdown
- @ng-vui/date-picker` - Date picker component