How can i add class to a image element in quill image Handler?

Question

i have quill editor in react project and image handler is being used to upload image but i have to add class to all the image element in the quill editor. here is my code for image handler

imageHandler() {

    let self=this
    const Cryptr = require('cryptr');
    const cryptr = new Cryptr(key);
    const users = localStorage.getItem('users') ? JSON.parse(cryptr.decrypt(localStorage.getItem('users'))) : {}

    let loggedinUser = users[users.lastLoginId];
    const input = document.createElement('input');

    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = async () => {

        const file = input.files[0];
        const formData = new FormData();

        // const formData = new FormData();
        formData.append('image', file);
        const config = {
          headers: {
            'content-type': 'multipart/form-data',
            'x-access-handler': loggedinUser.token
          }
        };
        const res = new Promise(function(resolve, reject) {
          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") {


                  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

                  self.quill.insertEmbed(range.index, 'image', response.data.data[0].imageURL);



              }
            }

            // } 

          }).catch((error) => {
            // reject(Error("It broke"));
          });


        });


    };
}

can someone please help me with this as i have been trying it for very long and haven't been successful. any help or suggestion will be greatly appreciated.

Answer 1

One workaround is to change className in formats/image module

You have to import it and register it again

import ReactQuill, { Quill } from "react-quill";

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

import React, {useRef, useState, useEffect} from "react";
import ReactDOM from "react-dom";
import ReactQuill, { Quill } from "react-quill";
import 'react-quill/dist/quill.snow.css';
import "./styles.css";

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

function App() {
  const [value, setValue] = useState('');
  const ref = useRef(null);

  useEffect(() => {

    if(ref && ref.current) {
      const quill = ref.current;
      const editor = quill.getEditor();
      editor.insertEmbed(0, 'image', 'https://i.picsum.photos/id/211/200/300.jpg')
    }

  }, [ref])

  return (
    <div className="App">
      <ReactQuill
        ref={ref}
        theme="snow"
        value={value}
        />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);