0

我在我的 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>
    )
  }
}
4

0 回答 0