React后台管理系统-rich-editor组件
Posted wangyawei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React后台管理系统-rich-editor组件相关的知识,希望对你有一定的参考价值。
1.Simditor组件的github地址:https://github.com/mycolorway/simditor 网址:http://simditor.tower.im/
2.在util里边新建rich-editor文件夹,里边新建index.jsx
-
import React from ‘react‘;
-
import Simditor from ‘simditor‘;
-
import ‘simditor/styles/simditor.scss‘;
-
import ‘./index.scss‘;
-
// 通用的富文本编辑器,依赖jquery
-
class RichEditor extends React.Component{
-
constructor(props){
-
super(props);
-
}
-
componentDidMount(){
-
this.loadEditor();
-
}
-
-
loadEditor(){
-
let element=this.refs["textarea"];
-
this.simditor=new Simditor({
-
textarea: $(element),
-
defaultValue: this.props.placeholder || "请输入内容",
-
upload: {
-
url : ‘/manage/product/richtext_img_upload.do‘,
-
defaultImage : ‘‘,
-
fileKey : ‘upload_file‘
-
}
-
});
-
//上传数据
-
this.bindEditorEvent();
-
}
-
//初始化富文本编辑器的事件
-
bindEditorEvent(){
-
this.simditor.on("valuechanged", e => {
-
this.props.onValueChange(this.simditor.getValue())
-
})
-
}
-
render(){
-
return (
-
<div className="rich-editor">
-
<textarea ref="textarea"></textarea>
-
</div>
-
);
-
}
-
}
-
-
export default RichEditor;
3.在save.jsx里边使用RichEditor组件
-
import RichEditor from ‘util/rich-editor/index.jsx‘
-
<div className="form-group">
-
<label className="col-md-2 control-label">商品详情</label>
-
<div className="col-md-10">
-
<RichEditor onValueChange={(value) => {this.onDetailValueChange(value)}}/>
-
</div>
-
</div>
4.在RichEditor里边定义valuechanged事件,监听文本编辑器里边内容的变化,当内容变化时触发 valuechange事件,调用onDetailValueChange函数,传入新的内容,更新state里边detail的值
-
//富文本编辑器
-
onDetailValueChange(value){
-
this.setState({
-
detail : value
-
})
-
}
以上是关于React后台管理系统-rich-editor组件的主要内容,如果未能解决你的问题,请参考以下文章
共享单车—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)