PP Editor - Angular Rich Text Editor Standalone Component

Overview

PP Editor is an Angular standalone component that provides a rich text editing experience using Quill.js. It supports multiple content blocks, code blocks, iframe embedding, a floating action menu, and advanced customization.

Supported Angular Versions

PP Editor requires Angular v14.1.0 or later, as it relies on Angular's standalone component APIs introduced in Angular 14.1.0. It is compatible with all subsequent Angular versions that support standalone components, including Angular 15, 16, 17, and newer.

Features

• Multiple Content Blocks: Manage several rich text blocks within a single editor.
• Bubble Toolbar: Contextual formatting toolbar appears when selecting text.
• Special Content Types:
  • Code blocks with syntax highlighting
  • Embedded iframes
  • Custom SVG dividers
• Keyboard Shortcuts: Triple Enter to create a new content block.
• SSR Compatible: Uses Angular's isPlatformBrowser for server-side rendering support.
• Customizable: Extendable with Quill modules, toolbar, themes, and more.
• Read-Only Mode: Option to make the editor read-only.

Installation

1. Install dependencies:

   npm install ngx-quill @angular/forms

2. Import in styles.scss

   @import "quill/dist/quill.bubble.css";
   @import "quill/dist/quill.snow.css";
   @import "quill/dist/quill.core.css";

3. Import the standalone component and required modules:

   import { PpEditor } from "./path-to-pp-editor";
   import { bootstrapApplication } from "@angular/platform-browser";
   
   bootstrapApplication(AppComponent, {
     providers: [],
     imports: [
       PpEditor,
       // other standalone components or modules if needed
     ],
   });

Usage

<pp-editor></pp-editor>

API

Inputs

• placeholder: string - Placeholder text for the editor ('Type here...' by default)
• theme: 'bubble' | 'snow' - Quill theme ('snow' by default)
• readOnly: boolean - Set to true to make the editor read-only
• toolbar: any[] - Quill toolbar configuration (default includes headers, formatting, lists, links, images, code blocks, blockquotes, colors, fonts, and alignment)
• history: object - Quill history module config (default: { delay: 2000, maxStack: 500, userOnly: true })
• clipboard: object - Quill clipboard module config (default: { matchVisual: false })
• keyboard: object - Quill keyboard bindings (default: {})

Methods

• addCodeBlock() - Adds a new code block to the editor.
• addDivider() - Adds a custom SVG divider to the editor.
• addIframe() - Prompts for a URL and adds an iframe.
• removeContent(index: number) - Removes the content block at the specified index.
• toggleMenu() - Shows/hides the floating action menu.

Events

• editorCreated(quill: any) - Called when a Quill editor instance is created.

Styling

Default styles are included in pp-editor.css. You can override these styles in your application CSS.

Customization

You can customize the Quill configuration by modifying the toolbar, history, clipboard, and keyboard properties:

this.toolbar = [
  // Your custom toolbar configuration
];
this.history = { delay: 1000, maxStack: 100, userOnly: false };
this.clipboard = { matchVisual: true };
this.keyboard = {
  bindings: {
    /* custom bindings */
  },
};

Keyboard Shortcuts

• Triple Enter: Press Enter three times quickly to create a new content block.

Browser Compatibility

The component is compatible with modern browsers and supports SSR via Angular's isPlatformBrowser.

License

MIT

Support

• ✨ Feature requests: Open a discussion.
• 🐛 Bugs: Open a discussion.
• 🔒 Security issues: Email [email protected].