React & ReactQuill: appeler des méthodes dans le composant personnalisé de la barre d'outils

Question

je la pièce de code suivante de cette démonstration 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; 

Ce que je suis en train de le faire lorsque la méthode test est appelée à appeler le méthode addGanhamStyle de MyEditor. Avez-vous une idée de comment je peux faire ça?

Answer 1

Il ressemble à l'exemple repo que vous avez lié est un fork de cet exemple: https://codepen.io/alexkrolick/pen/gmroPj (inline ci-dessous).

Le point principal est que « ce contexte » (portée lexicale) de la fonction test sera réglée à l'heure d'appel, ce qui explique pourquoi le rappel exemple Codepen a accès à this.quill, et pourquoi l'exemple de prise en pension doit utiliser bind dans l'initialisation du gestionnaire de barre d'outils.

/* 
* 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') 
)