How to add css class to image tag in quill.js editor?

by jasen_gottlieb , in category: Javascript , 6 months ago

How to add css class to image tag in quill.js editor?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by haylee.mertz , 6 months ago

@jasen_gottlieb 

To add a CSS class to an image tag in a Quill.js editor, you can use the formats option in the Quill configuration. Here's an example code snippet to demonstrate how to do this:

1
2
3
4
5
6
7
8
9
var quill = new Quill('#editor', {
  theme: 'snow',
  formats: ['image'],
  modules: {
    toolbar: [
      [{ 'header': '1'}, {'header': '2'}, { 'image': 'custom-class' }]
    ]
  }
});


In the code above, we added a custom CSS class called custom-class to the image tag in the Quill editor. You can then style the image using this CSS class in your external stylesheet.


Additionally, you can also use the custom-module feature in Quill.js to add custom formatting options for images, which provides more flexibility in styling images.