本来是没打算写文章的，只是有些东西可能记不住，所以还是写下文章记录下来好点。
编辑器的需求
需求就是跟大型的论文编辑网差不多的，多了一个拖动章节目录排序的功能。
展示如下：
为啥要用这个编辑器
react里也就这个好用点了，而且满足一个最基本的需求，就是可以生成json格式的数据，那样就可以用来分成不同章节，做不同需求了。缺点就是，有bug，任何事件都会触发onChange，这是很无语的事。。而且还有其他的bug（这也是没法的事，毕竟是一个插件面面俱到还是难）
技术难点
- 选中之后的“工具栏”
- 勉强算个难点的，搜索文章后，插入和替换信息（主要是被坑惨了，*&……&……**）
- 目录的排序
- 图片插入（自带的媒体插入是有bug的，还是得自己写）
- 全文错误修改（也就是上图标红的地方，点击之后会有改正提示）
难点分析
-
工具栏，也就是一个全局出现的展示框，不过是被限定在了编辑器内部，而且还得随着编辑器内容的滚动而滚动，所以查看节点结构如下。
得出结论，需要在编辑器内部进行添加工具栏，so，只能加个呗。另一种方案，放到body层下，监听编辑器滚动事。个人决定吃力不讨好，还得判断它是否超出边界而隐藏一半或者多少。
-
插入替换。。。 不用想太多，它自带的就行ContentUtils.insertHTML(this.props.chapterListEditor, 插入或替换)，编辑器自己存储了rang，所以也不用自己创建。
-
排序，多了个按钮。原因两边是互相影响的，不能实时进行更新（会一直重复更新），所以这里用到了一个小技巧，用的两个组件分别用于展示和排序功能即可。
-
图片插入获取到的json是有问题的
画红框的就是图片的block，没有任何有用的信息，给外部链接地址也是一样的。所以这个就得自己写了，自定义block。这是官网地址可以学习一下，缺点 无法编辑和删除键删除。braft.margox.cn/demos/block
-
这个也是一个自定义block，不过有点小技巧。比如一段文字，有3处错误，如果一个错误一个纠正block，那么就会分成4段，因为一个block就是一段。所以这里得把一个block当成一个整体，然后在这个整体里，进行细分划块。
说起来肯定是简单的，不过有个思路肯定比啥都强。
完整编辑器git地址github.com/NEOS55555/p…
