DEV Community
·
通过实践学习TDD：在Umbraco富文本编辑器中标记成员
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
作者在构建系统时，为了在网站文本中提及Umbraco成员，扩展了Umbraco的TinyMCE富文本编辑器。通过AngularJS装饰器和TinyMCE的'autoCompleters'功能，实现了成员提及功能。使用Jest进行测试，并创建了MentionsManager类来管理提及逻辑，包括从后端获取数据并插入编辑器。尽管代码简单易变，但作者对UI与业务逻辑的结合方式仍有疑虑。
🎯
关键要点
- 作者在构建系统时需要在网站文本中提及Umbraco成员。
- 为了实现成员提及功能，作者扩展了Umbraco的TinyMCE富文本编辑器。
- 使用AngularJS装饰器和TinyMCE的'autoCompleters'功能来实现提及功能。
- 提及的格式为<mention user-id="1324" class="mceNonEditable">@D_Inventor</mention>。
- 作者使用Jest进行测试，并创建了MentionsManager类来管理提及逻辑。
- MentionsManager类负责从后端获取数据并插入编辑器。
- 作者对UI与业务逻辑的结合方式存在疑虑，认为代码简单易变。
- 在测试过程中，作者发现TypeScript编译器的严格性。
- 作者实现了fetch和pick方法来处理提及的获取和插入。
- 作者对Range接口的使用感到不确定，认为可能有更好的实现方式。
➡️
