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的一个实例
希望对你有所帮助
本文介绍了如何使用WangEditor在前端实现富文本编辑器的渲染,包括内容的获取、文件上传功能的配置,以及配合后端接口处理上传过程。重点讲解了自定义文件名和返回符合要求的URL参数。

被折叠的 条评论
为什么被折叠?



