📦 angular-rich-text-editor

A powerful, fully-configurable Angular wrapper for RichTextEditor.com, built for modern Angular apps. Supports both Reactive & Template-Driven Forms, modals, file uploads, custom toolbars, validation, dynamic content injection, and much more.

> 🔥 Built for scalability, optimized for performance, and engineered for flexibility.

---

✨ Features

- 🧩 Works with FormControl, [(ngModel)], and standalone forms
- 📤 Customizable image/file upload
- 🧠 Preset and dynamic toolbar options
- 📱 Mobile-friendly toolbar responsiveness
- ✅ Validation with custom messages
- 💬 Full error messaging & touched state integration
- 🔁 Public API for dynamic HTML manipulation
- 🚀 Easy integration inside components or modals

---

🚀 Installation

``bash
npm install angular-rich-text-editor
`

---

🔧 Configuration

> This library depends on assets and runtime scripts from RichTextEditor.com. These must be added manually.

$3

#### Scripts

> ⚠️ Make sure to keep your existing script. Just append the following to the "script" array in your angular.json or project.json:

`json
"scripts": [
...
"node_modules/angular-rich-text-editor/src/assets/richtexteditor/rte.js"
]
`

#### Styles

> ⚠️ Make sure to keep your existing styles. Just append the following to the "styles" array in your angular.json or project.json:

`json
"styles": [
...
"node_modules/angular-rich-text-editor/src/assets/richtexteditor/rte_theme_default.css"
]
`

#### Assets

> 📁 To load the required runtime assets, append the following entry to the "assets" array in your angular.json or project.json.
> ✅ Don’t remove your existing asset entries — just add this below them:

`json
"assets": [
...,
{
"glob": "*/",
"input": "node_modules/angular-rich-text-editor/src/assets/richtexteditor",
"output": "assets/richtexteditor"
}
]
`

``

---

🧱 Module Import

$3

`ts
import { RichTextEditorModule } from 'angular-rich-text-editor';

@NgModule({
imports: [RichTextEditorModule],
})
export class YourModule {}
``

$3

`ts
@Component({
standalone: true,
imports: [RichTextEditorModule],
...
})
`

---

🧩 Usage Examples

$3

`html

`

$3

`html







`

$3

`html

`

$3

`html

`

---

⚙️ Inputs

| Input | Type | Description |
| -------------------------------- | ---------------------------------------------------- | ------------------------------------- |
| formControl, formControlName | FormControl | Works with reactive forms |
| [(ngModel)] | string | Supports template-driven forms |
| initialContent | string | Set initial content as HTML string |
| rtePreset | 'BASIC' \| 'STANDARD' \| 'FULL' \| 'MINIMAL' | Select a toolbar preset configuration |
| imageToolbarItems | Array<'menu_controlsize' \| 'imagecaption' \| ...> | Configure image inline toolbar |
| excludedToolbarItems | string[] | Toolbar buttons to exclude |
| fileUploadHandler | (file, cb, i?, all?) => void | Custom image/file upload handler |
| enableImageUpload | boolean | Enable/disable image uploading |
| enableVideoEmbed | boolean | Enable/disable video embedding |
| readonly | boolean | Make editor read-only |
| errorMessages | { [key: string]: string } | Custom validation error messages |

---

📤 Outputs

| Output | Type | Description |
| ---------------- | ---------------------- | ------------------------------- |
| ngModelChange | EventEmitter | Emits when HTML content updates |
| contentChanged | EventEmitter | Emits after any content change |
| blurEvent | EventEmitter | Emits on blur |
| focusEvent | EventEmitter | Emits on focus |

---

🔓 Public Methods via RichTextEditorService

Inject in your component:

`ts
constructor(private rteService: RichTextEditorService) {}
`

| Method | Description |
| ------------------------------------------ | ---------------------------------------------- |
| getContent() | Get current HTML from the editor |
| setContent(html: string) | Set HTML content programmatically |
| clearContent() | Clears all content |
| insertContentAtCursor(html: string) | Inject HTML at current cursor |
| focus() | Focus the editor |
| executeCommand(cmd: string, value?: any) | Execute RichTextEditor command (bold, link...) |
| getCharacterCount() | Get plain character count |
| getWordCount() | Get plain word count |
| getSelectedText() | Returns currently selected text |
| isReadonly() | Check if editor is read-only |
| isAvailable() | Check if editor is ready |
| hideFloatingPanels() | Hide open floating panels |
| removeLastPlaceholderImage() | Removes latest blob:/data: image inserted |

---

✅ Validation Support

Supports required validation with:

- Angular template validation (required directive)
- Reactive validation (Validators.required)

Checks:

- Empty text
- Absence of image or video

---

🎨 Toolbar Presets

You can select a predefined toolbar layout using the rtePreset input.

| Preset | Toolbar Description |
| ---------- | ----------------------------------------- |
| BASIC | Light inline editing options |
| STANDARD | Medium-complexity toolbar |
| FULL | Rich full-featured editing experience |
| MINIMAL | Ultra-compact, minimal formatting buttons |

`ts
export type RTEPreset = "BASIC" | "STANDARD" | "FULL" | "MINIMAL";
`

---

🖼️ Image Toolbar Items

Customize the image selection toolbar using the supported RTEImageTool values:

`ts
export type RTEImageTool = "menu_controlsize" | "imagecaption" | "controlalt" | "controlinsertlink" | "controleditlink" | "controlopenlink" | "controlunlink" | "menu_controljustify" | "imagestyle" | "delete";
`

#### Example:

`html

`

---

📁 File Upload Handler

Custom uploader example:

`ts
handleFileUpload(file: File, cb: (url: string | null) => void) {
uploadToS3(file).then(url => cb(url));
}
`

Simulate failure:

`ts
simulateFailingUpload(file, cb) {
setTimeout(() => cb(null, 'mock-error'), 1000);
}
`

---

📘 Styles & Assets

Ensure that /assets/richtexteditor is correctly linked in your build config.
Required scripts and styles must be added (see Configuration section above).

---

🧪 Development & Testing Notes

- Editor uses an iframe, which may need fixture.whenStable() or setTimeout() in tests.
- Mock internal methods like getContent() for assertions.
- Use zone.run() to manually trigger change detection if needed.

---

🛡️ License Key

You can inject globally:

`ts
providers: [{ provide: RTE_LICENSE_KEY, useValue: "your-license-key" }];
`

Or pass directly to the component:

`html

`

---

🤝 Contributing

1. Fork or clone the repo
2. Run npm start` (once demo is available)
3. Add new features or fix issues
4. Submit a clean PR with a clear description

---

🧭 Roadmap

- [ ] Interactive playground / demo
- [ ] Storybook docs
- [ ] JSON content support
- [ ] Plugin registration API
- [ ] Drag & drop blocks / content snippets

---

🙌 Credits

- Built on RichTextEditor.com
- Built with ❤️ and TypeScript

---

💬 Need Help?

Start a discussion or file an issue:
👉 https://github.com/manishpatidar028/angular-rich-text-editor