← detail.back
通用 #简短 detail.difficulty_labelbeginner

CKEditor 5 插件

CKEditor 5 Plugin

你是一名资深的 CKEditor 5 插件架构师。 我需要你构建一个名为“NewsletterPlugin”的完整 CKEditor 5 插件。 背景: - 这是从旧版 CKEditor 4 插件迁移而来。 - 必须遵循...

detail.target_platforms ChatGPTClaudeGemini
您是一位资深的 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

========================================
功能要求
========================================

1) 工具栏按钮:
- 添加一个名为 "newsletter" 的工具栏按钮
- 图标:简单的 SVG 占位符
- 点击时 → 打开一个对话框(模态框)

2) 对话框行为:
对话框必须包含输入字段:
- 标题 (文本输入)
- 描述 (文本区域)
- 选项卡 (动态列表,用户可以添加/删除选项卡项)
    每个选项卡项:
        - 选项卡标题 (tabTitle)
        - 选项卡内容 (tabContent,允许 HTML)

按钮:
- 取消 (Cancel)
- 确定 (OK)

3) 点击确定时:
- 在编辑器内部生成结构化的 HTML 块
- 结构示例:

<div class="newsletter">
    <ul class="newsletter-tabs">
        <li class="active">
            <a href="#tab-1" class="active">Tab 1</a>
        </li>
        <li>
            <a href="#tab-2">Tab 2</a>
        </li>
    </ul>
    <div class="newsletter-content">
        <div id="tab-1" class="tab-pane active">
            Content 1
        </div>
        <div id="tab-2" class="tab-pane">
            Content 2
        </div>
    </div>
</div>

4) 编辑器内部行为:

- 第一个选项卡始终默认激活。
- 当用户点击 <a> 选项卡链接时:
    - 从所有选项卡和面板中移除 "active" 类
    - 为被点击的选项卡和对应的面板添加 "active" 类
- 当用户双击 <a> 时:
    - 再次打开对话框
    - 加载现有数据
    - 允许编辑
    - 更新 HTML 结构

5) 必须使用:
- GeneralHtmlSupport (GHS) 以允许自定义类和属性
- 适当的 upcast / downcast 转换器
- Widget API (toWidget, toWidgetEditable 如果需要)
- Command 类
- UI 组件系统 (ButtonView, View, InputTextView)
- 编辑和 UI 部分分离
- 正确的 Schema 注册

6) 所需架构:

创建结构:

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

7) 技术要求:

- 注册 schema 元素:
    newsletterBlock
- 必须允许:
    class
    id
    href
    data 属性

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

- 通过编辑视图文档处理点击事件
- 使用 editing.view.document.on( 'click', ... )
- 检测双击事件

8) 重要:
不要使用原始 DOM 操作。
所有更新必须通过 editor.model 进行。

9) 所需输出:
- 完整的插件代码
- 正确的导入
- 解释架构的注释
- 解释与 CKEditor 4 的迁移差异
- 展示如何在构建中注册插件

10) 额外:
解释如何在编辑器配置中启用 GeneralHtmlSupport 配置。

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

请生成干净、可用于生产的代码。
不要简化逻辑。
严格遵循 CKEditor 5 的最佳实践。