본문 바로가기
✘✘✘ Javascript/Quill

[quill] setContents does not work on image attributes?

by PrettyLog 2023. 5. 6.

Problem

quill.setContents(content);

This remove width property

Cause

There is a missing on formats property on quill options

Solution

quill option you need to add width on formats property like below

export const defaultOptions: QuillOptionsStatic = {
  modules: {
    toolbar: {
      container: defaultToolbarOptions,
      'image-tooltip': true,
      'link-tooltip': true,
      handlers: {
        // image: () => {}
      },
    },
    imageResize: {
      modules: [
        'Resize',
        'DisplaySize',
        // "Toolbar"
      ],
      handleStyles: {
        backgroundColor: 'black',
        border: 'none',
        borderRadius: '0',
        boxShadow: 'none',
        cursor: 'se-resize',
        height: '12px',
        width: '12px',
        zIndex: '10',
      },
    },
  },
  theme: 'snow',
  formats: [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'align',
    'strike',
    'script',
    'blockquote',
    'list',
    'direction',
    'bullet',
    'ordered',
    'check',
    'indent',
    'link',
    'color',
    'background',
    'code-block',
    'video',
    'customImage',
    'image',
    'width',
  ],
};

https://github.com/kensnyder/quill-image-resize-module/issues/19

댓글