mcpField
T
typo3-ckeditor5

typo3-ckeditor5

github.com/netresearch开发278 次安装1 周前更新
代码仓库

关于 typo3-ckeditor5

typo3-ckeditor5 是面向 TYPO3 扩展开发者的 CKEditor 5 集成技能，涵盖自定义插件、配置和迁移。它强调完整迁移路径以及 TYPO3 后端集成中的常见问题。

主要功能

  1. 01CKEditor 5 插件架构指导
  2. 02配置 TYPO3 插件与内容元素
  3. 03涵盖 CKEditor 4 到 5 迁移
  4. 04说明原生 JavaScript 替代 jQuery
  5. 05提供扩展验证命令

适用场景

  1. 01为 TYPO3 扩展开发编辑器插件
  2. 02配置 RTE 预设和插件注册
  3. 03将 CKEditor 4 插件迁移到 CKEditor 5

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/netresearch/typo3-ckeditor5-skill --skill typo3-ckeditor5

安装后在 Claude Code 中输入/typo3-ckeditor5确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

checkpoints.yaml
references/
ckeditor5-architecture.md
migration-guide.md
plugin-development.md
typo3-integration.md
scripts/
verify-ckeditor5.sh

详细介绍

TYPO3 CKEditor 5 技能

TYPO3 的 CKEditor 5 集成模式：自定义插件、配置和迁移。

专业领域

  • 架构：插件系统、架构与转换、命令、UI 组件
  • TYPO3 集成：YAML 配置、插件注册、内容元素
  • 迁移：CKEditor 4->5 完全重写（不存在兼容层）

参考文件

  • references/ckeditor5-architecture.md - 注意事项：figcaption、视图元素与 DOM 元素
  • references/typo3-integration.md - TYPO3 专属模式
  • references/plugin-development.md - TYPO3 接线、可使用的 API、无 jQuery 对话框
  • references/migration-guide.md - CKEditor 4->5 迁移

快速参考

插件注册（ext_localconf.php）
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset'] = 'EXT:my_ext/Configuration/RTE/MyPreset.yaml';
$GLOBALS['TYPO3_CONF_VARS']['SYS']['ckeditor5']['plugins']['my-plugin'] = [
    'entryPoint' => 'EXT:my_ext/Resources/Public/JavaScript/Ckeditor/my-plugin.js',
];
插件结构（必须拆分编辑与 UI）
packages/my-plugin/src/
├── myplugin.js           # Main: requires Editing + UI
├── mypluginediting.js    # Schema, converters, commands
├── mypluginui.js         # Toolbar buttons (ButtonView, componentFactory)
└── myplugincommand.js    # Command: execute() + refresh()
关键模式
// Schema: always register with allowIn/allowAttributes
schema.register('myElement', { inheritAllFrom: '$block', allowAttributes: ['type'] });

// Converters: both upcast + downcast required
conversion.for('upcast').elementToElement({ view: { name: 'div', classes: 'my-el' }, model: 'myElement' });
conversion.for('downcast').elementToElement({ model: 'myElement', view: 'div' });

// Command: must implement execute() AND refresh()
class MyCommand extends Command {
  refresh() { this.isEnabled = /* check model state */; }
  execute() { this.editor.model.change(writer => { /* ... */ }); }
}

移除 jQuery（至关重要）

TYPO3 后端 JS 将直接移除 jQuery，不设弃用期。CKEditor 5 插件必须仅使用原生 API：

  • 使用 querySelector/querySelectorAll 代替 $()
  • 使用 fetch() + async/await 代替 $.ajax/$.getJSON
  • 使用 Promise 代替 $.Deferred

后端集成

属性名称不匹配是头号错误。 前端 JS 必须与后端响应中的属性名称完全一致。

// Backend returns: { content: "...", model: "...", usage: {...} }
const text = result.content;  // CORRECT (not result.completion)

迁移（CKE4 -> CKE5）

CKEditor 5 是一次完全重写——不存在兼容层。迁移需要完整重写插件：

  • 审核 CKE4 插件，将功能映射到对应的 CKE5 功能
  • 将 CKEDITOR.plugins.add() 转换为基于类的 extends Plugin
  • 将 editor.widgets.add() 替换为架构、转换器和命令
  • 将 PageTSConfig 转换为 YAML 预设（Configuration/RTE/*.yaml）
  • 使用 ES6 模块（不使用 AMD/CommonJS）
  • 移除所有 jQuery 依赖
  • 确认后端响应属性名称与前端用法一致

验证

./scripts/verify-ckeditor5.sh /path/to/extension

贡献： https://github.com/netresearch/typo3-ckeditor5-skill

评论

支持 Markdown