Problem saving content after image is compressed

[tinmegali]

Hey @benwinding .
First of all, thanks for the awesome initiative, I was really needing something like this.

I having a problem saving the context once the image is compressed. The image is compressed just fine on the editor, but once I save the data, the image (any image) is lost.

1. Image resizes, but the content is lost during the saving process.
2. The maxWidth property is working as the default width for any image.
3. Everything was working just fine before the module quill-image-compress was added.
4. I'm using the module on Angular.

component.ts

import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

import VideoResize from 'quill-video-resize-module';
Quill.register('modules/videoResize', VideoResize);

import ImageCompress from 'quill-image-compress';
Quill.register('modules/imageCompress', ImageCompress);

editorConfig = {
        toolbar: [
            ['bold', 'italic', 'underline'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link'],
            ['image', 'video']
        ],
        imageResize: {},
        videoResize: {},
        imageCompress: {
            quality: 1, // default
            maxWidth: 500, // default
            imageType: 'image/jpeg', // default
            debug: true, // default
        }
    };
    editorStyle = {
        height: '1000px'
    };

component.html

<quill-editor formControlName="description"
                                  placeholder="Enter Description text...."
                                  format="html"
                                  [styles]=editorStyle
                                  [modules]="editorConfig"

                                  (onContentChanged)="onEditorContentChange($event)"
                                  id="field_description">
                    </quill-editor>

Do you have any idea what's the problem?
Thank you for your time!

[benwinding]

Hi @tinmegali,

Thanks for checking out the package. Sorry for troubles, but I'm not quite sure what you mean, are you saying the image is lost after uploading due to the quill-image-compress library?

Some things to help debug this issue

• Does it work without videoResize?
• Can you reproduce this in the smallest way possible? Like create a tiny Stack Blitz App to show the problem.
• Does the src/demo.js file work for you in this repository?

Cheers,
Ben

[hugumberto]

Hi @benwinding,
I'm facing the same problem, but i found what it could be.

html
<quill-editor formControlName="des_corpo_email" link-tooltip="true" image-tooltip="true" [(ngModel)]="content" [modules]="modules"></quill-editor>
ts

...
import * as Quill from "quill";
import ImageCompress from 'quill-image-compress';
 
Quill.register('modules/imageCompress', ImageCompress);
...
content:any;
  modules = {

    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      ['blockquote'],

      [{ header: 1 }, { header: 2 }], // custom button values
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
      [{ direction: 'rtl' }], // text direction
      [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
      [{ header: [1, 2, 3, 4, 5, 6, false] }],

      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ font: [] }],
      [{ align: [] }],

      ['clean'], // remove formatting button
      ['link', 'image', 'code-block'] // link and image and code

    ],

    imageCompress: {
      quality: 0.5, // default
      maxWidth: 1000, // default
      imageType: 'image/jpeg', // default
     
    }
  }
...
  sendTest() {
    if (this.form.get('des_corpo_email').value == '' || this.form.get('des_corpo_email').value ==null) {
      this.$alertService.snack('Preencha o texto do Email.');
      return;
    }

Now, when a add a image, the variable "content" get filled with ""(empty). Only when i interact again that get filled with the image's base64.
Adding a image and clicking on send

Adding a image, typing enter and clicking on send

[benwinding]

Hi @hugumberto,
Thanks for reporting this. Looks like you're using Angular too right? I'm still not entirely sure what you mean, are you saying the value is not adding the image until you interact with the editor? If you could make a small Stack Blitz example with angular, I will be able to help you with your problem.

If you want a formcontrol using the QuillJs editor, checkout this project mat-reduce, it uses a quill editor here with the image compress extension:
Check the demo here: https://benwinding.github.io/mat-reduce/test-editor

Cheers,
Ben

[ashwinikulalp]

can

Hi @hugumberto,
Thanks for reporting this. Looks like you're using Angular too right? I'm still not entirely sure what you mean, are you saying the value is not adding the image until you interact with the editor? If you could make a small Stack Blitz example with angular, I will be able to help you with your problem.

If you want a formcontrol using the QuillJs editor, checkout this project mat-reduce, it uses a quill editor here with the image compress extension:
Check the demo here: https://benwinding.github.io/mat-reduce/test-editor

Cheers,
Ben

can u atttach the document ASAP

[imugunthan]

Hi @benwinding,

I'm also facing the same issue. I can able to reproduce the issue in your mat-reduce project.

Steps to reproduce the issue in your project.
1. Upload any image in the editor, you will be able to see the image in the editor. But when you see the HTML Rendered and value below the editor still shows null.

It should show the image once i upload any image, Issue was not there without quill-image-compress

[benwinding]

I'm reopening this issue, but it's not a simple one. There's a known issue where adding an image to Quill doesn't trigger the changed function. Does it change when you type something after adding the image?

[imugunthan]

@benwinding Yes, When you type something after adding the image, you will able to see the image in the HTML renderer.

[imugunthan]

I found a solution for the above said issue. In your quill.imageCompressor.js change the below line

this.quill.insertEmbed(range.index, "image", ${url});

to

this.quill.insertEmbed(range.index, "image", ${url}, "user");

[benwinding]

Thanks @imugunthan!
Great fix, I've also added output to one of the Demo pages, so you can test it yourself.

https://benwinding.github.io/quill-image-compress/src/demo-script-tag.html

Deployed to quill-image-compress@1.2.6
Cheers,
Ben