Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Quill JS: How to add module for Quill Image Resize


I am trying to add a module for Quill JS to enable resize on the images imported editor. I am using the Quill Image Resize module.

Anyone has a sample working code?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi Joer John

In Metronic v8 Laravel, the Quill already included.

You can find the quill path in /starterkit/resources/mix/plugins.js

When you run "npm run dev" command, the assets should build into this folder:
public/assets/plugins/global/plugins.bundle.js

The plugins.bundle.js file will be imported globally.



Hi Faizal,

I am encountering error saying "Quill Image Resize module not loaded".

How do I make the ImageResize available on global scope?

I am installing the Node Module via Yarn.



Hi Joer John

Sorry for the delay. Please check this example implementation.

https://drive.google.com/file/d/1k_ssM9tK-zaQ3fsQAjWCRSRRL59dYiqj/view?usp=share_link



Hi Faizal,

Yes, I am using Metronic Laravel v8. I don't have any problems on how to use Quill. I wanted to have image resize module on Quill.

Do you have any sample that has image resize module for Quill?



Hi Joer John

May I know if you are using Metronic Laravel v8? You can find example quill usage in this file. Quill already included in the package.

/starterkit/resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-product.js

Thanks



How to I import the Quill Image Resize module package on my custom page script?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(