基于Angular从零构建自定义文档编辑器（替代Syncfusion文档编辑器）

Got it, let's walk through building this custom Angular document editor from scratch to replace Syncfusion, addressing your specific requirements of JSON-based control configuration and Word-like formatting/editing capabilities.

First, we'll structure the editor into modular layers to keep it maintainable:

• JSON Configuration Layer: Parses and validates control definitions
• Render Layer: Converts JSON to editable DOM elements
• Interaction Layer: Handles user input, formatting actions, and syncs changes back to JSON
• Integration Layer: Wraps everything into an Angular component for easy app integration

1. Designing the JSON Control Configuration System #

We need a standardized JSON schema to represent every editable element (paragraphs, headings, lists, etc.). Let's define a flexible structure with TypeScript interfaces to enforce consistency:

Sample JSON Control Structure #

{
  "documentId": "doc-123",
  "controls": [
    {
      "type": "heading",
      "id": "h1",
      "level": 1,
      "content": "Custom Document Editor",
      "styles": {
        "fontSize": "24px",
        "fontFamily": "Segoe UI",
        "color": "#2c3e50",
        "marginBottom": "16px"
      }
    },
    {
      "type": "paragraph",
      "id": "p1",
      "content": "This is a sample editable paragraph with basic formatting.",
      "styles": {
        "fontSize": "14px",
        "lineHeight": 1.6,
        "alignment": "left"
      }
    },
    {
      "type": "unordered-list",
      "id": "ul1",
      "items": [
        { "content": "First list item", "styles": {} },
        { "content": "Second list item with bold text", "styles": { "fontWeight": "bold" } }
      ]
    }
  ]
}

TypeScript Interface for Validation #

export interface EditorControl {
  type: 'heading' | 'paragraph' | 'ordered-list' | 'unordered-list' | 'table';
  id: string;
  content?: string;
  level?: number; // For headings
  items?: EditorControl[]; // For lists/table rows
  styles: Record<string, string | number>;
}

export interface EditorDocument {
  documentId: string;
  controls: EditorControl[];
}

2. Building the Core Editing Capabilities #

Base Editing Container #

Use a contenteditable div instead of a textarea—it’s flexible enough to support rich formatting while maintaining basic text editing behavior. Bind Angular events to track user input:

<div 
  class="editor-container"
  contenteditable="true"
  (input)="onEditorInput($event)"
  (blur)="syncDomToJson()"
></div>

Key Formatting Features (Word-like) #

Implement these by modifying the JSON control schema and syncing to the DOM:

• Text Styles: Bold, italic, underline, font size/color
  • When a user selects text and clicks a bold button, update the styles.fontWeight property of the target control
• Paragraph Styles: Alignment (left/center/right), line height, indentation
• List Conversion: Convert selected paragraphs to ordered/unordered lists by changing the control type and restructuring content into items
• JSON ↔ DOM Sync:
  • On initial load: Parse the input JSON and render each control as a DOM element with applied styles
  • On user edit: Use the Selection API to identify the target control, then update its corresponding JSON entry

3. Integrating into Your Angular App #

Step 1: Generate the Editor Component #

ng generate component document-editor

Step 2: Add Input/Output for Data Sync #

@Component({
  selector: 'app-document-editor',
  templateUrl: './document-editor.component.html',
  styleUrls: ['./document-editor.component.scss']
})
export class DocumentEditorComponent {
  @Input() initialDocument: EditorDocument;
  @Output() documentUpdated = new EventEmitter<EditorDocument>();
  
  private currentDocument: EditorDocument;

  ngOnInit() {
    this.currentDocument = { ...this.initialDocument };
    this.renderDocument();
  }

  // Implement renderDocument(), syncDomToJson(), etc. here
}

Step 3: Replace Syncfusion Usage #

Swap out your existing Syncfusion editor component with your custom one:

<!-- Before -->
<ejs-documenteditor></ejs-documenteditor>

<!-- After -->
<app-document-editor
  [initialDocument]="myDocument"
  (documentUpdated)="handleDocumentUpdate($event)"
></app-document-editor>

4. Addressing Key Technical Challenges #

• Contenteditable Compatibility: Use the native Selection and Range APIs to handle cross-browser selection logic—wrap these into a reusable utility service
• Performance for Large Documents: Avoid full re-renders; update only the modified control when changes occur
• Word (.docx) Support:
  • Import: Use mammoth.js to parse docx files into HTML, then convert that HTML into your JSON control schema
  • Export: Convert your JSON schema to HTML, then use html-docx-js to generate a docx file

5. Optimization Tips #

• Add undo/redo by maintaining a history stack of document JSON states
• Implement keyboard shortcuts (e.g., Ctrl+B for bold) to improve user experience
• Add validation for JSON configurations to prevent invalid control types/styles
• Write unit tests for JSON parsing, DOM rendering, and sync logic to catch regressions

内容的提问来源于stack exchange，提问作者Äm Jad