mcpField
S
syncfusion-react-docx-editor

syncfusion-react-docx-editor

github.com/syncfusionドキュメント1142 回インストール1 週間前に更新
リポジトリ

syncfusion-react-docx-editor について

Syncfusion DOCX Editorをアプリに組み込むReactコードの生成を開発者向けに支援するスキルです。編集、レビュー、フォーム、保護の例を扱い、コード生成前に受け取り方法を確認します。

主な機能

  1. 01エディター統合用Reactコードの生成
  2. 02変更履歴とコメントへの対応
  3. 03文書保護とフォーム項目の設定
  4. 04検索置換とスペルチェックの例
  5. 05コードの受け取り方法を事前確認

活用シーン

  1. 01ReactアプリへのDOCXエディター追加
  2. 02変更履歴の確認とコメント機能の実装
  3. 03読み取り専用やフォーム入力制限の設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/docx-editor-sdk-skills --skill syncfusion-react-docx-editor

インストール後、Claude Code で/syncfusion-react-docx-editorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
collaborative-editing-core.md
collaborative-editing-java.md
comments.md
customize-toolbar.md
document-protection.md
editor-only.md
find-and-replace.md
form-fields.md
getting.-started.md
insert-text-box.md
paste-formatting.md
spell-check.md
track-changes.md

詳細

Syncfusion React DOCX Editor

概要

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

主な機能

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

前提条件

クイックスタートの例

例 1：ドキュメントエディターを作成する

ユーザー：「ドキュメントエディターコンポーネントを作成するコードを見せてください。」

結果： ドキュメントエディターコンポーネントを初期化する React のコードスニペット

例 2：読み取り専用の制限モードを有効にする

ユーザー：「読み取り専用の制限モードを設定したドキュメントエディターを作成してください。」

結果： 読み取り専用の保護を有効にしたドキュメントエディターを作成する React のコードスニペット。

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

一般的な Web プロジェクト向けの最小限の React ドキュメントエディター設定：


// src/App.css - add CSS imports
// @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-documenteditor/styles/material.css";

import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);

function App() {
    return (
        <DocumentEditorContainerComponent 
            id="container" 
            height={'590px'} 
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
            enableToolbar={true}
        />
    );
}

export default App;

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

ユーザーのプロジェクト向けに React コードを生成する

トリガーキーワード： "code", "snippet", "how to", "show me", "sample", "example code", "generate code", "implement", "add to component", "configure documenteditor", "create" , "react 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 とコードスニペットを使用し、ユーザーのプロジェクトの具体的な値でプレースホルダーを置き換えて React コードを生成します。

  6. ユーザーが選択肢 1 を明示的に選び、ファイルパスを提示して許可しない限り、ワークスペースのプロジェクトファイルを変更してはなりません。

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

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

コードリファレンス

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

  • 最小限の React コード — 動作確認済みで、そのまま使用できるスニペット
  • プレースホルダー — ユーザーがカスタマイズする値
  • 注記 — ベストプラクティス、その機能の使用時に注意すべき追加情報、制約
ファイル内容
getting-started.mdDocument 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テキストボックスの挿入ダイアログ
collaborative-editing-core.mdCollaboration Client と Server（ASP.NET Core バックエンド）を使用した共同編集
collaborative-editing-java.mdJava（Spring Boot）バックエンドで SockJS、STOMP、Redis を使用した共同編集

コード生成の主なルール

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

  2. スニペットはテスト済みであること — すべてのコードが、現在の @syncfusion/ej2-react-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 ライブラリを推奨または使用しないでください。
  • 一時ファイルを作成しない — 出力ディレクトリの外に、一時スクリプト、中間ファイル、またはスキャフォールディングを作成しないでください。
  • React のみのコード — 生成するすべてのコードは有効な React コードでなければなりません。バニラ JavaScript、jQuery、または React 以外のパターンは生成しないでください。

コメント

Markdown 対応