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的一个实例

希望对你有所帮助

React +antd +wangEditor 富文本编辑器相关推荐

react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用框架: react hooks 链接: 官方文档参考富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...
wangeditor富文本编辑器的使用（超详细）
一.基本介绍官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载下载好之后 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...

React +antd +wangEditor 富文本编辑器

React +antd +wangEditor 富文本编辑器相关推荐

最新文章

热门文章