将道具传递给 react-quill 处理程序

Question

I have modeled a custom toolbar that inserts text at the cursor position using this following codepen:

https://codepen.io/alexkrolick/pen/gmroPj?editors=0010

However, I need to be able to pass a prop value to the insertText function. I have tried refactoring so that can't quite get it. How would I go about refactoring this component so that i can pass the prop text value to the insertText function? Here is my code as of now:

import React, { Component } from 'react'
import ReactQuill from 'react-quill'

function insertText() {
  const text = 'example123'
  // need this to be accessed from props.text
  const cursorPosition = this.quill.getSelection().index;

  this.quill.insertText(cursorPosition, text);
  this.quill.setSelection(cursorPosition + (text.length));
}

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
      <option value="1" />
      <option value="2" />
      <option selected />
    </select>
    <button className="ql-bold" />
    <button className="ql-italic" />
    <button className="ql-insertText">
      Insert Promo Code
    </button>
  </div>
);

class Editor extends Component {
  constructor(props) {
    super(props);
    // Note: text is passed in as a prop
  }

  render() {
    const { template, handleChange, onSave } = this.props

    return (
      <div className='modal fade' id='instruction-template-edit-modal' tabIndex='-1' role='dialog' aria-labelledby='myModalLabel'>
        <div className='modal-dialog modal-lg' role='document'>
          <div className='modal-content'>
            <div className='modal-header'>
              <button
                type='button'
                className='close'
                data-dismiss='modal'
                aria-label='Close'>
                <span aria-hidden='true'>&times;</span>
              </button>
              <h4
                className='modal-title general-header-text margin-left-15'
                id='myModalLabel'>
                Edit Instruction Template
              </h4>
            </div>
            <div className='modal-body'>
              <div className='instruction-template row text-editor'>
                <CustomToolbar />
                <ReactQuill value={template.content || ''} 
                  modules={Editor.modules}
                  formats={Editor.formats}
                  onChange={handleChange} />
              </div>
              <div className='row margin-top-20'>
                <a type='button'
                  className='cancel-link'
                  data-dismiss='modal'
                  aria-label='Close'>
                  Cancel
                </a>
                <button className='button-blue pull-right'
                  data-dismiss='modal'
                  aria-label='Save'
                  onClick={() => onSave(template) }>
                  SAVE
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Editor.modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      insertText: insertText
    }
  },
  clipboard: {
    matchVisual: false,
  }
};

Editor.formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "color"
];

export default Editor;

Answer 1

First, make the Editor.modules as class property so that you can access the props , then get the instance of quill by passing a callback ref , then pass the props and quill editor to the insertText function as arguments.

I have updated your example to make it work, here is the link:

https://codepen.io/jojo-tutor/pen/VwZzPdx?editors=0010

/*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.github.io
 */
const CustomButton = () => <span className="octicon octicon-star" />;

/*
 * Event handler to be attached using Quill toolbar module (see line 73)
 * https://quilljs.com/docs/modules/toolbar/
 */
function insertStar(quillEditor, props) {
  console.log({ quillEditor, props })

  const cursorPosition = quillEditor.getSelection().index;
  quillEditor.insertText(cursorPosition, props.character);
  quillEditor.setSelection(cursorPosition + 1);
}

/*
 * Custom toolbar component including insertStar button and dropdowns
 */
const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
      <option value="1" />
      <option value="2" />
      <option selected />
    </select>
    <button className="ql-bold" />
    <button className="ql-italic" />
    <select className="ql-color">
      <option value="red" />
      <option value="green" />
      <option value="blue" />
      <option value="orange" />
      <option value="violet" />
      <option value="#d0d1d2" />
      <option selected />
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
);

/* 
 * Editor component with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorHtml: "" };
    this.handleChange = this.handleChange.bind(this);
    this.reactQuillRef = null
  }

  handleChange(html) {
    this.setState({ editorHtml: html });
  }

  modules = {
    toolbar: {
      container: "#toolbar",
      handlers: {
          insertStar: () => insertStar(
            this.reactQuillRef.getEditor(),
            this.props
          )
        }
    },

    clipboard: {
      matchVisual: false,
    }
  }

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          ref={(el) => { this.reactQuillRef = el }}
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={this.modules}
          formats={Editor.formats}
          theme={"snow"} // pass false to use minimal theme
        />
      </div>
    );
  }
}

/* 
 * Quill modules to attach to editor
 * See https://quilljs.com/docs/modules/ for complete options
 */

/* 
 * Quill editor formats
 * See https://quilljs.com/docs/formats/
 */
Editor.formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "color"
];

/* 
 * PropType validation
 */
Editor.propTypes = {
  placeholder: PropTypes.string
};

/* 
 * Render component on page
 */
ReactDOM.render(
  <Editor placeholder={"Write something or insert a star ★"} character="[star]" />,
  document.querySelector(".app")
);

Hope this helps. Happy coding!