Add custom handlers for image in toolbar Error

[puneetjindal1997]

I want to add custom handler for image upload that i find here #2436 and #2034
But i am doing something wrong and cant find out what.

Here is my code

import React from 'react'
import 'quill/dist/quill.snow.css'
import ReactQuill from 'react-quill'

export default function TestEditor() {
  // const imageHandler = () => {
  //   // const range = quillRef.getEditor().getSelection()
  //   // const imageUrl = 'YOUR_SERVER_IMAGE_URL'
  //   console.log('hello')
  //   // quillRef.getEditor().insertEmbed(range.index, 'image', imageUrl, 'user')
  // }
  // let quillRef
  let modules = {
    toolbar: [
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ font: [] }],
      [{ size: [] }],
      [{ align: [] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ color: [] }, { background: [] }],
      ["link", "image", "video"],
    ],
    ImageResize: {
      modules: ["Resize", "DisplaySize"],
    },
    imageCompress: {
      quality: 0.7, // default
      maxWidth: 1000, // default
      maxHeight: 1000, // default
      imageType: "image/jpeg", // default
      debug: true, // default
    },
  
    imageUploader: {
      upload: async (file) => {
        const bodyFormData = new FormData();
        bodyFormData.append("file", file);
        // const response = await axios({
        //   method: "POST",
        //   url: "http://127.0.0.1:5000/upload-image",
        //   headers: authHeaderAdmin(),
        //   data: bodyFormData,
        // });
        // return response.data.image;
      },
    },
    // toolbar: [
    //   [{ size: ['small', false, 'large', 'huge'] }],
    //   ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    //   [{ list: 'ordered' }, { list: 'bullet' }],
    //   ['link', 'image'],
    //   [
    //     { list: 'ordered' },
    //     { list: 'bullet' },
    //     { indent: '-1' },
    //     { indent: '+1' },
    //     { align: [] },
    //   ],
    //   [
    //     {
    //       color: [
    //         '#000000',
    //         '#e60000',
    //         '#ff9900',
    //         '#ffff00',
    //         '#008a00',
    //         '#0066cc',
    //         '#9933ff',
    //         '#ffffff',
    //         '#facccc',
    //         '#ffebcc',
    //         '#ffffcc',
    //         '#cce8cc',
    //         '#cce0f5',
    //         '#ebd6ff',
    //         '#bbbbbb',
    //         '#f06666',
    //         '#ffc266',
    //         '#ffff66',
    //         '#66b966',
    //         '#66a3e0',
    //         '#c285ff',
    //         '#888888',
    //         '#a10000',
    //         '#b26b00',
    //         '#b2b200',
    //         '#006100',
    //         '#0047b2',
    //         '#6b24b2',
    //         '#444444',
    //         '#5c0000',
    //         '#663d00',
    //         '#666600',
    //         '#003700',
    //         '#002966',
    //         '#3d1466',
    //         'custom-color',
    //       ],
    //     },
    //   ],
    // ],
    // handlers: {
    //   image: function () {
    //     // Custom handler logic for image option
    //     console.log('Custom handler for image option triggered')
    //   },
    // },
    // ImageData
  }

  // handlers: {
  //   image: imageHandler,
  // },

  let formats = [
    'header',
    'height',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'color',
    'bullet',
    'indent',
    'link',
    'image',
    'align',
    'size',
  ]
  const handleProcedureContentChange = (content) => {
    console.log('content---->', content)
  }

  return (
    <div>
      <h1 style={{ textAlign: 'center' }}>Text Editor In React JS</h1>
      <div style={{ display: 'grid', justifyContent: 'center' }}>
        <ReactQuill
          theme="snow"
          modules={modules}
          formats={formats}
          placeholder="write your content ...."
          onChange={handleProcedureContentChange}
          style={{ height: '220px' }}
        ></ReactQuill>
      </div>
    </div>
  )
}

But i am getting this error.

quill.js:2037 quill Cannot import modules/ImageResize. Are you sure it was registered?
quill.js:2037 quill Cannot load ImageResize module. Are you sure you registered it?
quill.js:2037 quill Cannot import modules/imageCompress. Are you sure it was registered?
quill.js:2037 quill Cannot load imageCompress module. Are you sure you registered it?
quill.js:2037 quill Cannot import modules/imageUploader. Are you sure it was registered?
quill.js:2037 quill Cannot load imageUploader module. Are you sure you registered it?

Version:

"react-quill": "^2.0.0"

Please help me to resolve this issue.

[Keshavvakul]

hey, did you get solution for this issue