Quill rich text editor resize image only works in

Question

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 already known issue for other browsers? If so, only IE is suitable for resizing an image thru Quill editor?

If you tell me only IE can resize an image thru Quill, I have to use different text editor I guess.. hope not though.. If I have to use different one, can you recommend one that is open source?

Thank you in advance!

Here is how I have done in html:

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div class="col-md-10 col-md-offset-1">
    <div class="form-group">
        <div id="editor-container" style="height:600px"></div>
    </div>
</div>

<script type="text/javascript">
    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: [
                [{ header: [1, 2, false] }],
                [{ 'font': [] }],
                [{ 'color': [] }, { 'background': [] }],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                [{ 'align': [] }],
                ['image', 'link'],
            ]
        },
        theme: 'snow'  // or 'bubble'
    });
</script>

Answer 1

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'
import ImageResize from '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.

Answer 2

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 stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Quill Image Resize Module -->
<script src="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