CKEditor 5 Plugin

💻 PROGRAMMING · Coding advanced ⭐ 81

Architects a complete CKEditor 5 NewsletterPlugin migrating from a legacy CKEditor 4 plugin.

You are a senior CKEditor 5 plugin architect.

I need you to build a complete CKEditor 5 plugin called "NewsletterPlugin".

Context:
- This is a migration from a legacy CKEditor 4 plugin.
- Must follow CKEditor 5 architecture strictly.
- Must use CKEditor 5 UI framework and plugin system.
- Must follow documentation:
 https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-components.html
 https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html

Environment:
- CKEditor 5 custom build
- ES6 modules
- Typescript preferred (if possible)
- No usage of CKEditor 4 APIs

========================================
FEATURE REQUIREMENTS
========================================

1) Toolbar Button:
- Add a toolbar button named "newsletter"
- Icon: simple SVG placeholder
- When clicked → open a dialog (modal)

2) Dialog Behavior:
The dialog must contain input fields:
- title (text input)
- description (textarea)
- tabs (dynamic list, user can add/remove tab items)
 Each tab item:
 - tabTitle
 - tabContent (HTML allowed)

Buttons:
- Cancel
- OK

3) On OK:
- Generate structured HTML block inside editor
- Structure example:

 Tab 1

 Tab 2

 Content 1

 Content 2

4) Behavior inside editor:

- First tab always active by default.
- When user clicks tab link:
 - Remove class "active" from all tabs and panes
 - Add class "active" to clicked tab and corresponding pane
- When user double-clicks :
 - Open dialog again
 - Load existing data
 - Allow editing
 - Update HTML structure

5) MUST USE:
- GeneralHtmlSupport (GHS) for allowing custom classes & attributes
- Proper upcast / downcast converters
- Widget API (toWidget, toWidgetEditable if needed)
- Command class
- UI Component system (ButtonView, View, InputTextView)
- Editing & UI part separated
- Schema registration properly

6) Architecture required:

Create structure:

- newsletter/
 - newsletterplugin.ts
 - newsletterediting.ts
 - newsletterui.ts
 - newslettercommand.ts

7) Technical requirements:

- Register schema element:
 newsletterBlock
- Must allow:
 class
 id
 href
 data attributes

- Use:
 editor.model.change()
 conversion.for('upcast')
 conversion.for('downcast')

- Handle click event via editing view document
- Use editing.view.document.on( 'click', ... )
- Detect double click event

8) Important:
Do NOT use raw DOM manipulation.
All updates must go through editor.model.

9) Output required:
- Full plugin code
- Proper imports
- Comments explaining architecture
- Explain migration differences from CKEditor 4
- Show how to register plugin in build

10) Extra:
Explain how to enable GeneralHtmlSupport configuration in editor config.

========================================

Please produce clean production-ready code.
Do not simplify logic.
Follow CKEditor 5 best practices strictly.
#ckeditor#plugin#javascript#migration

Кураторская подборка fizoni.com · структура, примеры использования и рабочие сценарии

Похожие промпты

💡 Понравился этот промпт?

📦 Prompts for Programmers — 411 промптов

Вместо одного промпта — целый набор по теме. Готовые процессы, структура, быстрый старт. Код, рефакторинг, дебаг, архитектура, ревью, SQL и API.…

Забрать набор — $2.99 🎁 6 бесплатных промптов

Всего $2.99 · мгновенный доступ · оплата картой

🎁 Забери 6 лучших промптов бесплатно

Понравился этот промпт? Мы собрали ещё 6 отборных — для бизнеса, кода и продуктивности. Плюс доступ к полной библиотеке 2000+ промптов.