typo3-ckeditor5

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',
];

プラグイン構成（Editing／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 を使用する
• $.ajax／$.getJSON の代わりに fetch() と async/await を使用する
• $.Deferred の代わりに Promise を使用する

バックエンドとの統合

プロパティ名の不一致は、最も多いバグです。 フロントエンド 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