初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828
富文本编辑器，在开发中是常用的，下面直接进入正题了：
1、安装wangEditor：
npm install wangeditor -D
2、贴代码了：
import React, { Component } from 'react'import LEdit from 'wangeditor'export default class Child extends Component {constructor(props) {super(props);this.state = {editorContent:''};this.textAreaValue=this.textAreaValue.bind(this);}componentDidMount() {const elemMenu = this.refs.editorElemMenu;const elemBody = this.refs.editorElemBody;const editor = new LEdit(elemMenu, elemBody)// 使用 onchange 函数监听内容的变化，并实时更新到 state 中editor.customConfig.onchange = html => {// console.log(editor.txt.html())this.setState({// editorContent: editor.txt.text()editorContent: editor.txt.html()})}editor.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo' // 重复]editor.customConfig.uploadImgShowBase64 = trueeditor.create()};textAreaValue () {console.log('编辑器data：', this.state.editorContent)}render() {return (<div className="shop"><div className="text-area" ><div ref="editorElemMenu"style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}className="editorElem-menu"></div><divstyle={{padding:"0 10px",overflowY:"scroll",height:300,border:"1px solid #ccc",borderTop:"none"}}ref="editorElemBody" className="editorElem-body"></div></div><div onClick={this.textAreaValue}>点击我获取值啊</div></div>)}}
示例图片：
注意：
1、此处需要十分注意的是 editor.customConfig.menus 这个属性设置，这个属性是配置你的富文本编辑器所需要的功能的，如果不配置的话，那么界面就不会有上面的加粗斜体上传图片之类的功能条了，当然，如果你不需要这么多功能的话，也可以注释掉一部分。
2、editor.customConfig.uploadImgShowBase64 = true 这个属性是配置当前是否需要设置上传图片在前端转换成base64的，如果你当前对接的模式是需要先上传图片到自己的服务器上的话，那么请查看官方文档：/
文章到此结束，喜欢记得点个赞噢~
