image and video alignments do not save in quill.

Hi, Thank you for making this library. I have an issue with image and video alignments. When I click on an image or video I inserted in the quill editor (I am using react-quill), I can align left, right, and center using the resizer box provided by quill-blot-formatter. But, as soon as I remove the editor and display the content in <div class="ql-editor" dangerouslySetInnerHTML={{ __html: content }} />, all the contents, images and videos are there but alignments are ignored.

Could you tell me what I may be missing? or at least can I hide the alignment boxes in quill-blot-formatter so that users can just use the alignment options in the quill-toolbar?

Thanks

[BrenoLopes]

Using the code above I had to make some changes to make quill accept it and register.

import Quill from 'quill';

const Image = Quill.import('formats/image'); // Had to get the class this way, instead of ES6 imports, so that quill could register it without errors

const ATTRIBUTES = [
  'alt',
  'height',
  'width',
  'class', 
  'style', // Had to add this line because the style was inlined
];

class CustomImage extends Image {
  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      const copy = { ...formats };

      if (domNode.hasAttribute(attribute)) {
        copy[attribute] = domNode.getAttribute(attribute);
      }

      return copy;
    }, {});
  }

  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);
    }
  }
}

export default CustomImage;

And them register it

Quill.register({
     // ... other formats
    'formats/image': CustomImage
});

Thanks miczed for pointing out the way

[oxdc]

Same issue. And I find a solution here.