DEV Community
·
通过实践学习TDD：在Umbraco富文本编辑器中标记成员
内容提要
作者在构建系统时，为了在网站文本中提及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接口的使用感到不确定，认为可能有更好的实现方式。
延伸问答
如何在Umbraco中实现成员提及功能？
通过扩展Umbraco的TinyMCE富文本编辑器，使用AngularJS装饰器和TinyMCE的'autoCompleters'功能来实现成员提及。
MentionsManager类的主要功能是什么？
MentionsManager类负责管理提及逻辑，包括从后端获取数据并插入编辑器。
在测试过程中，作者对TypeScript编译器有什么发现？
作者发现TypeScript编译器的严格性，要求在编译前使用所有添加的内容。
提及的格式是什么样的？
提及的格式为<mention user-id="1324" class="mceNonEditable">@D_Inventor</mention>。
作者对UI与业务逻辑的结合有什么疑虑？
作者认为代码简单易变，且UI与业务逻辑的结合方式不理想。
如何处理提及的获取和插入？
通过实现fetch和pick方法，fetch方法用于获取提及，pick方法用于将选定的成员插入编辑器。
