Rich Text Editor

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

Rich Text Editor

The Rich Text Editor widget provides a full-featured WYSIWYG editor for rich text content. It supports formatting, embedded media, and various content styles.

Features

Rich Text Formatting: Support for headers, lists, inline styles, and more
Media Embedding: Add images, videos, and other media
Customizable Toolbar: Configure available formatting options
Content Templates: Pre-defined content layouts and styles
Copy & Paste Support: Smart handling of formatted content
Undo/Redo: Full history management
Accessibility: Keyboard shortcuts and screen reader support

Usage

<rich-text-editor
  [value]="content"
  [placeholder]="'Start writing...'"
  [readOnly]="false"
  [toolbarOptions]="toolbarOptions"
  (valueChange)="handleContentChange($event)"
>
</rich-text-editor>

Properties

Name	Type	Default	Description
value	string	''	The HTML content of the editor
placeholder	string	''	The placeholder text when the editor is empty
readOnly	boolean	false	Whether the editor is in read-only mode
toolbarOptions	ToolbarOptions	defaultToolbarOptions	Toolbar configuration

Events

Name	Description
valueChange	Emitted when the editor content changes

Toolbar Configuration

The toolbar can be customized to show only the formatting options you need:

import { Component } from '@angular/core';
import { RichTextEditorComponent, ToolbarOptions } from '@widgets';

@Component({
  selector: 'app-editor-example',
  standalone: true,
  imports: [RichTextEditorComponent],
  template: `
    <rich-text-editor
      [value]="editorContent"
      [toolbarOptions]="customToolbarOptions"
      (valueChange)="onContentChange($event)">
    </rich-text-editor>
  `
})
export class EditorExampleComponent {
  editorContent = '<p>Initial content</p>';
  
  customToolbarOptions: ToolbarOptions = {
    items: [
      ['bold', 'italic', 'underline'],
      ['h1', 'h2', 'h3'],
      ['bulletList', 'orderedList'],
      ['link', 'image'],
      ['undo', 'redo']
    ],
    sticky: true
  };
  
  onContentChange(newContent: string) {
    this.editorContent = newContent;
    console.log('Content updated:', newContent);
  }
}

Content Sanitization

By default, the Rich Text Editor sanitizes HTML content to prevent XSS attacks. If you need to allow specific tags or attributes, you can provide a custom sanitization configuration:

// Define custom sanitization rules
const customSanitization = {
  allowedTags: ['p', 'br', 'strong', 'em', 'u', 'h1', 'h2', 'h3', 'h4', 'ul', 'ol', 'li', 'a', 'img'],
  allowedAttributes: {
    'a': ['href', 'target', 'rel'],
    'img': ['src', 'alt', 'width', 'height']
  }
};

// Pass it to the editor
<rich-text-editor [sanitizationConfig]="customSanitization"></rich-text-editor>