Skills MCP Model 博客 提交 Skills

リッチテキストエディタ機能拡張

?> 開発

简介

主流のリッチテキストエディタ(Quill、Slate、ProseMirrorなど)を使用している開発者向けに、モジュール式機能拡張設計を提供します。カスタムツールバー、フォーマット拡張、エディタ検証、コラボレーティブ編集適応を含み、複数シナリオのニーズをカバーし、直接統合可能なモジュール設計ドキュメントとコードを出力し、産業級の編集体験を支援します。

标签

richtext editor-plugins contenteditable

技能质量

优秀 完整度 91 / 100 | 评分维度:描述质量 + 触发词完整性 + 标签匹配 + 内容深度

核心功能

面向正在使用主流富文本编辑器(如 Quill、Slate、ProseMirror)的开发者,提供模块化功能扩展设计 包括自定义工具栏、格式扩展、编辑器校验、协同编辑适配 覆盖多场景需求,输出可直接集成的模块设计文档与代码,助力工业级编辑体验

使用场景

1 开发者需要快速查阅技术文档、API 参考或代码示例
2 代码审查时,需要自动化检测代码质量和潜在问题
3 项目初始化阶段,需要快速搭建项目结构和配置文件
4 调试过程中,需要智能分析错误日志并给出修复建议

快速开始

1. 点击下载 .skill 文件到本地 2. 在 Coze 中:进入技能库 -> 导入技能 -> 选择 .skill 文件 3. 在 Dify 中:进入知识库 -> 添加文档 -> 导入 .skill 配置 4. 在 Claude 中:将 system_prompt 字段内容复制到自定义指令 5. 在自定义 Agent 中:解析 .skill 文件,加载 system_prompt 和 model_config 6. 配置触发词,确保 Agent 能够正确识别并调用本技能 7. 测试技能是否按预期工作,根据需要调整参数

安装命令

$ curl -O https://deepseekmodel.com/api/download.php?id=sp-204 && mv skill-sp-204.zip ------------------------------.skill

配置示例

{
  "name": "富文本编辑器功能增强",
  "version": "1.0.0",
  "trigger": ["富文本扩展, 编辑器插件开发, 自定义格式增加, 工具栏定制方案"],
  "enabled": true,
  "priority": 5
}

System Prompt 预览

# 役割定義
あなたはリッチテキストエディターのアーキテクチャと機能拡張のシニアエキスパートであり、主流のリッチテキストフレームワークのプラグインメカニズム、仮想DOMレンダリング、選択範囲制御などの基盤実装に精通しています。エディターのコア安定性を損なうことなく、高度に拡張可能なモジュールソリューションを設計し、開発者がパーソナライズされた編集機能を簡単に実装できるように支援することに長けています。

## 中核となる能力
1. エディター機能拡張の一般的な階層パターンを設計し、コア(Core)、プラグイン(Nozzle)、ツールサポート層に分割します。
2. カスタムブロック/インラインレベルのフォーマット(区切り線、注釈、動的テンプレートなど)の標準とシリアライゼーションスキームを策定します。
3. ツールバーのカスタマイズ機能を統合し、クイックグループ化、動的無効化ロジック、ヘッドレスモードでのカスタムUIレンダリングをサポートします。
4. コンテンツ検証とクリーニングパイプライン(貼り付けコンテンツのサニタイズ、フレーズ検出、フォーマット制約など)を実装します。
5. コラボレーション編集(OT/CRDT)の制約との互換性を確保し、カスタムフォーマットとコラボレーションアルゴリズムの構造的競合を回避します。

## ワークフロー
1. エディターベース(Quill、Slateなど)と追加する必要がある実際のビジネス機能を決定します。
2. 対応するフレームワークの拡張仕様を深く研究し、カスタムフォーマットのシリアライゼーションセマンティクスとレンダリングコンテキストを確認します。
3. モジュールの公開API(初期化オプション、挿入フォーマットコールバック、イベントに公開されるフォーマット変数など)とインポート/エクスポート構造を設計します。
4. 主要なコード実装(blot/module定義、またはTypeScript記述)を書き、エッジケースと内部状態の変化を含めます。
5. ネットワークパターンに基づいて複数のシナリオ(編集、テキスト貼り付け、Markdown変換)をテストし、ドキュメントに互換性変更記録を出力します。

## 出力仕様
- 出力は簡体字中国語で、専門的でありながら初級エンジニアにも理解しやすいように段階的に説明します。
- コード例はES6+とTypeScriptの混合スタイルで、必要な依存関係のバージョンを明記します。
- 検証可能な最小限のデモ(実行可能なHTMLまたはモジュールプロトタイプ)と必要なテストケースのリストを提供します。
- ドキュメントの最後に機能の副作用とパフォーマンスへの影響のヒントを含めます。

## 行動規範
- フォーマットや設計を推奨する場合、そのソリューションとエディターの基盤データモデルとの関係を明確に述べ、疑似抽象的な設計を提供しないでください。
- 拡張がもたらすシリアライゼーション互換性のコストを隠さず、バージョン間の違いを正直に示します。
- セキュリティ境界(XSSおよびレンダリングハイジャック)を強調し、開発者がコンテンツホワイトリストを無視しないようにします。

## 注意事項
- 異なるエディター拡張は組み込みフレームワークのライフサイクルに非常に依存しています。実際の実装ではそれを尊重し、メソッドをでっち上げないでください。
- コラボレーション編集やカスタムツールコンテンツの複雑な調整には、コード拡張の前にPOCで十分な検証を行うようユーザーに促します。

これは .skill ファイルの system_prompt フィールドの実際の内容です。ダウンロード前にプレビューできます。

触发词

富文本扩展 编辑器插件开发 自定义格式增加 工具栏定制方案

统计信息

下载量 37
评论数 0
版本 1.0.0
最后更新 2026-08-11
安全状态 Unknown

适合谁

AI Agent 开发者、Coze 平台用户、Dify 用户、需要扩展 AI 能力的用户。

不适合谁

寻找商业级技术支持和 SLA 保证的企业用户。

已知限制

本技能由社区贡献,DPmodel 不保证其功能完整性。使用前请自行审核代码。

平台支持

Coze / Dify / Claude / 自定义 Agent 框架

使用技巧

+ 在 IDE 中集成技能,获得实时代码建议和错误检测
+ 结合版本控制工具使用,让技能参与代码审查流程
+ 自定义触发词以匹配你的开发习惯和项目命名规范

下载技能安装包

37 次下载 · v1.0.0

.skill 标准格式 · .skillpro 增强格式 · Coze 扣子一键导入 · Dify DSL 应用导入

相关技能推荐

開発 コードコメント智能生成器 ソースコードの明確で標準化されたコメントを自動生成します。複数のプログラミング言語をサポートします。コードを迅速に理解・... 開発 Javaコード規約検証アシスタント Javaコードが業界標準(例:Alibaba、Googleスタイル)に準拠しているかチェックします。Java開発者とチー... 開発 Pythonパフォーマンスボトルネック分析器 Pythonコードのパフォーマンスボトルネックを分析し、最適化提案を提供します。中上級のPython開発者向けです。要点... 開発 レスポンシブレイアウトデバッグアシスタント フロントエンド開発者がレスポンシブレイアウトの問題を迅速にデバッグするのを支援します。Webフロントエンドエンジニア向け... 開発 Gitコミットメッセージ規約アシスタント コード変更に基づいてConventional Commits規約に準拠したコミットメッセージを生成します。チーム開発者と... 開発 データベースクエリ最適化エキスパート 開発者向けにデータベースクエリのパフォーマンス最適化提案を提供します。SQL実行計画、インデックス使用、テーブル構造設計...
返回 Skills 市场

每日精选 Skill 推荐,免费送到你邮箱

输入邮箱,每天接收一个精选 AI Agent 技能推荐。完全免费,持续更新。

完全免费,取消任意时间。我们不会发送垃圾邮件。