反应＆amp; ReactQuill：从工具栏

Question

我从此演示https://github.com/pc-magas/rwact_quill_call_component获得以下代码：

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

import '../node_modules/quill/dist/quill.snow.css';


const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header">
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <button className="ql-strike"></button>
    <button className="ql-underline"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-test">
      <span>Test</span>
    </button>    
  </div>
)

function test(){
  console.log('test');
  //How to call the 
}

/**
 * Basic Editor
 */
class MyEditor extends Component {

    constructor(props) {
        super(props)
        this.state={text:''}
    }

    onTextChange(value) { 
        this.setState({text:value})
    }

    addGanhamStyle(){
      const editor = this.reactQuillRef.getEditor();
      const index = editor.getSelection().index || 0;
      editor.insertText(index + 1, 'Ganham Style!!!!');
      editor.insertText(index + 1, '\n');
    }

    render(){
        return (
            <div>
                <CustomToolbar />
                <ReactQuill
                  ref={(el) => { this.reactQuillRef = el; }}
                  value={this.state.body}
                  onChange={this.handleChange}
                  modules={MyEditor.modules}
                  formats={MyEditor.formats}
                  theme="snow"
                />
             </div>
        )
    }

}

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

MyEditor.modules = {
  toolbar: {
    container: "#toolbar",
    'image-tooltip': true,
    'link-tooltip': true,
    handlers:{
      test: test
    }
  }
}

export default MyEditor;

当test方法被调用以从addGanhamStyle调用方法MyEditor时，我尝试执行此操作。你知道我怎么能这样做吗？

Answer 1

看起来您链接的示例repo是此示例的一个分支：https://codepen.io/alexkrolick/pen/gmroPj（内联下方）。

重点是＆＃34;这个背景＆＃34; test函数的（词法范围）将在调用时设置，这就是Codepen示例回调可以访问this.quill的原因，以及为什么repo示例需要在bind中使用/* * 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 () { const cursorPosition = this.quill.getSelection().index this.quill.insertText(cursorPosition, "★") this.quill.setSelection(cursorPosition + 1) } /* * Custom toolbar component including insertStar button and dropdowns */ const CustomToolbar = () => ( <div id="toolbar"> <select className="ql-header"> <option value="1"></option> <option value="2"></option> <option selected></option> </select> <button className="ql-bold"></button> <button className="ql-italic"></button> <select className="ql-color"> <option value="red"></option> <option value="green"></option> <option value="blue"></option> <option value="orange"></option> <option value="violet"></option> <option value="#d0d1d2"></option> <option selected></option> </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) } handleChange (html) { this.setState({ editorHtml: html }); } render() { return ( <div className="text-editor"> <CustomToolbar /> <ReactQuill onChange={this.handleChange} placeholder={this.props.placeholder} modules={Editor.modules} formats={Editor.formats} theme={"snow"} // pass false to use minimal theme > <div key="editor" ref="editor" className="quill-contents" /> </ReactQuill> </div> ) } } /* * Quill modules to attach to editor * See https://quilljs.com/docs/modules/ for complete options */ Editor.modules = { toolbar: { container: "#toolbar", handlers: { "insertStar": insertStar, } } } /* * 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: React.PropTypes.string, } /* * Render component on page */ ReactDOM.render( <Editor placeholder={'Write something or insert a star ★'}/>, document.querySelector('.app') ) 工具栏处理程序初始化。

{{1}}