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

时间:2019-02-21 19:30:54

标签: javascript reactjs quill react-ace

我试图使用ReactQuill只是为了显示我拥有的一些富文本格式,因此我不希望它可以接收来自用户的任何输入或键入。原因是,我有另一个库(ReactAce),ReactQuill引起了一个错误,当我键入'delete'键时,它使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接收键盘输入的某种方法,我会很高兴,因为我认为这是导致该错误的原因。

谢谢!

2 个答案:

答案 0 :(得分:0)

您可以在“ keydown”上添加事件侦听器,并引用到ReactQuill

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

答案 1 :(得分:0)

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