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. loadEditor(){

14. let element=this.refs["textarea"];

15. this.simditor=new Simditor({

16. textarea: $(element),

17. defaultValue: this.props.placeholder || "请输入内容",

18. upload: {

19. url : '/manage/product/richtext_img_upload.do',

20. defaultImage : '',

21. fileKey : 'upload_file'

22. }

23. });

24. //上传数据

25. this.bindEditorEvent();

26. }

27. //初始化富文本编辑器的事件

28. bindEditorEvent(){

29. this.simditor.on("valuechanged", e => {

30. this.props.onValueChange(this.simditor.getValue())

31. })

32. }

33. render(){

34. return (

35. <div className="rich-editor">

36. <textarea ref="textarea"></textarea>

37. </div>

38. );

39. }

40. }

41. 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. }