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}這樣即可。