dxm-react-editor v0.1.1

#react 编辑器

react 编辑器

使用

import Editor from './Editor';
import ButtonControl from './controls/ButtonControl';

class RateControl extends React.Component {
    showModal = () => {
    Modal.success({
        title: '给个好评吧',
        okText: '确定',
        content: <span>
            <Rate allowHalf defaultValue={4.5} />
        </span>
    });
    }
    render() {
    return (
        <span>
            <ButtonControl tooltip={true} title="关于" onClick={this.showModal}><Icon type="heartbeat" /></ButtonControl>
        </span>
    );
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: `请输入一点文字吧`,
        };
    }
    imagePlugin = (content) => {
        content.on('click', 'img', (e) => {
            console.log(e.target.src);
        });
    }
    render() {
        return (<div style={{marginTop: 100}}>
            <Editor
                style={{padding: '16px'}}
                value={this.state.value}
                plugins={[
                    this.imagePlugin
                ]}
                toolBar={(controls) => {
                    return controls.concat([
                        RateControl
                    ]);
                }}/>
        </div>
    );
    }
}

扩展插件

imagePlugin = (content) => {
    content.on('click', 'img', (e) => {
        console.log(e.target.src);
    });
}

<Editor
    plugins={[
        this.imagePlugin
    ]}
/>

扩展控件

class RateControl extends React.Component {
    showModal = () => {
    Modal.success({
        title: '给个好评吧',
        okText: '确定',
        content: <span>
            <Rate allowHalf defaultValue={4.5} />
        </span>
    });
    }
    render() {
    return (
        <span>
            <ButtonControl tooltip={true} title="关于" onClick={this.showModal}><Icon type="heartbeat" /></ButtonControl>
        </span>
    );
    }
}

<Editor
    toolBar={(controls) => {
        return controls.concat([
            RateControl
        ]);
    }
}/>