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

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.            
37.                ref</span>="<span>textarea</span>">
38.            

        );

    }

}

 

export default RichEditor;

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

1. import RichEditor from 'util/rich-editor/index.jsx'
3.                         商品详情
4.                         
5.                            value) => {this.onDetailValueChange(value)}}/>
6.                         

                    

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

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

posted on 2018-06-26 20:14 gisery 阅读( ...) 评论( ...) 编辑 收藏