我在我的 Web 应用程序中使用 React quill 作为自定义文本编辑器,但我无法弄清楚如何让它在用户尝试粘贴时只粘贴纯文本。格式化会导致我的代码出现很多问题。如何覆盖粘贴事件并访问剪贴板文本以仅粘贴纯文本?
请帮忙!!
class Editor extends React.Component {
constructor(props) {
super(props)
this.quillRef = null; // Quill instance
this.reactQuillRef = null; // ReactQuill component
this.titleRef = React.createRef();
this.languageRef = React.createRef();
this.state = {
title: "",
language: "",
};
}
modules = {
toolbar: [
['bold', 'italic', 'underline'],
['clean']
],
}
componentDidMount() {
this.attachQuillRefs()
}
componentDidUpdate() {
this.attachQuillRefs()
}
validate() {
//validate text
}
keyDown = (event) => {
//here is where i tried to override paste event
event.preventDefault();
console.log(event);
if(event.keyCode === 86){
console.log(event.clip);
}
}
onFieldChange = (event) => {
const { target: { name, value } } = event;
this.setState({ [name]: value });
}
attachQuillRefs = () => {
if (typeof this.reactQuillRef.getEditor !== 'function') return;
this.quillRef = this.reactQuillRef.getEditor();
}
addReading = () => {
send text
}
render() {
return (
<div>
<input name="title" ref={this.titleRef} type="text" placeholder="Title" onChange={this.onFieldChange} />
<select name="language" id="classLanguage" ref={this.languageRef} onChange={this.onFieldChange} className="modalInput">
{languages.map(language => (
<option key={language.value} value={language.value}>
{language.display}
</option>
))}
</select>
<ReactQuill
ref={(el) => { this.reactQuillRef = el }}
modules={this.modules}
onKeyDown={(e) => this.keyDown(e)}
placeholder={this.props.placeholder}
theme={'snow'} />
<button onClick={this.addReading}>Add Reading</button>
</div>
)
}
}