jquery的富文本编辑器在react中的使用

我写后台系统会遇到富文本编辑器,下面就是介绍怎么在react中实现这个功能。

首先,打开网址https://simditor.tower.im/,这是我们此次要用到的富文本编辑器。大家可以到网站上看看详细的使用说明。

首先我们到项目中先通过yarn安装一下

在项目中新建通用富文本编辑器,在util文件夹下新建rich-editor,在这里我们来做富文本编辑器的初始化。

jquery的富文本编辑器在react中的使用_第1张图片

再在项目中引用使用,初步样子就出来了。

jquery的富文本编辑器在react中的使用_第2张图片

而且里面的功能还可以使用,感觉很不错,棒棒的。

接下来,我们来讲组件暴露给外面

jquery的富文本编辑器在react中的使用_第3张图片

然后,我们到外层组件中去定义一下onValueChange事件

jquery的富文本编辑器在react中的使用_第4张图片

接下来我们定义一下富文本上传接口的位置

jquery的富文本编辑器在react中的使用_第5张图片

这样我们的富文本编辑器就完成了。

你可能感兴趣的:(jquery的富文本编辑器在react中的使用)