search

kensnyder / quill-image-resize-module

A module for Quill rich text editor to allow images to be resized.
MIT License
467 stars 468 forks source link

Image position not saved #139

Open cramy25 opened 2 years ago

cramy25 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

That's because you didn't save the style of the picture to your editor data. formats: ['image', 'width'] may be needed. Also see https://github.com/kensnyder/quill-image-resize-module/issues/10

bijaypoudel1 commented 3 months ago

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