How to add multiple valid css classes to images?

[edhowler]

I know it is possible to add a single valid class like this

var ImageFormat = Quill.import('formats/image');
ImageFormat.className = 'rot-180rotate';
window.Quill.register({'formats/image': ImageFormat}, true);

But how to add all those classes? ['rot-180rotate', 'rot-90rotate', 'rot-minus90rotate']

[gwidonw]

@edhowler In my opinion the easiest way would be to create and register new format type that will hold information about rotation and base on that apply classes. Check formats for some examples https://github.com/quilljs/quill/tree/develop/formats

[edhowler]

@edhowler In my opinion the easiest way would be to create and register new format type that will hold information about rotation and base on that apply classes. Check formats for some examples https://github.com/quilljs/quill/tree/develop/formats

Thanks for your answer. I'm trying to do exactly that, but still haven't managed to do so. Most formats are used on span tags, which can handle multiple classes for multiple formats by using a whitelist. The formats that aren't span based are table and image, but both do not specify classes. So, is there any example I can follow?

[edhowler]

I got it now, did it like this (notice the 'class' ATTRIBUTE):

    var Image = Quill.import('formats/image');
    const ATTRIBUTES = ['alt', 'height', 'width', 'class'];

    class ImageFormat extends Image {
        static formats(domNode) {
            return ATTRIBUTES.reduce((formats, attribute) => {
                if (domNode.hasAttribute(attribute)) {
                    formats[attribute] = domNode.getAttribute(attribute);
                }
                return formats;
            }, {});
        }

        format(name, value) {
            if (ATTRIBUTES.indexOf(name) > -1) {
                if (value) {
                    this.domNode.setAttribute(name, value);
                } else {
                    this.domNode.removeAttribute(name);
                }
            } else {
                super.format(name, value);
            }
        }
    }
    window.Quill.register({'formats/image': ImageFormat}, true);

[Rapliangle]

hi, there. I got the same question now. I'm wondering why the Attributes list exists here, I think it would be reasonable that the users can set this property by themselves

[malawebmanufaktura]

I know it is possible to add a single valid class like this

var ImageFormat = Quill.import('formats/image');
ImageFormat.className = 'rot-180rotate';
window.Quill.register({'formats/image': ImageFormat}, true);

But how to add all those classes? ['rot-180rotate', 'rot-90rotate', 'rot-minus90rotate']

Simple fix would be to make a change within main quill.js file /Quill ver. 1.3.6/ in line 5700:

From:

if (this.className) { node.classList.add(this.className); }

To:

if (this.className) { if (Array.isArray(this.className)) { this.className.forEach(function (className) { node.classList.add(className); }); } else { node.classList.add(this.className); } }

and then just add classes as array:

ImageFormat.className = ['rot-180rotate', 'rot-90rotate', 'rot-minus90rotate'];