Syncfusion Angular DOCX Editor

Overview

This skill helps developers generate Angular code for integrating the Syncfusion DOCX Editor into their applications. It provides ready-to-use snippets and best practices for embedding a Document Editor that supports editing, reviewing, formatting, and more.

Key Capabilities

Document Editing: Create, edit, and view Word documents.
Protection: Apply read-only mode, allow comments, allow form filling, enforce tracked changes,and define editable ranges.
Review: Enable track changes (revisions) and accept/reject changes.
Comments: Add comments, replies, and author metadata.
Find and replace: Perform programmatic find and replace operations for automation.
Form Fields: Insert and fill text fields, check boxes, and dropdown form fields.

Prerequisites

npm package: @syncfusion/ej2-angular-documenteditor
Syncfusion License: https://www.syncfusion.com/products/communitylicense

Quick Start Examples

Example 1: Create Document Editor

User: "Show me code to create a Document Editor component." Result: A Angular snippet that initializes the Document Editor component

Example 2: Enable Read‑Only Restriction Mode

User: "Create a Document Editor with Read‑Only restriction mode." Result: A Angular snippet that loads a document and applies read-only protection during initialization.

Getting Started — Minimal Angular Code

Minimal Angular Document Editor setup for a plain web project:

import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';
import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';

@Component({
    imports: [        
        DocumentEditorContainerModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-documenteditorcontainer 
                   serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
                   height="600px" 
                   style="display:block" 
                   [enableToolbar]=true>
               </ejs-documenteditorcontainer>`,
    providers: [ToolbarService]
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
    }
}

Note: The serviceUrl in examples is for evaluation/demo. Host your own service for production.

Generate Angular Code for the User's Project

Trigger keywords: "code", "snippet", "how to", "show me", "sample", "example code", "generate code", "implement", "add to component", "configure documenteditor", "create" , "angular document editor", "docx editor", "document editor", "track changes", "load docx", "comments", "accept changes", "protect document", "find and replace", "content control"

Workflow:

Analyze the user's request to identify the feature (e.g., track changes, restrict editing, toolbar customization).
Read the relevant references/*.md file(s) to understand the APIs and code patterns for the requested feature.
STOP before generating code. Check if the user has already chosen a delivery mode.
If no delivery mode is chosen yet, you MUST ask the user first using this concise multiple-choice question:

"How would you like to receive the generated code?"
- Option 1: Replace the code in a specific project file (you'll need to provide the file path and confirm)
- Option 2: Share the code directly in the chat window
Only after the user selects a delivery mode, proceed to generate Angular code using the APIs and snippets from references/*.md, substituting concrete placeholders from the user's project.
Do NOT make changes to workspace project files unless the user explicitly chose Option 1 and provided the file path with permission.
Provide complete Angular snippets and concise integration steps after delivering the code.

Refer to ## Rules section for operational constraints (output directory, temporary files, allowed libraries, etc.)

Code References

All code snippets and examples are in the references/ folder. Each file contains:

Minimal Angular Code — a working, ready-to-use snippet
Placeholders — values the user must customize
Notes — best practices, additional information to note while using that functionality, constraints

File	Contents
document-editor.md	Document Editor initialization and container setup
editor-only.md	Editor-only mode with manual module injection
form-fields.md	Insert, inspect, fill, reset, and export form fields
comments.md	Add, reply to, navigate, and delete comments
track-changes.md	Enable revisions and accept or reject changes
document-protection.md	Read-only, comments-only, form, and revision protection
spell-check.md	Spell-check setup, suggestions, and custom dictionaries
customize-toolbar.md	Custom toolbar items, button state, and pane control
find-and-replace.md	Search, replace, and search-results management
paste-formatting.md	Preserve clipboard formatting with a backend service
ribbon.md	initialize the documenteditor with Ribbon UI
customize-ribbon.md	Customize Ribbon Tabs

Key Rules for Code Generation

No inline code in SKILL.md — Always point to snippets in references/*.md. This file is loaded into context for every prompt; inline code wastes tokens.
Snippets must be tested — All code must compile and run against the current @syncfusion/ej2-angular-documenteditor npm package version.
Minimal Code + Placeholders + Notes — Every reference file must include:
- Minimal Code (complete, working snippet)
- Placeholders (values user must substitute — marked with {{ }} or [PLACEHOLDER])
- Notes (best practices, framework-specific adaptations, constraints)
Share code and notes for the requirement — Never create temporary files or scripts.
License handling — Never hardcode license keys. Point user to environment variables or config files.
Framework adaptation — Default to plain JavaScript/TypeScript. When user specifies framework.
No hallucinated APIs — Use only verified Syncfusion DOCX Editor SDK method names. One wrong method breaks user trust.
Service URL Note — When serviceUrl contains https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/, keep it in the snippet and add note message: "The serviceUrl property in the Document Editor is intended only for demonstration and evaluation purposes. For production use, host your own web service."

Rules

Only use Syncfusion Document Editor APIs — never recommend or use alternative Word Editor libraries.
No temporary files — never create temporary scripts, intermediate files, or scaffolding outside the output directory
Angular-only code — all generated code must be valid Angular, never generate vanilla JavaScript, jQuery, or non-Angular patterns

syncfusion-angular-docx-editor