[FIXED] How to fix image size/dimensions on primeng editor

Issue

I’m developing an application with Angular 8 in which I’m using prime ng editor. In upload image button I want to fix a limit for image size and dimension before uploading, but I can’t make it work.

enter image description here

Can some one help me to do it? otherwise any suggestions for making other components more simple.

Solution

Quill does not yet (at least as far as I know, and today) have a practical way to control files from a user’s machine.

But that does not stop you from defining your own way to do it. There are hundreds of tutorials on the internet demonstrating how to upload and display images using JavaScript. With this knowledge, all you have to do is change Quill’s native default image behavior. In this case, you can change the behavior of the toolbar image button. And it is not very difficult to get information about the image.

To change the default behavior of the Quill image button, you’ll need to use a custom handler. Here is a simple example of how the image button can change its behavior:

function customImageBehavior(){
  console.log('Put your code here!');
}

var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: {
        container: [['bold' , 'italic' , 'strike' , 'underline'] , ['image' , 'video' , 'link']],
        handlers: {
          'image': customImageBehavior
        }
      }
    }
});
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor"></div>

Oh, and don’t forget to visit this link to find out a little more information about Quill.

Answered By – Loa

Answer Checked By – Cary Denson (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published