如何在react-quill上仅粘贴纯文本？

Question

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

Answer 1

嗨，我不想粘贴任何图像类型，我是这样修复的：

const handlePaste = (e: ClipboardEvent) => {
    const data = e.clipboardData?.items[0]
    
    if(typeof data === 'undefined') return
    if (data.type === 'image/png' || data.type === 'image/jpeg' || data.type === 'image/jpg') {
      
      e.preventDefault();
      toast.error('Lütfen resim yapıştırmayınız.');
    }
  };

  React.useEffect(() => {
    const quill = quillRef.current.getEditor();
    quill.root.addEventListener('paste', handlePaste);

    return () => {
      quill.root.removeEventListener('paste', handlePaste);
    };
  }, []);

也许您会尝试将此代码仅用于文本/纯 mime 类型