📦 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

npm install angular-rich-text-editor

---

🔧 Configuration

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

1. Modify angular.json or project.json

Scripts

⚠️ Make sure to keep your existing script. Just append the following to the "script" array in your angular.json or project.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:

"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:

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

---

## 🧱 Module Import

### In a regular NgModule:

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

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

With standalone components:

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

---

🧩 Usage Examples

1. Template-Driven Form

<lib-rich-text-editor [(ngModel)]="content" [rtePreset]="'FULL'" [enableImageUpload]="true" [fileUploadHandler]="handleFileUpload" />

2. Reactive Form

<form [formGroup]="form">
  <lib-rich-text-editor formControlName="description" [initialContent]="startingHTML" [enableVideoEmbed]="true" />
</form>

3. In a Modal

<lib-rich-text-editor [(ngModel)]="content" [fileUploadHandler]="mockUpload" [excludedToolbarItems]="['insertvideo', 'insertcode']" />

4. Shared Component Wrapper

<app-shared-rich-text-editor [(ngModel)]="emailBody" [imageToolbarItems]="['imagestyle', 'delete']" [excludedToolbarItems]="['html2pdf']" [fileUploadHandler]="uploadImage" />

---

⚙️ 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<string>	Emits when HTML content updates
contentChanged	EventEmitter<void>	Emits after any content change
blurEvent	EventEmitter<void>	Emits on blur
focusEvent	EventEmitter<void>	Emits on focus

---

🔓 Public Methods via RichTextEditorService

Inject in your component:

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

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

---

🖼️ Image Toolbar Items

Customize the image selection toolbar using the supported RTEImageTool values:

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

Example:

<lib-rich-text-editor [imageToolbarItems]="['menu_controljustify', 'imagestyle', 'delete']" />

---

📁 File Upload Handler

Custom uploader example:

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

Simulate failure:

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:

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

Or pass directly to the component:

<lib-rich-text-editor [licenseKey]="'your-license-key'"></lib-rich-text-editor>

---

🤝 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