React后台管理系统-rich-editor组件

1.Simditor组件的github地址:https://github.com/mycolorway/simditor 网址：http://simditor.tower.im/

2.在util里边新建rich-editor文件夹，里边新建index.jsx

1. import React from ‘react‘;
2. import Simditor from ‘simditor‘;
3. import ‘simditor/styles/simditor.scss‘;
4. import ‘./index.scss‘;
5. // 通用的富文本编辑器，依赖jquery
6. class RichEditor extends React.Component{
7. ????constructor(props){
8. ????????super(props);
9. ????}
10. ????componentDidMount(){
11. ????????this.loadEditor();
12. ????}
13. ?
14. ????loadEditor(){
15. ??????????let element=this.refs["textarea"];
16. ??????????this.simditor=new Simditor({
17. ??????????????textarea: $(element),
18. ??????????????defaultValue: this.props.placeholder || "请输入内容",
19. ??????????????upload: {
20. ????????????????url : ‘/manage/product/richtext_img_upload.do‘,
21. ????????????????defaultImage : ‘‘,
22. ????????????????fileKey : ‘upload_file‘
23. ????????????}
24. ??????????});
25. ??????????//上传数据
26. ??????????this.bindEditorEvent();
27. ????}
28. ????//初始化富文本编辑器的事件
29. ????bindEditorEvent(){
30. ???????this.simditor.on("valuechanged",e => {
31. ???????????this.props.onValueChange(this.simditor.getValue())
32. ???????})
33. ????}
34. ????render(){
35. ????????return (
36. ???????????<div className="rich-editor">
37. ???????????????<textarea ref="textarea"></textarea>
38. ???????????</div>
39. ????????);
40. ????}
41. }
42. ?
43. export default RichEditor;

3.在save.jsx里边使用RichEditor组件

1. import RichEditor from ‘util/rich-editor/index.jsx‘
2. <div className="form-group">
3. ????????????????????????<label className="col-md-2 control-label">商品详情</label>
4. ????????????????????????<div className="col-md-10">
5. ???????????????????????????<RichEditor onValueChange={(value) => {this.onDetailValueChange(value)}}/>
6. ????????????????????????</div>
7. ????????????????????</div>

4.在RichEditor里边定义valuechanged事件，监听文本编辑器里边内容的变化，当内容变化时触发 valuechange事件，调用onDetailValueChange函数，传入新的内容，更新state里边detail的值

1. //富文本编辑器
2. ??onDetailValueChange(value){
3. ??????this.setState({
4. ??????????detail : value
5. ??????})
6. ??}