Как установить длину символа в React-Quill

Question

Как я могу установить длину символа в реагирующем игле. В Документах было указано, что getLength() будет возвращать длину символа в редакторе.

Но я не могу понять, как это реализовать.

Мой 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();
        }
    }

Вышеупомянутое решение я нашел на GitHub . Но это не работает...

Answer 1

Следующее должно работать:

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 2

Я считаю, что вам не хватает ссылки на ReactQuillсам компонент. Без ссылки вы не получите доступа ни к одному из его непривилегированных методов (например,getLength()). Вы можете получить копию через свойhandleChange(https://github.com/zenoamaro/react-quill, т.е. 4-й аргумент в опоре onChange), но я бы рекомендовал вам просто добавить отдельную опору ref вReactQuillкомпонент и используйте его. См. Ниже пример, переписанный как функциональный компонент (... уже с 2020 года):

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 3

Я думаю, нам следует установить длину текста внутри события onChange. Что-то вроде этого:

      const handleSetValue: ReactQuill.ReactQuillProps["onChange"] = (
  _value,
  _delta,
  _source,
  _editor
) => {
  // _value is the html string
  setValue(_editor.getContents());
  onChange(_editor.getContents(), _value, _editor.getLength());
};

Answer 4

У меня нет «правильного» решения, но есть обходной путь с tiny-emitterэто также работает с ситуациями копирования-вставки.

• Во-первых, нам нужно было создать CopyPasteкласс простирается от clipboardмодуль. В этот класс мы помещаем эмиттер и передаем quillэкземпляр в параметр.