中文译文
你是一位资深 CKEditor 5 插件架构师。
我需要你构建一个完整的 CKEditor 5 插件，名为 "NewsletterPlugin"。
背景：
- 这是从旧版 CKEditor 4 插件迁移而来。
- 必须严格遵循 CKEditor 5 架构。
- 必须使用 CKEditor 5 UI 框架和插件系统。
- 必须遵循文档： https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-components.html https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html
环境：
- CKEditor 5 自定义构建
- ES6 模块
- 优先使用 Typescript（如果可能）
- 不使用 CKEditor 4 API
======================================== 功能需求
- 工具栏按钮：
- 添加一个名为 "newsletter" 的工具栏按钮
- 图标：简单的 SVG 占位符
- 点击时 → 打开一个对话框（模态框）
- 对话框行为： 对话框必须包含输入字段：
- title（文本输入框）
- description（文本区域）
- tabs（动态列表，用户可以添加/删除标签项） 每个标签项： - tabTitle - tabContent（允许 HTML）
按钮：
- Cancel
- OK
- 点击 OK 时：
- 在编辑器内生成结构化 HTML 块
- 结构示例：
- 编辑器内的行为：
- 默认情况下第一个标签始终处于激活状态。
- 当用户点击 标签链接时：
- 从所有标签和面板中移除 "active" 类
- 为被点击的标签和对应的面板添加 "active" 类
- 当用户双击 时：
- 再次打开对话框
- 加载现有数据
- 允许编辑
- 更新 HTML 结构
- 必须使用：
- GeneralHtmlSupport（GHS）以允许自定义类和属性
- 正确的 upcast / downcast 转换器
- Widget API（toWidget，如需要则使用 toWidgetEditable）
- Command 类
- UI 组件系统（ButtonView、View、InputTextView）
- 编辑与 UI 部分分离
- 正确注册 Schema
- 所需架构：
创建结构：
- newsletter/
- newsletterplugin.ts
- newsletterediting.ts
- newsletterui.ts
- newslettercommand.ts
- 技术要求：
注册 schema 元素： newsletterBlock
必须允许： class id href data 属性
使用： editor.model.change() conversion.for('upcast') conversion.for('downcast')
通过编辑视图文档处理点击事件
使用 editing.view.document.on( 'click', ... )
检测双击事件
重要： 不要使用原生 DOM 操作。 所有更新必须通过 editor.model 进行。
所需输出：
- 完整的插件代码
- 正确的导入
- 解释架构的注释
- 解释与 CKEditor 4 的迁移差异
- 展示如何在构建中注册插件
- 额外： 解释如何在编辑器配置中启用 GeneralHtmlSupport 配置。
========================================
请生成干净、可投入生产的代码。 不要简化逻辑。 严格遵循 CKEditor 5 最佳实践。
English original
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
- Toolbar Button:
- Add a toolbar button named "newsletter"
- Icon: simple SVG placeholder
- When clicked → open a dialog (modal)
- 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
- On OK:
- Generate structured HTML block inside editor
- Structure example:
- 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
- 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
- Architecture required:
Create structure:
- newsletter/
- newsletterplugin.ts
- newsletterediting.ts
- newsletterui.ts
- newslettercommand.ts
- 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
Important: Do NOT use raw DOM manipulation. All updates must go through editor.model.
Output required:
- Full plugin code
- Proper imports
- Comments explaining architecture
- Explain migration differences from CKEditor 4
- Show how to register plugin in build
- 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.