javascript - 反应羽毛笔 js。如何控制台登录更改处理程序？

Question

我目前正在创建一个博客仪表板，我是网络开发的初学者。对于编辑器，我使用的是 React quill.. 在文档中有一个关于更改处理程序的教程。但它只是控制台日志“文本更改”，我正在尝试使用我在羽毛笔编辑器上键入的任何内容来更改控制台日志“文本更改”。

我的问题是。怎么做？这是我的代码useEffect：

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

Answer 1

获取 quill 数据有两种选择：

1. 三角洲
2. 内部HTML

在下一个示例中，我记录了两个：

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>
  );
};

Answer 2

您需要使用 quill.getText() 来获取文本。这是下面的完整工作代码。

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