700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > React +antd +wangEditor 富文本编辑器

React +antd +wangEditor 富文本编辑器

时间:2022-01-31 08:14:21

相关推荐

React +antd +wangEditor 富文本编辑器

1. 安装

npm i wangeditor --save

2. 引入:

import E from 'wangeditor';

3. 渲染:

<div id="div1"></div>

const editor = new E('#div1')editor.create();

实现效果:

上面我们成功的把wangEditor 这个富文本编辑器显示到页面上了,接下来我们需要做的事情就是我们要获取到富文本编辑器中的内容

4. 获取内容

通过onchange 获取到内容:

const editor = new E('#div1')editor.config.onchange=html=>{this.setState({editorContent:html})}editor.create();

上传文件:现在我是什么也没有配置的,也没有对wangEditor 进行个性化,那么我们看看此时上传文件是怎样来处理的

我们在这里仅仅只能插入网络图片,然而我的目的是实现将本地文件上传到服务器上,那么该怎样来配置

当我们增加了这一个配置之后,也就是我们给文件一个上传的地址,此时存在的本地文件的上传

我们需要在后台编写上传的文件的接口

上传的过程中,我想传入某些参数:

自定义文件的名称:

现在我的文件可以上传成功了,如果想要回显的化,我们返回的参数要符合要求

其中data 是一个数组,里面是我们的图片的url

上面就是我们使用wangEditor的一个实例

希望对你有所帮助

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。