React-Quill 自動專注於編輯器其他輸入其他輸入元素？

Question

我正在使用 react-quill 作為我的編輯器，最近我配置了我的圖像處理程序 function 以將道具傳遞給處理程序，並且在進行更改后，我的編輯器行為怪異，每當我在其他輸入字段上鍵入內容時，我的編輯器就會自動對焦下面輸入的文字是我的編輯器的代碼，任何幫助或建議將不勝感激。

  Component
} from 'react';

// import {
//   Editor
// } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import axios from 'axios'
import {
  API_URL
} from './../../api_url'
// import * as Icons from 'images/icons';
import * as loadImage from 'blueimp-load-image';
import {
  key
} from '../../assets/encryptionkey'
import globalStyles from '../../stylesheets/ui.css'
import blogStyles from './blogs.css'
import bootstrapStyles from '../../stylesheets/bootstrap/css/bootstrap.min.css'
import fontAwesomeStyles from '../../stylesheets/font-awesome/css/font-awesome.min.css'
import actionIconsStyles from '../../stylesheets/action_icons.css'
import cx from 'classnames'
import './editor.css';
import s from './editor.css';
//import CKEditor from '@ckeditor/ckeditor5-react';
//import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
//import ReactQuill, { Quill } from "react-quill";

//var Image = Quill.import('formats/image');
//Image.className = 'custom-class-to-image';
//Quill.register(Image, true);



export default class BlogEditor extends Component {
  constructor( loader ) {
  super();
  this.state = {
   
     editorHtml: '', theme: 'snow',
     text:''   
  }
  this.handleChange = this.handleChange.bind(this)
  // var that=this;
  if (typeof window !== 'undefined') {
    this.ReactQuill = require('react-quill')
    const ReactQuill=this.ReactQuill;
    var Image = ReactQuill.Quill.import('formats/image');
    Image.className = 'blog-content-image';
    ReactQuill.Quill.register(Image, true);
    // ReactQuill.Quill.setContents(editor.clipboard.convert(html));
   
  }

  }

  componentWillReceiveProps(){
    //debugger
    let clearContent=this.props.clearContent
    if(clearContent){
      // this.editorRef.setEditorContents(this.editorRef.getEditor(), '<h1>test</h1>');
      
    }

  }

  handleChange(value) {
   //debugger
   
    this.setState({ text: value })
    // this.props.changeInEditor(value)
  }
  

  imageHandler({ val, componentProps }) {
    // debugger
   
    let self=this
    let image;
    let image_extension;
    const Cryptr = require('cryptr');
    const cryptr = new Cryptr(key);
    const users = localStorage.getItem('users') ? JSON.parse(cryptr.decrypt(localStorage.getItem('users'))) : {}
    // console.log(users[users.lastLoginId])
    let loggedinUser = users[users.lastLoginId];
    const input = document.createElement('input');

    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.setAttribute("class", "Editor-mage");
    input.click();

    input.onchange = async () => {
      //debugger
        const file = input.files[0];

        var ValidImageTypes = ["image/gif", "image/jpeg", "image/png", "image/jpg", "image/GIF", "image/JPEG", "image/PNG", "image/JPG"]; 
        let file_type = file.type
        let filename = file.name
        let extension = filename.split('.').pop();
        if(ValidImageTypes.indexOf(file_type) >= 0){
          if(file.size<=500000&&file.size>=50000){
           
            var fileToLoad = file
    
            loadImage(fileToLoad, (canvas) => {
             
              if(canvas){
               // this.setState({
                  image=canvas.toDataURL()
                  image_extension=extension
                //});
              
                
                const res = new Promise(function(resolve, reject) {
                  axios({
                    method:'post',
                    url:API_URL+'api/v1/postblogimage',
                    headers:{
                      'x-access-handler':loggedinUser.token
                    },
                    data:{
                      image: image,
                      image_extension:image_extension,
                      userid:loggedinUser.userid
                    }
                  })
                  //axios.post(API_URL + 'api/v1/postblogimage', formData, config)
                  .then((response) => {
                    
                    if (response.data.error == 'false' || response.data.error == false) {
                      if (response.data.status == 200 && response.data.message == "Image uploaded successfully") {
                        
                       //debugger
                          const range = self.quill.getSelection(true);
          
                          // Insert temporary loading placeholder image
                          // this.quill.insertEmbed(range.index, 'image', `${window.location.origin}/images/loaders/placeholder.gif`);
                  
                          // Move cursor to right side of image (easier to continue typing)
                          self.quill.setSelection(range.index + 1);
                  
                        
                          // Remove placeholder image
                          self.quill.deleteText(range.index, 1);
                  
                          // Insert uploaded image
                          let url=response.data.data[0].imageURL;
                          self.quill.insertEmbed(range.index, 'image', url);
                          self.quill.pasteHTML(range.index, <img src={url} class="blog-image-content" alt="Responsive image"/>);
            
                        
                      }
                     
                    }else if(response.data.error == 'true' || response.data.status == '500')
                    componentProps.error('Sorry, Inappropriate image')
                  
                    // } 
          
                  }).catch((error) => {
                    // reject(Error("It broke"));
                  });
                
                
                });
              }
             
            }, {orientation: true});
          }
          else{
            componentProps.error(" Sorry, File size should be of size between 50 kb to 500kb")
          }
        }
        else{
         // this.setState({
            // image_warning:'Invalid image type',
            // image:'',
            // image_extension:''
          //})
         // this.fileInput.value=''
        }
     

       
    };
}




  render() {
  
    const ReactQuill = this.ReactQuill
    if (typeof window !== 'undefined' && ReactQuill) {
    return (
      
      <div className="editor-container">
         <ReactQuill
         ref={(el) => this.quillRef = el
      }
      onChange={this.handleChange}
      placeholder={"share your thoughts"}
                  modules={{
                    toolbar: {
                        container: [
                            [{ header: '1' }, { header: [2,3, 4, 5, 6] }, { font: [] }],
                            [{ size:   [ 'small', false, 'large', 'huge' ] }],
                            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                        
                            ['link', 'image', 'video'],
                            ['clean'],
                            ['code-block'],
                            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                            
                            [{ 'align': [] }],
                          
                           
                        ],
                        handlers: {
                         image: (val) => this.imageHandler({ val, componentProps: this.props })
                          // image: () => this.imageHandler
 
                        }
                    }
                }}
                  />

      </div>
    )
              }       
              else {
                return <textarea />;
              } 
  }
}```

Answer 1

每個重新渲染模塊 object 創建，useMemo 固定。

const modules = useMemo(() => ({
    imageResize : {
      parchment: Quill.import('parchment'),
      modules: ['Resize', 'DisplaySize', 'Toolbar'],
  
    },
    toolbar: {
      container: [
        [{ header: [1, 2, 3, 4, false] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [
          { list: "ordered" },
          { list: "bullet" },
          { indent: "-1" },
          { indent: "+1" },
        ],
        [{align: [ ]}],
        ["link", "image"],
        ["clean"],
      ],
      handlers: {
       image: () => {
         imageHandler()
       }
      }
    }, 
  }), []);