React Quill js. Как консольно войти в обработчик изменений?

#javascript #reactjs #react-quill

Вопрос:

В настоящее время я создаю панель мониторинга блога, я новичок в веб-разработке. и для редактора я использую React quill.. в документации есть руководство с обработчиком изменений. но это просто консольный журнал «изменение текста», и я пытаюсь изменить консольный журнал «изменение текста» на все, что я набираю в редакторе quill.

Мой вопрос. Как это сделать? вот мой код для useEffect :

    const { quill, quillRef } = useQuill();
    const [isi, setisi] = useState('')
    
   useEffect(() => {
      if (quill) {
        quill.on('text-change', () => { 
            console.log('teks-changed! ')
        })
        
        
        
      }
    }, [quill]);

Ответ №1:

Вам нужно использовать quill.getText(), чтобы получить текст. вот полный рабочий код ниже.

 const { quill, quillRef } = useQuill();
  React.useEffect(() => {
    if (quill) {
      quill.on('text-change', (e) => {
        const text = quill.getText();
        console.log(text);
      });
    }
  }, [quill]);

1. дай мне сначала попробовать , Сэм

2. это работает, брат … кстати, мне просто интересно, могу ли я передать текст в состояние? и опубликовать его в БД с помощью axios?

3. вы можете просто вызвать свою функцию перед console.log. в принципе, вам нужно объявить параметры с помощью use state, а затем вызвать функцию setstate перед console.log

4. извините, я не знаю, что нажал на него

Ответ №2:

У вас есть два варианта получения данных quill:

в следующем примере я зарегистрировал оба:

 import React, { useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css"; // Add css for snow theme

export default () => {
  const { quill, quillRef } = useQuill();

  useEffect(() => {
    if (quill) {
      quill.on("text-change", (delta) => {
        console.log("delta", delta);
        console.log("innerHTML", quill.root.innerHTML);
      });
    }
  }, [quill]);

  return (
    <div style={{ width: 500, height: 300 }}>
      <div ref={quillRef} />
    </div>
  );
};

Ответ №3:

внутри useEffect вы должны были бы quill.on() и внутри этого использовать quill.getText() , чтобы получить данные.

вот так >>

 useEffect(() => {
    if (quill) {
      quill.on('text-change', (e) => {
        const data = quill.getText();
        console.log(data);
      });
    }
  }, [quill])