dxm-react-editor
v0.1.1
Published
react 编辑器
Downloads
1
Readme
#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
]);
}
}/>