jquery的富文本编辑器在react中的使用
2018-10-13 本文已影响0人
十九楼的清风
我写后台系统会遇到富文本编辑器,下面就是介绍怎么在react中实现这个功能。
首先,打开网址https://simditor.tower.im/,这是我们此次要用到的富文本编辑器。大家可以到网站上看看详细的使用说明。
首先我们到项目中先通过yarn安装一下
![](https://img.haomeiwen.com/i13055508/a178a9073a383b38.png)
在项目中新建通用富文本编辑器,在util文件夹下新建rich-editor,在这里我们来做富文本编辑器的初始化。
![](https://img.haomeiwen.com/i13055508/a2d2855e2d58a9cc.png)
再在项目中引用使用,初步样子就出来了。
![](https://img.haomeiwen.com/i13055508/44ab75d57ec65aa7.png)
![](https://img.haomeiwen.com/i13055508/9b32df37da1d3a92.png)
![](https://img.haomeiwen.com/i13055508/9c41fadace3d5dd0.png)
而且里面的功能还可以使用,感觉很不错,棒棒的。
接下来,我们来讲组件暴露给外面
![](https://img.haomeiwen.com/i13055508/e5904d3f7814e230.png)
然后,我们到外层组件中去定义一下onValueChange事件
![](https://img.haomeiwen.com/i13055508/7823ade98db58da3.png)
![](https://img.haomeiwen.com/i13055508/cb534ca66885f379.png)
接下来我们定义一下富文本上传接口的位置
![](https://img.haomeiwen.com/i13055508/f826a0cb3d3d5768.png)
这样我们的富文本编辑器就完成了。