HTML 页面添加批注

最近在做一个学校的XXX系统项目，因项目有个需求就是要像在word里面的添加批注功能一样，就是选中一段文字，然后为这些页面添加一些额外的信息；刚开始我们的方案是记录选中内容的下标，然后保存到数据库中，当要显示的时候就再数据库中读取下面然后在客户端用js合并，做着做着发现这种方法很烦，最后我们决定采用另一种方案，就是在在选中的文字两端加上自定义标记，批注的内容就是保存到自定义标签的属性里面去。想法是有了，开始着手做Demo了，一开始我们就像在CKEditor里面做一个插件，看了一天的CKEditor的API和源码，搞到一头雾水，写CKEditor插件太复杂了，有要什么初始化、又要什么