как вставить только обычный текст в react-quill?

Question

Я использую 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