使用 ReactQuill 库禁用任何用户输入

Question

我正在尝试使用 ReactQuill 来显示我拥有的一些富文本，因此我不希望它可以接收来自用户的任何输入或键入。原因，我有另一个库（ReactAce），ReactQuill 导致了一个错误，当我键入“删除”键时，它使 ReactAce 停止工作......

下面你可以看到我试图禁用 Quill 实例的例子。

quillRef = React.createRef();    

componentDidMount = () => {
  console.log(this.quillRef.current.editor);

  this.quillRef.current.editor.enable(false);   // undefined
};

render () { 
    <ReactQuill
      readOnly
      value={info}
      ref={this.quillRef}
      modules={quillConfig}
    >
}

如果你知道一些方法来阻止 ReactQuill 从键盘接收任何输入，我会很高兴，因为我认为这是导致错误的原因。

谢谢！

Answer 1

在 React Quill 1.3.5 中，您可以将 readOnly 属性添加为 true。禁用时它将禁用您的编辑器，如输入标签。

Answer 2

您可以在“keydown”上添加事件侦听器并参考 ReactQuill

this.quillRef.current.addEventListener('keydown', null);

Answer 3

你可以只使用

readOnly

属性如下：

<ReactQuilltheme="snow" readOnly={true} />

当然你需要使用

useState()

使其动态化

const [disabled, setDisabled] = useState(true);
    
return (
    <ReactQuilltheme="snow" readOnly={disabled} />
)