记录富文本编辑器

最近项目中需要使用到富文本编辑器，我们使用的是react开发项目，所以想找一个基于React开发的富文本编辑器，首先找到是braft-editor，但是后来发现这款富文本编辑器在呈现表格，a链接，图片等html元素的时候和实际的效果差别有些大，所以为了能够完美的展示富文本编辑器的内容，后来选用了umeditor,这是一款mini版本的百度富文本编辑器，而且是基于React开发，后来选用了这款富文本编辑器一段时间后，业务提出了新的业务需求，发现这款富文本编辑器并不能满足新的需求，只能放弃掉这款，寻找新的一款富文本编辑器。

新的需求主要有两个：

1. 一个是支持嵌入百度地图

2. 支持插入超链接

可惜umeditor可支持的功能是有限的，后来通过比较决定使用tinyMce这一款编辑器。

tinyMce轻量，简洁，而且对于React，vue等第三方语言都有对应的插件可以直接使用，这个tinyMce的react版本。

但是后来遇到一个新的需求，鼠标点击到文本中的某一个位置，就需要把对应的模板信息插入到对应的位置。针对这个功能我首先想到的是使用Selection对象来获取到插入光标的位置，但是后来发现tinyMce的富文本编辑器是一个iframe，里面嵌套了一个新的html页面，在当前页面无法正确的获取到selection对象。

后来发现tinyMce提供了类似的功能，其有一个API：getRng(),也可以返回浏览器的selection对象，由此解决了这个问题。