Image position not saved

[cramy25]

Hi,
If I select the image position and close my admin page all is working well, but if I reopen my admin page to do some modification, the position of the image is going back to the left.

Is there a way to keep the position I selected?

[toregua]

same behavior for me, the image position is not persisted when i save my generated html and reload quill component with the same html, images positions are lost

it seems related to this issue

[toregua]

I have found a solution related to #10. It is due to inline css that are not persisted

Solution :

const BaseImageFormat = Quill.import('formats/image');
const ImageFormatAttributesList = [
    'alt',
    'height',
    'width',
    'style'
];

class ImageFormat extends BaseImageFormat {
    domNode: any;

    static formats(domNode) {
        // tslint:disable-next-line: only-arrow-functions
        return ImageFormatAttributesList.reduce(function (formats, attribute) {
            if (domNode.hasAttribute(attribute)) {
                formats[attribute] = domNode.getAttribute(attribute);
            }
            return formats;
        }, {});
    }
    format(name, value) {
        if (ImageFormatAttributesList.indexOf(name) > -1) {
            if (value) {
                this.domNode.setAttribute(name, value);
            } else {
                this.domNode.removeAttribute(name);
            }
        } else {
            super.format(name, value);
        }
    }
}

Quill.register(ImageFormat, true);

[okjack365]

That's because you didn't save the style of the picture to your editor data.
formats: ['image', 'width'] may be needed.
Also see #10

[bijaypoudel1]

I have found a solution related to #10. It is due to inline css that are not persisted

Solution :

const BaseImageFormat = Quill.import('formats/image');
const ImageFormatAttributesList = [
    'alt',
    'height',
    'width',
    'style'
];

class ImageFormat extends BaseImageFormat {
    domNode: any;

    static formats(domNode) {
        // tslint:disable-next-line: only-arrow-functions
        return ImageFormatAttributesList.reduce(function (formats, attribute) {
            if (domNode.hasAttribute(attribute)) {
                formats[attribute] = domNode.getAttribute(attribute);
            }
            return formats;
        }, {});
    }
    format(name, value) {
        if (ImageFormatAttributesList.indexOf(name) > -1) {
            if (value) {
                this.domNode.setAttribute(name, value);
            } else {
                this.domNode.removeAttribute(name);
            }
        } else {
            super.format(name, value);
        }
    }
}

Quill.register(ImageFormat, true);

It's working for me after wasting few hours. Thansk