您现在的位置是：首页 >技术教程 >React-quill组件的内容渲染相关问题网站首页技术教程

使用富文本编辑器（react-quill）做了一个类似学习通课程管理的项目，大概就是需要多个富文本编辑器+及时显示的ppt、pdf、docx、video

在使用过程中点击“+”按钮可以在整个课程中随便一个位置插入ReactQuill，需要解决的问题有两个：

1. debug的时候发现，当整个课程中存在一个ReactQuill时，在它的下方插入一个ReactQuill是正常的，但如果在它的上方插入一个ReactQuill时，原本以为结果会是两个ReactQuill，但只会变成一个，并且里面是没内容的（其实内容是<p><br/></p>）
2. 保存课程的时候要提示用户哪个富文本编辑器没内容，同时要保证，如果目前存在内容为空的ReactQuill时，不能插入新的

第一个问题我打了很多断点都没找到原因，我可以确保我的代码没有问题，但是存在ReactQuill上插入一个新的ReactQuill时就会出现这个问题，而且会调用其onChange函数。

最后解决的方法是：原来插入内容时ReactQuill的初始值我设置为空字符串（‘’），现在初始值改成了（<p><br/></p>），这样就不会出现这个问题了

第二个问题只需要保存、添加新ReactQuill的时候加一个正则，把所有的（<p>）（<br/>）（</p>）都全局（/g）过滤掉后，看看内容是否为空即可

针对第一个问题，我看到控制台里有警告（DOMinsert之类的），看了一下github的issue，有很多国外老哥也提出了这个问题，但是好像这组件很多年没更新了，用这个方法解决之后这个warning也消失了，应该是这个问题导致的。