kensnyder / quill-image-resize-module

A module for Quill rich text editor to allow images to be resized.
MIT License
467 stars 468 forks source link

Toolbar not working #141

Open anchetaWern opened 2 years ago

anchetaWern commented 2 years ago

thanks for this library. But I couldn't get the toolbar to work.

Here's the code I'm using:

import Quill from "quill";
import QuillResize from "quill-resize-module";
import 'quill-resize-module/dist/resize.css';

Quill.register("modules/resize", QuillResize);

const fullToolbarOptions = [
  [{ header: [1, 2, 3, false] }],
  ["bold", "italic", "underline"],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'align': [] }],
  ["blockquote"],
  ["image", "video"],
];

const quill = new Quill("#editor", {
  theme: "snow",
  modules: {
    toolbar: {
      container: fullToolbarOptions
    },

    resize: {
      modules: [ 'Resize', 'DisplaySize', 'Toolbar' ],
    },
  }
});

Here's what it looks like and the error I'm getting. The resize and image size works perfectly. It's just the toolbar not showing up:

Screen Shot 2022-02-22 at 3 07 33 PM Screen Shot 2022-02-22 at 3 07 29 PM

I even tried with the style options but no luck:

resize: {
  modules: [ 'Resize', 'DisplaySize', 'Toolbar' ],
  toolbarStyles: {
    backgroundColor: 'black',
    border: 'none',
    color: 'white'
  },
  toolbarButtonStyles: {

  },
  toolbarButtonSvgStyles: {

  },
},