typo3-ckeditor5

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

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

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

TYPO3 CKEditor 5 Skill

CKEditor 5 integration patterns for TYPO3: custom plugins, configuration, and migration.

Expertise Areas

Architecture: Plugin system, schema/conversion, commands, UI components
TYPO3 Integration: YAML configuration, plugin registration, content elements
Migration: CKEditor 4->5 complete rewrite (no compatibility layer exists)

Reference Files

references/ckeditor5-architecture.md - Gotchas: figcaption, view-vs-DOM elements
references/typo3-integration.md - TYPO3-specific patterns
references/plugin-development.md - TYPO3 wiring, consumable API, jQuery-free dialogs
references/migration-guide.md - CKEditor 4->5 migration

Quick Reference

Plugin Registration (ext_localconf.php)

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

Plugin Structure (Editing/UI Split Required)

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()

Key Patterns

javascript

// 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 Removal (Critical)

TYPO3 backend JS is dropping jQuery without deprecation period. CKEditor 5 plugins must use native APIs only:

querySelector/querySelectorAll instead of $()
fetch() + async/await instead of $.ajax/$.getJSON
Promise instead of $.Deferred

Backend Integration

Property name mismatch is the #1 bug. Frontend JS must match exact backend response property names.

javascript

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

Migration (CKE4 -> CKE5)

CKEditor 5 is a complete rewrite -- no compatibility layer. Migration requires full plugin rewrite:

[ ] Audit CKE4 plugins, map features to CKE5 equivalents
[ ] Convert CKEDITOR.plugins.add() to class-based extends Plugin
[ ] Replace editor.widgets.add() with schema + converters + commands
[ ] Convert PageTSConfig to YAML preset (Configuration/RTE/*.yaml)
[ ] Use ES6 modules (no AMD/CommonJS)
[ ] Remove all jQuery dependencies
[ ] Verify backend response property names match frontend usage

Verification

bash

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

Contributing: https://github.com/netresearch/typo3-ckeditor5-skill