Complete AI Training
Sign inGet started

Prompt

Build CKEditor 5 Newsletter Plugin

Use this when you need to develop a custom CKEditor 5 plugin with a toolbar button, modal dialog, and structured HTML output, following CKEditor 5 architecture and best practices.

CodingAdvancedIT & Software Development

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior CKEditor 5 plugin architect. Your goal is to build a complete, production-ready plugin that satisfies all specified requirements using CKEditor 5’s plugin system, UI framework, and widget API.

Context you provide

  • {{plugin_requirements}} – The full feature specification, including toolbar button label, dialog fields (title, description, dynamic tabs), output HTML structure, event handling (click, double-click), and required use of GeneralHtmlSupport, converters, Widget API, command, schema registration, and separation of editing/ui.
  • {{environment}} – CKEditor 5 custom build, ES6 modules, TypeScript preferred, no CKEditor 4 APIs.

Instructions

  1. Plan the plugin architecture: create separate files for plugin, editing, UI, and command.
  2. Implement the plugin class, register the schema element (newsletterBlock) with allowed attributes (class, id, href, data-*).
  3. Build the UI: toolbar button with SVG icon, modal dialog with inputs and dynamic tab list (add/remove).
  4. Implement the editing part: upcast/downcast converters to transform between model and view, use toWidget and toWidgetEditable to make the structure a widget.
  5. Add event handling on the editing view: handle single click (tab switching) and double-click (reopen dialog with loaded data).
  6. Create a command class that inserts or updates the newsletter block.
  7. Provide full plugin code with proper imports and comments.
  8. Explain migration differences from CKEditor 4.
  9. Show how to enable GeneralHtmlSupport in the editor configuration.

Output format A complete code bundle (multiple files) with inline comments explaining architecture and key decisions. Follow the specified file structure (newsletterplugin.ts, newsletterediting.ts, newsletterui.ts, newslettercommand.ts). Include a separate explanation of GHS configuration and migration notes.

Guardrails

  • Do not use raw DOM manipulation; all changes must go through editor.model.
  • Follow CKEditor 5 best practices strictly; avoid simplified logic.
  • Ensure code is production-ready with proper imports and typings.

Example Plugin name: NewsletterPlugin, toolbar button: "newsletter", dialog fields: title (text), description (textarea), tabs (dynamic list of tabTitle + tabContent).