Here is my code , I actually want . user can only read <h1> tag inside inline editor and they can edit only p tag is here . if I use readonly={true} , user can not edit whole data .However, I want to give permission to user for specific data editing . How can i do this ?
class EmailEditorApp extends Component {
constructor(props) {
super(props);
this.state = {
data: '<div><h1>Inline Editing in Action!</h1><p>Inline2 Editing in Action!</p></div>'
};
this.handleChange = this.handleChange.bind(this);
this.onEditorChange = this.onEditorChange.bind(this);
}
onEditorChange(evt) {
this.setState({
data: evt.editor.getData(),
});
}
handleChange(changeEvent) {
this.setState({
data: changeEvent.target.value,
});
}
onSubmit = (e) => {
e.preventDefault();
this.setState({
data: this.state.data,
})
console.log(this.state.data)
}
render() { return <HubContent title="User Mail">
<div>
<div style={{ overflow: 'auto' }}>
<CKEditor
type="inline"
readOnly={true}
data={this.state.data}
onChange={this.onEditorChange}
/>
<button onClick={this.onSubmit}>add</button>
</div>
</div>
</HubContent>
}
}
export default EmailEditorApp
Here is my code , I actually want . user can only read
<h1>tag inside inline editor and they can edit only p tag is here . if I use readonly={true} , user can not edit whole data .However, I want to give permission to user for specific data editing . How can i do this ?