Quill Rich Text Editor Resize Image Only Works In Ie But Not In Chrome Or Edge

I implemented Quill text editor to my web app. I created a web app in asp.net core 2.1 Quill text editor resizing an image working fine in IE but not in Chrome or Edge. Is this alr

Solution 1:

displaySize: true // default false

<script src="quill-image-resize-module-master/image-resize.min.js"></script>

var quill = new Quill('#editor', {
        theme: 'snow',
         modules: {
            imageResize: {
              displaySize: true// default false
            },
           toolbar: [
             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
             ['bold', 'italic', 'underline', 'strike'],
             [{ 'color': [] }, { 'background': [] }], 
             [{ 'align': [] }],
             ['link', 'image'],

             ['clean']  
           ]
        }
    });

Solution 2:

I'm using quill editor with vue and I had to install some modules for image resize:

1 Install modules

yarn add quill-image-resize-module--save
yarn add quill-image-drop-module--save

or using npm:

npm install quill-image-resize-module--save
npm install quill-image-drop-module--save

2 Import and register modules

import { ImageDrop } from'quill-image-drop-module'importImageResizefrom'quill-image-resize-module'Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

3 Add editor options

editorOption: {
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        
              ['blockquote'/*, 'code-block'*/],

              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'indent': '-1'}, { 'indent': '+1' }],          

              [{ 'size': ['small', false, 'large', 'huge'] }],  
              [{ 'header': [/*1,*/ 2, 3, 4, 5, 6, false] }],

              [{ 'color': [] }, { 'background': [] }],          
              [{ 'font': [] }],
              [{ 'align': [] }],

              ['clean']                                         
        ],

        history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
        },
        imageDrop: true,
        imageResize: {
          displayStyles: {
            backgroundColor: 'black',
            border: 'none',
            color: 'white'
          },
          modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        }
    }
}

I hope will help you.

Solution 3:

A simple way to implement the image resize module cross-browser would be to download the ZIP from GitHub: https://github.com/kensnyder/quill-image-resize-module

Extract the contents in your root folder, then call it from your HTML.

<!-- Quill HTML WYSIWYG Editor --><!-- Include Quill  --><linkhref="https://cdn.quilljs.com/1.0.0/quill.snow.css" ><!-- Include the Quill library --><scriptsrc="https://cdn.quilljs.com/1.0.0/quill.js"></script><!-- Quill Image Resize Module --><scriptsrc="quill-image-resize-module-master/image-resize.min.js"></script>

Next add it to your Quill config:

var quillObj = new Quill('#editor-container', {
modules: {
imageResize: {},
toolbar: '#toolbar-container'
},
theme: 'snow'
});

Demo Here