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

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

以上是关于React后台管理系统-rich-editor组件的主要内容,如果未能解决你的问题,请参考以下文章

共享单车—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

共享单车—— React后台管理系统开发手记:AntD Form基础组件

React后台管理系统-NavSide侧边栏组件

React后台管理系统-顶部NavTop组件设计

React后台管理系统-品类选择器二级联动组件

一步一步搭建react后台系统6之用户列表