React Js Simditor Textarea 富文本的组件封装

本文出自：

http://blog.csdn.net/wyk304443164

下面用了jquery如果不需要自行删除即可.

import React from 'react';
import Simditor from "simditor";
import $ from "jquery";
import {ENV} from '../common/url';

require("simditor/styles/simditor.css");

/**
 * 取值 let goods_desc = $(".detailContainer").find(".simditor-body").html();
 */

class SimditorTextarea extends React.Component {

    componentDidMount = () => {
        this.initEditor();
        // $(".font-color.font-color-default").removeClass("font-color-default").addClass("font-color-8");
    };

    initEditor = () => {
        let config = {
            placeholder: this.props.placeholder,
            defaultImage: 'images/image.png',
            params: {},
            tabIndent: true,
            toolbar: [
                'title',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'fontScale',
                'color',
                'link',
                'hr',
                'image',
                'indent',
                'outdent',
                'alignment',
            ],
            upload: {
                url: ENV.IMAGE_ACTION, //文件上传的接口地址
                params: {
                    appid: ENV.APP_ID,
                    secret: ENV.SECRET,
                }, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'file', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件',
            },

            toolbarFloat: true,
            toolbarFloatOffset: 0,
            toolbarHidden: false,
            pasteImage: false,
            cleanPaste: false,
            textarea: $(this.refs.textarea)
        };

        this.editor = new Simditor(config);// 初始化编辑器
        this.editor.setValue(this.props.value);

        //监听改变
        this.editor.on("valuechanged", (e, src) => {
            this.props.onChange(this.getValue());
        });

        //更改图片上传类型
        $(".simditor input[type='file']").attr('accept', 'image/jpg,image/jpeg,image/png,image/bmp');
    };

    // componentWillReceiveProps(nextProps){
    //     this.editor.setValue(nextProps.value);
    // };

    getValue = () => {
        // return this.editor.getValue().trim();
        let selectName = `#${this.props.id} .simditor`;
        let html = $(selectName).find(".simditor-body").html();
        console.log(html);
        return html;
    };

    render() {
        return (
            <textarea
                id={this.props.id}
                ref="textarea"
                placeholder="请输入内容"/>
        );
    }
}

export default SimditorTextarea;

配合Form.Item

{/*活动介绍*/}
<FormItem
    {...uploadLayout}
    label="活动介绍">

    <div id="description">
        {getFieldDecorator('description', {
            rules: [{
                required: true, message: '请填写活动介绍'
            }],
        })(
            <SimditorTextarea
                id="description"
            />
        )}
    </div>

</FormItem>
{/*规则说明*/}
<FormItem
    {...uploadLayout}
    label="规则说明">
    <div id="roles">
        {getFieldDecorator('roles', {
            rules: [{
                required: true, message: '请填写规则说明'
            }],
        })(
            <SimditorTextarea
                id="roles"
            />
        )}
    </div>
</FormItem>

1. 这边读取的是 value属性，也就是如果你不用getFieldDecorator()这种写法的话，就用value={value}，这样就可以传值给SimditorTextarea。
2. 这边this.props.onChange，如果不用getFieldDecorator()就写成onChange={this.onChange}这样即可。