EIU Tiptap Editor

[!IMPORTANT] ^v3.0.0 uses Tiptap v3. Designed seamlessly for Angular 15+ environments.

A robust, enterprise-grade, highly customizable Angular rich-text editor built on top of Tiptap. Designed specifically to replace traditional heavy editors like DevExtreme HTML Editor, delivering a blazing fast, modern editing experience.

High-performance Angular WYSIWYG editor. It features a polished, professional UI out of the box with a fully-featured toolbar, comprehensive table power controls, formatting options, color pickers, and more.

✨ Key Features

• 🚀 Drop-in Ready: Fully encapsulated toolbar with an intuitive, DevExtreme-like interface out-of-the-box.
• ⚡ Signal-Ready Architecture: High performance and reactive change detection.
• 📊 Advanced Table Power: Comprehensive cell selection, splitting, merging, and dynamic table operations built natively into the UI.
• 🎨 Full Formatting Suite: Highlighting, text color, typography controls, alignment, superscript, and subscript support.
• 📎 Office Paste: Clean, seamless pasting from Microsoft Word and Excel.
• 🔗 Built-in NgModel and FormControl: Seamless integration with Angular Template-Driven and Reactive Forms using ControlValueAccessor.
• 🌍 Internationalization (i18n): Ready for localization and multiple languages.

📦 Installation

To install the library into your project, simply run:

npm install eiu-tiptap-editor

Note: As of version 1.0.x, all required Tiptap peer dependencies are bundled securely into the library's dependencies. NPM will automatically fetch them for you.

Add Styles

Make sure to add the required material symbols and library styles to your angular.json under the styles array:

{
  "styles": [
    ...
    "node_modules/@fontsource/material-symbols-outlined/index.css",
    "node_modules/eiu-tiptap-editor/styles/index.css",
    ...
  ]
}

🚀 Quick Start

1. Module Setup

If your project uses NgModules (e.g. AppModule), import the component directly (or via a Shared Module):

import { TiptapEditorComponent } from 'eiu-tiptap-editor';

@NgModule({
  imports: [
    // other imports...
    TiptapEditorComponent
  ],
})
export class AppModule { }

2. Standalone Component Usage

If you're using Standalone components, just import it directly into your component:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { TiptapEditorComponent } from "eiu-tiptap-editor";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [FormsModule, TiptapEditorComponent],
  template: `
    <lib-tiptap-editor 
      [(ngModel)]="htmlContent" 
      [height]="'400px'"
      placeholder="Start typing your awesome content...">
    </lib-tiptap-editor>
  `,
})
export class ExampleComponent {
  htmlContent = "<h2>Hello World!</h2><p>This is the EIU Tiptap Editor.</p>";
}

3. Reactive Forms Integration

Works perfectly with Angular's Reactive Forms out of the box:

import { Component } from "@angular/core";
import { FormControl, ReactiveFormsModule } from "@angular/forms";
import { TiptapEditorComponent } from "eiu-tiptap-editor";

@Component({
  standalone: true,
  imports: [TiptapEditorComponent, ReactiveFormsModule],
  template: `
    <lib-tiptap-editor [formControl]="contentControl"></lib-tiptap-editor>
  `,
})
export class FormComponent {
  contentControl = new FormControl("<p>Initial content</p>");
}

⚙️ Configuration Properties

The <lib-tiptap-editor> component accepts the following inputs to customize its behavior:

| Input | Type | Default | Description | | :--- | :--- | :--- | :--- | | [placeholder] | string | Type '/' for commands | Text shown when the editor is empty. | | [height] | string | 100% | CSS height for the editor container. | | [editable] | boolean | true | Set to false to make the editor read-only. |

See the API.md for a deeper dive into advanced configurations.

🔧 Local Development

If you want to clone this repository and modify the library yourself:

# 1. Install dependencies
npm install

# 2. Build the library
npx ng build eiu-tiptap-editor

# 3. Serve the demo application
npm start

🙏 Acknowledgements

This project was originally forked and heavily inspired by the excellent work from FloGeez/angular-tiptap-editor. We have since heavily extended it with a native toolbar UI, advanced table tools, and form accessors tailored for our enterprise needs.

📝 License

MIT License - see LICENSE file for details.