NGX Pro Editor

import { Component } from '@angular/core';
import { NgxProEditorComponent } from 'ngx-pro-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxProEditorComponent],
  template: `
    <ngx-pro-editor 
      [config]="editorConfig"
      (save)="onSave($event)">
    </ngx-pro-editor>
  `
})
export class AppComponent {
  editorConfig = {
    placeholder: 'Start typing...',
    minHeight: 400,
    autoSave: true
  };

  onSave(html: string) {
    console.log('Content saved:', html);
  }
}

interface EditorConfig {
  // Basic Settings
  placeholder?: string;              // Default: 'Start typing...'
  minHeight?: number;                // Default: 400
  maxHeight?: number;                // Optional
  initialContent?: string;           // Initial HTML content
  autoFocus?: boolean;               // Default: false
  spellcheck?: boolean;              // Default: true
  theme?: 'dark' | 'light';          // Default: 'dark'
  
  // Auto-Save
  autoSave?: boolean;                // Default: false
  autoSaveInterval?: number;         // Default: 30000 (30 seconds)
  autoSaveKey?: string;              // Default: 'ngx-pro-editor-autosave'
  
  // Image Upload
  imageUploadHandler?: (file: File) => Promise<string>;
  maxImageSize?: number;             // Default: 5242880 (5MB)
  
  // File Upload
  fileUploadHandler?: (file: File) => Promise<string>;
  maxFileSize?: number;              // Default: 10485760 (10MB)
}

editorConfig: EditorConfig = {
  placeholder: 'Write your story...',
  minHeight: 500,
  autoFocus: true,
  theme: 'dark',
  
  // Enable auto-save
  autoSave: true,
  autoSaveInterval: 30000,
  autoSaveKey: 'my-editor-draft',
  
  // Image upload handler
  imageUploadHandler: async (file: File) => {
    const formData = new FormData();
    formData.append('image', file);
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    return data.url;
  },
  
  // File upload handler
  fileUploadHandler: async (file: File) => {
    const formData = new FormData();
    formData.append('file', file);
    const response = await fetch('/api/upload-file', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    return data.url;
  }
};

// Get current HTML content
getHTML(): string

// Set HTML content programmatically
setHTML(html: string): void

// Clear auto-saved draft
clearAutoSave(): void

import { Component, ViewChild } from '@angular/core';
import { NgxProEditorComponent } from 'ngx-pro-editor';

@Component({
  template: `
    <ngx-pro-editor 
      #editor
      [config]="config"
      [initialValue]="initialContent"
      (save)="onSave($event)"
      (htmlChange)="onContentChange($event)">
    </ngx-pro-editor>
    
    <button (click)="getContent()">Get Content</button>
    <button (click)="clearDraft()">Clear Draft</button>
  `
})
export class MyComponent {
  @ViewChild('editor') editor!: NgxProEditorComponent;
  
  config = { autoSave: true };
  initialContent = '<p>Hello World!</p>';
  
  onSave(html: string) {
    console.log('Saved:', html);
  }
  
  onContentChange(html: string) {
    console.log('Changed:', html);
  }
  
  getContent() {
    const html = this.editor.getHTML();
    console.log('Current content:', html);
  }
  
  clearDraft() {
    this.editor.clearAutoSave();
  }
}

config = { theme: 'dark' };

config = { theme: 'light' };