Trigger 'editor-change' when user changes image alignment

[sotaan]

Description

I scratched my head for hours to verify this before even posting.
I founded out that when a user interacts with the alignment Toolbar, there is no 'editor-change' event being triggered.
I can be a problem when a user change alignment as final action since it will not be registered by my Vue component (I rely on a change event bound to Quill editor-change event).

Demo

1. open this plunkr
2. open dev console
3. try resizing an image: editor-change triggered
4. try changing alignment: no editor-change 😭

[jagabs]

im having the same problem

[jsiebern]

+1

[ccbikai]

+1

[WinnieFE]

+1

[shmilyoo]

#10 , for the style attribute not response in the editor-change

[zhenglixin1]

样式改变没响应，大神们，有解决的没？

[benwinding]

Anyone ever solve this issue?

[benwinding]

Okay, we solved this issue by adding the code from this comment: #10 (comment)

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

class ImageFormat extends BaseImageFormat {
  static formats(domNode) {
    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);
                
                
var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        imageResize: {}
    }
});

[ghost]

Great!
I saw your message just ago.
Good luck!

[dschissler]

You can use a mutation observer with a debounced callback to obtain any change which occurred to the HTML in the editor. The only possible downside is that it could trigger on something like the resize grabbers and alignment overlay appearing. Also make sure to disconnect the observer to prevent possible memory leaks.

    const editor = new Quill(...)

    const mutationObserver = new MutationObserver(debounce(() => {
      console.log(editor.root.innerHTML)
    }, 200))

    mutationObserver.observe(editor.root, {
      attributes: true,
      characterData: true,
      childList: true,
      subtree: true,
    })