OpenProject 11.1.0 版本技术解读：WYSIWYG 编辑器重构、Gantt 里程碑聚合与工作包分组折叠实战-创锋一号

OpenProject 11.1.0 版本技术解读：WYSIWYG 编辑器重构、Gantt 里程碑聚合与工作包分组折叠实战

【免费下载链接】openprojectOpenProject is the leading open source project management software for product, project and portfolio management. A powerful Jira alternative with agile planning, issue tracking, roadmaps, Gantt charts, time tracking, collaboration features, and more. Available on premises or in the cloud. ⭐ Star us on GitHub项目地址: https://gitcode.com/GitHub_Trending/op/openproject

OpenProject 11.1.0（发布于 2020-12-17）是一次聚焦"经典与敏捷项目管理体验打磨"的特性版本，核心工作集中在富文本编辑器（CKEditor 5 升级至 23.0.0）的样式体系重构、@通知内联用户名的直接展示、甘特图中项目里程碑的单行聚合，以及工作包列表分组的一键折叠。本文基于版本说明原文展开，并结合仓库前端源码（CKEditor 集成层、工作包表格与甘特图相关实现）补充底层原理与可验证依据，帮助读者理解这些 UI 能力背后的实现方式，以及如何安装、升级到该版本。

1. 版本概览：一次面向协作体验的迭代

OpenProject 11.1.0 的发布说明将其定位为"带来大量新特性与缺陷修复，同时改进经典与敏捷项目管理体验"的版本。从变更清单看，本次迭代的主线可以归纳为四条：

编辑器体验：重构 WYSIWYG 富文本编辑器（含 Wiki 页面、工作包描述等所有文本域）的排版样式，并升级底层 CKEditor 5 到 23.0.0；
协作通知：在编辑工作包评论进行 @通知时，直接显示被提及用户的姓名，降低选错成员的概率；
可视化聚合：甘特图支持将项目的里程碑按项目聚合到单一行，一键折叠后仍能总览关键交付日期；
企业合规流程：Enterprise Cloud 版在管理后台提供在线审阅与签署数据处理协议（DPA）的能力。

此外还扩展了认证配置（新增 OpenID Connect 提供商）并优化了浏览器打印（如 Wiki 页面）的排版。下文将逐项拆解每个能力的实现细节与使用方式。

2. WYSIWYG 文本编辑器样式重构与 CKEditor 5 升级

2.1 本次改进覆盖的范围

11.1 对 WYSIWYG 编辑器的改进不只是"换皮肤"，而是覆盖了文本、标题、表格、目录（Table of Contents）布局等一整套排版体系。发布说明明确指出，该改进不仅作用于 Wiki 页面，也作用于其他文本字段——例如工作包的描述字段，这意味着同一套样式与宏能力在 Wiki、工作包描述、自定义文本组件等场景中保持一致。

2.2 底层支撑：CKEditor 5 升级到 23.0.0

为达成上述改进，11.1 将 CKEditor 5 升级至 23.0.0（变更项见发布说明中 "#34595 Update CK Editor 5 to version 23.0.0"）。从当前仓库源码可以看到 OpenProject 对 CKEditor 的深度集成方式：

集成入口位于 ckeditor-setup.service.ts，通过create()方法在包装元素上创建编辑器实例，并区分full与constrained两种编辑器类型（ICKEditorType）；
编辑器按需动态加载：load()使用动态import()加载core-vendor/ckeditor/ckeditor包，并在浏览器空闲时预取（prefetch），同时按当前 UI 语言加载对应翻译文件vendor/ckeditor/translations/${locale}.js（见 ckeditor-setup.service.ts）；
通过resolveMacros()方法控制宏（Macro）插件的启用范围：'resource'启用目录（ToC）、嵌入表格、工作包按钮与工作包快捷信息四类宏，'wiki'仅启用 Wiki 页面链接宏，且仅在系统配置了 Wiki 提供方时追加（wikiLinkMacros数组），见 ckeditor-setup.service.ts。

也就是说，"目录布局改进"并非静态样式，而是由OPMacroToc这类宏插件驱动，配合样式文件（如 frontend/src/global_styles/content/editor/_ckeditor.sass）共同呈现。

2.3 11.1 中与编辑器相关的缺陷修复

版本同时修复了一批编辑器回归问题，侧面反映了本次重构的涉及面之广：

预览模式下格式化未正确应用（#35593）；
标题下缺少线条（#35603）；
表格左移添加时出现极小列、编辑态下表头格式化未生效（#35610）；
与 ToC 同一行的宏导致目录链接失效（#35611）；
更新到 11.1 后代码片段相互嵌套显示（#35628）；
更新后图片默认左对齐（#35629）；
表格单元格内单词内换行异常（#35644）；
无法在不重复编号的情况下设置编号标题的目录（#35656）；
标题自定义类支持：变更项 "#35104 Add custom classes to the CKEditor elements"。

这些修复项几乎都围绕"编辑态与预览态一致性""表格与目录布局"展开，与本次样式重构的主题一一对应，可视为同一技术工作的收尾闭环。

3. @通知直接显示用户姓名

3.1 功能说明

在 11.1 之前，工作包评论中 @提及某位成员时，编辑模式下往往只显示半成品或不直观的占位，容易 @错人。11.1 之后，编辑态中 @提及的用户姓名会被直接渲染显示，从而更便捷地通知到正确的团队成员。

对应变更项为 "#32645 @ mention should show user name in the editor"。

3.2 对协作流程的意义

从使用场景看，该能力降低了"通知发错人"的隐性成本：当评论内容较长、涉及多个参与者时，编辑者可以立即确认每个 @ 指向的成员姓名与头像是否正确，无需切换到预览态。这一改进与 OpenProject 的实时协作定位一致——发布说明中专门配图演示了编辑态下的 @ 通知展示效果。

4. 甘特图：项目里程碑单行聚合

4.1 功能说明

11.1 允许用户将项目在甘特图中按项目聚合，里程碑显示在单一行中：

按项目分组后，点击 "collapse all"（全部折叠）按钮可将分组行收起；
收起后该项目的里程碑仍然聚合显示在一行中；
用户可以快速获得项目所有关键交付日期的总览。

4.2 使用方式与场景

典型用法是在甘特图（Gantt chart）视图下按项目分组浏览多项目组合（Portfolio）计划：展开时查看各项目内部任务，折叠时仍能在单一行中看到该项目所有里程碑的菱形标记与对应日期，适合高层级的交付日期总览。对应变更项为 "#34943 Display project's milestones in Gantt chart aggregated in single row"。

4.3 相关修复

同区域还修复了 "#34312 Wrong default settings for Gantt chart button in project list"（项目列表中甘特图按钮的默认设置错误），保证入口默认行为正确。

5. 工作包列表：分组一键折叠 / 展开

5.1 功能说明

工作包表格支持按任意属性分组（如负责人 assignee、状态 status、优先级 priority 或类型 type）。11.1 在分组后，工作包列表顶部新增 "collapse all"（全部折叠）与 "expand all"（全部展开）按钮，可一次性收拢或展开组内的所有属性分组，避免在大量分组间逐个点击。

5.2 配套修复

"#35004 Boards view doesn't keep the list order (order of the columns)"：修复看板视图不保持列表（列）顺序的问题，保证分组折叠与看板列排序行为一致；
"#35620 500er server error when opening query"：修复打开查询时的服务器端 500 错误，保障分组视图加载稳定性。

6. Enterprise Cloud：GDPR 数据处理协议（DPA）在线签署

6.1 背景

对欧盟客户而言，GDPR 要求在使用 Enterprise Cloud 版之前签署数据处理协议（Data Processing Agreement，有时也称数据处理附录）。此前该流程完全人工处理：用户打印文档、填写信息、寄回，OpenProject 再签署并寄回，双方成本都很高。

6.2 11.1 的自动化方案

11.1 将该流程自动化，显著减少双方人工负担，让合规流程更容易执行：

入口：Administration → GDPR；
能力：在管理后台在线审阅并签署 DPA 文档。

配套修复包括 DPA 邮件文案拼写错误（#35653）与 OpenProject 内 DPA 文本拼写错误（#35654），说明该模块在 11.1 中经过了完整的打磨。

7. 其他改进：OpenID Connect 与打印优化

除上述主线功能外，11.1 还包含两项值得注意的改进：

认证配置扩展：为认证配置（authentication profile）新增OpenID Connect 提供商，使基于 OIDC 的单点登录接入更完整；
浏览器打印优化：优化了通过浏览器打印功能（如打印 Wiki 页面）时的排版输出。

在安全与身份认证方面，OpenID Connect 提供商与仓库中已有的 modules/openid_connect 模块体系相互配合，使 Enterprise/Community 版在身份联邦场景下具备更灵活的接入方式。

8. 11.1 完整 Bug 修复与变更清单

发布说明汇总了全部变更项与修复项，以下为完整清单（编号对应 OpenProject 社区工作包）：

变更（Changed）

@提及应在编辑器中显示用户名（#32645）
将 CKEditor 5 升级到 23.0.0（#34595）
甘特图中项目里程碑聚合显示在单行（#34943）
为 CKEditor 元素添加自定义类（#35104）
更改项目列表菜单项的图标与文案（#35436）

修复（Fixed）

项目列表中甘特图按钮的默认设置错误（#34312）
锁定的工作包在项目复制时不复制（#34496）
看板视图不保持列顺序（#35004）
标题（caption）被复制进描述并重复出现（#35123）
复制预算：手动设置的成本被重置为按数量推导的成本（#35484）
管理 > 群组中显示 "Translation missing"（#35578）
WYSIWYG 编辑器预览中格式未正确应用（#35593）
在 Wiki 页面标题添加 "." 时项目出现内部错误（#35594）
WYSIWYG 编辑器中标题下缺少线条（#35603）
WYSIWYG 表格：向左添加到表头列旁时出现极小列 / 编辑中表头格式未生效（#35610）
宏与 ToC 同一行时目录链接不可用（#35611）
打开查询时出现 500 服务器错误（#35620）
访问用户专属活动页面时 500（#35621）
工作包表单显示 "no end date" 而非 "no finish date"（#35624）
升级到 11.1 后代码片段相互嵌套显示（#35628）
升级到 OpenProject 11.1 后图片左对齐（#35629）
在 qa-edge 选择用户链接时内部错误（#35640）
表格单元格内单词内换行（#35644）
DPA 邮件中的拼写错误（#35653）
OpenProject 中 DPA 文本的拼写错误（#35654）
无法在不重复编号的情况下为目录设置编号标题（#35656）

9. 安装与升级到 11.1

9.1 立即体验的途径

Enterprise Cloud：创建一个实例即可立即使用 11.1，并支持14 天免费试用；
自托管（on-premises）：可参考安装指南在自有基础设施上部署；
Community → Enterprise 升级：在Administration → Enterprise Edition中直接申请 14 天免费试用 Token，无需离开当前 Community 安装。

9.2 从旧版本迁移

对于打包安装（packaged）或 Docker 安装的用户，请遵循升级指南将现有安装升级到 11.0/11.1。需要注意升级指南页面顶部的蓝色提示框（通常包含备份、版本跳转限制等关键注意事项）。

Enterprise Cloud（托管环境）由官方自动更新，用户无需执行迁移操作。

10. 致谢与后续版本

11.1 的实现离不开社区贡献：包括所有参与开发、设计、项目管理的贡献者；赞助部分开源特性并将其贡献给 Community 的科隆市（City of Cologne）；创建特性请求与报告缺陷的用户；以及通过 CrowdIn 提供翻译的贡献者。版本致谢中还专门列出了报告并定位缺陷的社区成员。

OpenProject 的后续版本演进可以在社区开发路线图中预览。对于希望深入了解 11.1 各能力底层实现的读者，建议从以下仓库位置继续阅读：

编辑器集成核心：ckeditor-setup.service.ts
编辑器全局样式：frontend/src/global_styles/content/editor/_ckeditor.sass
OpenID Connect 模块：modules/openid_connect
完整版本说明原文：docs/release-notes/11/11-1-0/README.md

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析