初心-杨瑞超个人博客诚邀您加入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 = true
editor.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>
<div
style={{
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的,如果你当前对接的模式是需要先上传图片到自己的服务器上的话,那么请查看官方文档:http://www.wangeditor.com/
文章到此结束,喜欢记得点个赞噢~