如何在 React-Quill 中设置字符长度

Question

How can I set Character Length in react-quill. In Docs it has been given that getLength() will return the length of the character in editor..

But I am Unable to figure out How to implement it.

My JSX

 <ReactQuill theme='snow' onKeyDown={this.checkCharacterCount} value={this.state.text} onChange={this.handleChange} modules={modules} formats={formats} //style={{height:'460px'}} /> // OnChange Handler handleChange = (value) => { this.setState({ text: value }) } //Max VAlue checker checkCharacterCount = (event) => { if (this.getLength().length > 280 && event.key.== 'Backspace') { event;preventDefault(); } }

The Above solution i found on GitHub. But its not working...

Answer 1

I believe you are missing a reference to the ReactQuill component itself. Without the reference you will not get access to any of its unprivileged methods (eg getLength() ). You could get a copy via your handleChange method ( https://github.com/zenoamaro/react-quill#props , ie 4th argument on the onChange prop) but I would recommend you simply add a separate ref prop to the ReactQuill component and use that. See below an example re-written as a functional component (...since its 2020 already):

export const Editor = () => {
  const [value, setValue] = React.useState(null);
  const reactQuillRef = React.useRef();

  const handleChange = (value) => setValue(value);

  const checkCharacterCount = (event) => {
    const unprivilegedEditor = reactQuillRef.current.unprivilegedEditor;
    if (unprivilegedEditor.getLength() > 280 && event.key !== 'Backspace')
      event.preventDefault();
  };

  return (
    <ReactQuill theme='snow' 
      onKeyDown={checkCharacterCount}
      ref={reactQuillRef}
      value={this.state.text}
      onChange={this.handleChange}
      modules={modules}
      formats={formats} /> 
  ) 
}

Answer 2

Following should work:

class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.quillRef = null;      // Quill instance
    this.reactQuillRef = null;
    this.state = {editorHtml : ''};
  }
  componentDidMount() {
    this.attachQuillRefs()
  }

  componentDidUpdate() {
    this.attachQuillRefs()
  }

  attachQuillRefs = () => {
    if (typeof this.reactQuillRef.getEditor !== 'function') return;
    this.quillRef = this.reactQuillRef.getEditor();
  }
  handleChange (html) {
    var limit = 10;
    var quill = this.quillRef;
    quill.on('text-change', function (delta, old, source) {
      if (quill.getLength() > limit) {
       quill.deleteText(limit, quill.getLength());
      }
    });
    this.setState({ editorHtml: html });
  }


  render () {
    return  <ReactQuill 
            ref={(el) => { this.reactQuillRef = el }}
            theme="snow"
            onChange={this.handleChange}
            value={this.state.editorHtml}
            />
  }
}

Answer 3

I don't have a "proper" solution but more a workaround with tiny-emitter that works also with copy-paste situations.

• First, we had to create a CopyPaste class extends from clipboard module. In that class, we put an emitter and pass the quill instance into parameter.

 const Emitter = require('tiny-emitter/instance'); const { Quill } = typeof window === 'object'? require('react-quill'): () => false; const Delta = typeof window === 'object'? require('quill-delta'): null; const Clipboard = typeof window === 'object'? Quill.import('modules/clipboard'): null; export class CopyPasteQuill extends Clipboard { onPaste(e) { e.preventDefault(); const range = this.quill.getSelection(); const text = e.clipboardData.getData('text/plain'); const delta = new Delta().retain(range.index).delete(range.length).insert(text); const index = text.length + range.index; const length = 0; this.quill.updateContents(delta, 'silent'); this.quill.setSelection(index, length, 'silent'); Emitter.emit('reactQuill::paste', this.quill); } }

• Second, we have a normalize component ReactQuillInput to handle every cases. The only warning is linked to values that are passed to this component. You can't give him props directly, you have to store them in a state before.

 import React, { useState } from 'react'; import ReactQuillInput from '@components/atoms/reactQuillInput/ReactQuillInput'; const component = props => { const { text } = props; const [quillValueState, setQuillValueState] = useState( text? text: '' ); const onChange = html => { setQuillValueState(html); }; const reactQuillMaxLength = 300; return ( <Container> <ReactQuillInput theme="bubble" defaultValue={captionState} value={captionState} onChangeText={onChange} placeholder={'Type your text...'} maxLength={reactQuillMaxLength} /> </Container> ) } export default component;

 import React, { useState } from 'react'; import PropTypes from 'prop-types'; import ReactQuill, { Quill } from 'react-quill'; import Emitter from 'tiny-emitter/instance'; import { CopyPasteQuill } from '@src/utils/copyPasteQuill'; import 'react-quill/dist/quill.snow.css'; require('medium-editor/dist/css/medium-editor.css'); require('../../../styles/content_editor.css'); require('../../../styles/quill.bubble.css'); const ReactQuillInput = props => { const { onChangeText, maxLength } = props; const [quillState, setQuillState] = useState({}); const [isMountedState, setIsMontedState] = useState(false); if (typeof window === 'object' && isMountedState) { Quill.register('modules/clipboard', CopyPasteQuill, true); } const setQuill = ref => { if (;ref || ref === null) return. if (typeof ref;getEditor.== 'function') return; setQuillState(ref;getEditor()); setIsMontedState(true); }. const handleChange = html => { if (,isMountedState) return. if (maxLength) { quillState.on('text-change', () => { if (quillState.getLength() > maxLength) { quillState;deleteText(maxLength; quillState;getLength()); } }). } onChangeText(html): }: Emitter,on('reactQuill..paste', _quill => { if (maxLength) { if (_quill.getLength() > maxLength) { _quill;deleteText(maxLength; _quill;getLength()). } } }). return ( <ReactQuill ref={el => { setQuill(el). }} {;;;props} onChange={handleChange} /> ). }: export default ReactQuillInput. ReactQuillInput,propTypes = { onChangeText: PropTypes.func, maxLength; PropTypes.number: }, ReactQuillInput;defaultProps = { onChangeText: () => {}, };