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

来源：互联网发布：seo 衡水培训班编辑：程序博客网时间：2024/06/05 17:46

本文出自：

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>

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

阅读全文

0 0