syncfusion-angular-docx-editor

Syncfusion Angular DOCX Editor

概要

このスキルは、Syncfusion DOCX Editor をアプリケーションに統合するための Angular コードを開発者が生成するのに役立ちます。編集、レビュー、書式設定などに対応した Document Editor を組み込むための、すぐに使えるスニペットとベストプラクティスを提供します。

主な機能

• ドキュメント編集： Word ドキュメントの作成、編集、表示。
• 保護： 読み取り専用モードの適用、コメントの許可、フォーム入力の許可、変更履歴の記録の強制、編集可能範囲の定義。
• レビュー： 変更履歴（リビジョン）を有効にし、変更を承認または却下。
• コメント： コメント、返信、作成者のメタデータの追加。
• 検索と置換： 自動化のための検索と置換操作のプログラムによる実行。
• フォームフィールド： テキストフィールド、チェックボックス、ドロップダウン形式のフォームフィールドの挿入と入力。

前提条件

• npm パッケージ：@syncfusion/ej2-angular-documenteditor
• Syncfusion ライセンス：https://www.syncfusion.com/products/communitylicense

クイックスタートの例

例 1：Document Editor の作成

ユーザー：「Document Editor コンポーネントを作成するコードを見せてください。」

結果： Document Editor コンポーネントを初期化する Angular スニペット

例 2：読み取り専用制限モードの有効化

ユーザー：「読み取り専用制限モードの Document Editor を作成してください。」

結果： 読み取り専用の保護を有効にした Document Editor を作成する Angular スニペット

はじめに — 最小限の Angular コード

通常の Web プロジェクト向けの、最小限の Angular Document Editor セットアップです。

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 {
    }
}

注：例の serviceUrl は評価／デモ用です。本番環境では独自のサービスをホストしてください。

CSS（styles.css）：

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';

---

ユーザーのプロジェクト向け Angular コードの生成

トリガーキーワード：「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」

ワークフロー：

1. ユーザーのリクエストを分析して、機能（変更履歴、編集制限、ツールバーのカスタマイズなど）を特定します。

2. 該当する references/*.md ファイルを読み、リクエストされた機能に関する API とコードパターンを確認します。

3. コードを生成する前に停止します。 ユーザーがコードの提供方法をすでに選択しているか確認します。

4. 提供方法がまだ選択されていない場合は、 必ず次の簡潔な選択式の質問をユーザーにします。

   「生成したコードをどのように受け取りますか？」

   • オプション 1： 指定したプロジェクトファイル内のコードを置き換える（ファイルパスを提示し、確認する必要があります）
   • オプション 2： コードをチャット画面に直接表示する

5. ユーザーが提供方法を選択した後にのみ、 references/*.md の API とスニペットを使用し、ユーザーのプロジェクトに合わせて具体的なプレースホルダーを置き換えながら Angular コードを生成します。

6. ユーザーがオプション 1 を明示的に選択し、ファイルパスを提示して許可した場合を除き、ワークスペースのプロジェクトファイルを変更してはなりません。

7. コードを提供した後、完全な Angular スニペットと簡潔な統合手順を提示します。

運用上の制約（出力ディレクトリ、一時ファイル、使用可能なライブラリなど）については、## Rules セクションを参照してください。

コードリファレンス

すべてのコードスニペットと例は references/ フォルダーにあります。各ファイルには、以下が含まれています。

• 最小限の Angular コード — 動作する、そのまま使えるコードスニペット
• プレースホルダー — ユーザーがカスタマイズする必要のある値
• 注意事項 — ベストプラクティス、その機能を使う際に留意すべき追加情報、制約

ファイル	内容
getting-started.md	Document Editor の初期化とコンテナーの設定
editor-only.md	モジュールを手動で挿入するエディターのみのモード
form-fields.md	フォームフィールドの挿入、確認、入力、リセット、エクスポート
comments.md	コメントの追加、返信、移動、削除
track-changes.md	変更履歴の有効化と変更の承認または却下
document-protection.md	読み取り専用、コメントのみ、フォーム、変更履歴の保護
spell-check.md	スペルチェックの設定、候補、カスタム辞書
customize-toolbar.md	カスタムツールバー項目、ボタンの状態、ペインの制御
find-and-replace.md	検索、置換、検索結果の管理
paste-formatting.md	バックエンドサービスを使ったクリップボード書式の保持
insert-text-box.md	テキストボックスの挿入ダイアログ
ribbon.md	Ribbon UI を使用した documenteditor の初期化
customize-ribbon.md	Ribbon タブのカスタマイズ
collaborative-editing-core.md	Collaboration Client と Server を使用した共同編集（ASP.NET Core バックエンド）
collaborative-editing-java.md	Java（Spring Boot）バックエンドで SockJS、STOMP、Redis を使用した共同編集

コード生成の主なルール

1. SKILL.md にインラインコードを記載しない — 必ず references/*.md のコードスニペットを参照してください。このファイルはすべてのプロンプトでコンテキストに読み込まれるため、インラインコードはトークンを無駄にします。

2. コードスニペットはテスト済みであること — すべてのコードは、現在の @syncfusion/ej2-angular-documenteditor npm パッケージのバージョンでコンパイルおよび実行できる必要があります。

3. 最小限のコード + プレースホルダー + 注意事項 — すべてのリファレンスファイルには以下を含める必要があります。

   • 最小限のコード（完全で動作するコードスニペット）
   • プレースホルダー（ユーザーが置き換える値。{{ }} または [PLACEHOLDER] で示します）
   • 注意事項（ベストプラクティス、フレームワーク固有の調整、制約）

4. 要件に必要なコードと注意事項を共有する — 一時ファイルやスクリプトは作成しないでください。

5. ライセンスの取り扱い — ライセンスキーをハードコードしないでください。環境変数または設定ファイルを案内してください。

6. 存在しない API を作り出さない — 検証済みの Syncfusion DOCX Editor SDK メソッド名のみを使用してください。誤ったメソッドを1つでも使うと、ユーザーの信頼を損ないます。

7. サービス URL に関する注意 — serviceUrl に https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ が含まれている場合は、スニペット内でそのまま使用し、次の注意メッセージを追加してください。「Document Editor の serviceUrl プロパティは、デモおよび評価目的のみを想定しています。本番環境では、独自の Web サービスをホストしてください。」

ルール

• Syncfusion Document Editor API のみを使用する — 代替の Word Editor ライブラリを推奨または使用しないでください。
• 一時ファイルを作成しない — 出力ディレクトリの外に、一時スクリプト、中間ファイル、またはスキャフォールディングを作成しないでください。
• Angular 専用コード — 生成するコードはすべて有効な Angular コードでなければなりません。バニラ JavaScript、jQuery、または Angular 以外のパターンは生成しないでください。